Shinyface

Adding Facebook Like buttons to your website

Posted August 16th, 2010 20:49 by Bob

We’ve just launched the new Shinytastic web­site which gave me a chance to exper­i­ment with some new tech­niques. The most inter­est­ing has to be the addi­tion of Face­book like but­tons to the web­site (down in the footer). The abil­ity to dir­ectly integ­rate your web­site with a social media site is going to really change how we use the web, hope­fully in a good way. Mak­ing it much easier for users to com­ment on your web­site and your busi­ness will give you a great instant response when they have an enquiry or some­thing pos­it­ive to say and will gen­er­ally improve your com­mu­nic­a­tion with cus­tom­ers and poten­tial customers.

There are two types (at the time of writ­ing) of Face­book ‘Like’ but­tons you can add to your web­site, the dif­fer­ence caused a little con­fu­sion at first but it’s simple enough. The first type is a gen­eral pur­pose Like but­ton which you can stick on any page any­where to allow users to like that page, when they do it cre­ates a link on their face­book feed which links back to the page they liked. This is great for a blog or any web­site where you might want users to be able to like spe­cific pages or pieces of inform­a­tion. The other type (which we have used) is a like box which is linked to a Face­book Page (for a busi­ness, enter­tainer, etc). When a user clicks a like box but­ton it adds an entry to their feed which links back to the Face­book Page the but­ton is asso­ci­ated with. This is bet­ter if you want to point people at your organ­isa­tions Face­book Page and not at spe­cific art­icles or pieces of inform­a­tion. The imple­ment­a­tion is pretty much identical.

There are two ways you can add a like but­ton (either of them) to your web­site, the easy way using an iframe which I’m not going to cover as face­book gen­er­ates all the code you need for you and the more com­plic­ated but much more flex­ible man­ner using XFBML. I wanted to use XFBML because you have a lot more con­trol over how it looks and integ­rates with your site, plus it was a chal­lenge. Although all the doc­u­ment­a­tion needed is out there (mostly on the Face­book Developers site) it’s a little scattered so here’s the steps involved in as straight-forward a man­ner as I can put them. I’ll try not to be too verb­ose with the sup­port­ing notes.

Namespaces, Doc­types and Validity

The first thing you need to do to your page to run XFBML is add the Face­book and Open Graph namespaces. Find your root html tag which will look some­thing like this:

Add the Open Graph and Face­book namespaces as follows

The Face­book namespace is so that you can use the XFBML tags the Open Graph is so that you can use the Open Graph meta tags which I’ll come to in a moment. First off though there’s a bit of a prob­lem to over­come. As a rule I stick to XHTML 1.0 Trans­itional but HORROR if you use XFBML tags with that Doc­type your page will not val­id­ate, now this is not an issue for every­one but it’s a ser­i­ous prob­lem for me. The solu­tion is you need to use the RDFa ver­sion instead, which I’m afraid kids means you need to write strict xhtml (unless you’re using HTML5 already in which case check out this handy link). This is not the time for a full explan­a­tion, the short of it is you’ll need to change your doc­type to this (assum­ing you are using XHTML 1.0 oth­er­wise just have a little google for whichever HTML ver­sion you are using + RDFa):

Our site still doesn’t actu­ally val­id­ate 100%, we have some errors ref­er­en­cing the XFBML tags, but I can deal with that (for now) as the code was sup­plied by Face­book. That’s the hard part out of the way.

Adding the Javas­cript SDK

Use of the XFBML tags for like but­tons requires the Face­book Javas­cript SDK. This is simply a case of going here to the Face­book SDK page, cut­ting and past­ing the sup­plied code into your page. Stick it just above the clos­ing body tag. Job done.

Add the XFBML tag

Face­book sup­plies handy gen­er­at­ors for you here. You’ll need a dif­fer­ent tag depend­ing on your preference.

Like But­tons (art­icles, spe­cific web-pages, etc)

Click here to go to the Face­book page to gen­er­ate the tag. You can pretty much leave the form as it is. You should be given some code a bit like this:

Yup, that’s it. That’s all you need. You can add attrib­utes for spe­cific lay­out and con­trol fea­tures like this if you fancy, see the Face­book doc­u­ment­a­tion for spe­cific info:

Like Boxes

Like boxes are the slightly more advanced sib­lings to the Like but­tons. They are tied to a Face­book page. Quick­est way to get the code is to visit your Face­book page (you must be logged in), click Get Star­ted then click Add Like Box. This will take you to the gen­er­ator page with all your details pre-filled. Set the set­tings how you fancy them and click Get Code and you shall receive some­thing like this:

Stick your sup­plied tag wherever in the page you want it to go then con­fig­ure your Open Graph Meta tags…

Open Graph Meta Tags

You can read all about the Open Graph Pro­tocol here. For the sake of this art­icle the Open Graph tags are addi­tional meta tags you can add to your doc­u­ment to add spe­cific inform­a­tion about the doc­u­ment which will be used by Face­book. There’s some inform­a­tion on the Face­book Like page on how to use them. Add the meta tags to the head sec­tion of your doc­u­ment, they should look a little like this (with your inform­a­tion in, not ours obviosuly):

title, email, phone_number, url and site_name are pretty obvi­ous. type must be one of a very spe­cific list avail­able on the Open Graph web­site. image image is more import­ant than you expect, I intially didn’t spe­cify it assum­ing Face­book would either not use an image or would use the first image on the page. Nope, it used one of our cli­ents logos so any­one who liked our page ended up with a con­fus­ing link to our web­site using our client’s logo. Face­book explain the image as follows:

The URL to an image that rep­res­ents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.

Final item of import­ance is the fb:admins entry. This must con­tain a comma seper­ated list of user id’s who are respons­ible for this page. To get your Face­book id go to your pro­file and look at the url, your id is the part after the ?id=. My pro­file is http://www.facebook.com/profile.php?id=100001073515935 so my id is 100001073515935.

To get the like but­ton work­ing one of the users lis­ted in fb:admins must visit the page and click the like button.

That’s it. It’s pretty simple really. I’ve only covered very basic integ­ra­tion here, there’s loads more you can do with a bit of research. Let me know how you get on.

Those Links Again

• Face­book Javas­cript SDK
• Open Graph Protocol
• Face­book for Websites
• Face­book Like Button
• Face­book Like Box

Posted in Code | RSS 2.0 Both comments and pings are currently closed.
Tags: Code, Facebook, Social Media, Tutorial, XFBML