Add Facebook, Google and Twitter to Your Site
In order to spread the word of this awesome blog site, either that or annoy my friends and family that are not programmers, I started to look into how to integrate the social media sites into my own. Turns out, each of the big 3 have some great API’s (except facebook, it’s just ok). So this article describes how to do it.
1) Facebook
I will start here because it is the biggest social website out there. There are 3 different actions you have to keep in mind for facebook:
1)+1 or like or whatever 2)Post a message on your wall 3)Send a message to a friend
If you visit the page: https://developers.facebook.com/docs/reference/plugins/like/, you will see the javascript and html code generator. It can’t get any easier than selecting a few things and done. The only problem is that some of the functionality may not work as you would expect. Below is the configuration I used, and if you want to have something straight forward, give it a try.
Send button is key for sending messages, and posting. So if you want to do both of those, select send. I am selecting the button\_count layout, but you could go with the box\_count layout, too. These styles refer to how to present it, horizontal (button\_count) or vertical (box\_count). Standard is ok, but adds a bunch of text about likes and crap. Turn off faces, cause that adds more crap on the site, and if you want to change the other parameters, go for it. Just click ok and you can now add facebook into your site.
SPECIAL NOTE The URL should be the whole URL, like www.fbombcode.com/title/blahblah. Later with google+, you will not want that to be the case.
2) Twitter
Twitter was easy to set up, but I am afraid I don’t know what Twitter is used for in social media. I guess a straight forward spam bot. Anyways, to get a twitter thing go here: https://twitter.com/about/resources/buttons#tweet. Below is a picture of the twitter page:
3) Google +
Last, but not least, Google +. Ok, maybe the least used out of the 3, so let’s see how to add this thing to our site.
Google + is pretty simple and here is the link to it: https://developers.google.com/+/web/+1button/?hl=en. The one thing to note is that the domain is slapped on automatically, so don’t add it to the url in the data-href.