We’ve just launched the new Shinytastic website which gave me a chance to experiment with some new techniques. The most interesting has to be the addition of Facebook like buttons to the website (down in the footer). The ability to directly integrate your website with a social media site is going to really change how we use the web, hopefully in a good way. Making it much easier for users to comment on your website and your business will give you a great instant response when they have an enquiry or something positive to say and will generally improve your communication with customers and potential customers.
There are two types (at the time of writing) of Facebook ‘Like’ buttons you can add to your website, the difference caused a little confusion at first but it’s simple enough. The first type is a general purpose Like button which you can stick on any page anywhere to allow users to like that page, when they do it creates a link on their facebook feed which links back to the page they liked. This is great for a blog or any website where you might want users to be able to like specific pages or pieces of information. The other type (which we have used) is a like box which is linked to a Facebook Page (for a business, entertainer, etc). When a user clicks a like box button it adds an entry to their feed which links back to the Facebook Page the button is associated with. This is better if you want to point people at your organisations Facebook Page and not at specific articles or pieces of information. The implementation is pretty much identical.
There are two ways you can add a like button (either of them) to your website, the easy way using an iframe which I’m not going to cover as facebook generates all the code you need for you and the more complicated but much more flexible manner using XFBML. I wanted to use XFBML because you have a lot more control over how it looks and integrates with your site, plus it was a challenge. Although all the documentation needed is out there (mostly on the Facebook Developers site) it’s a little scattered so here’s the steps involved in as straight-forward a manner as I can put them. I’ll try not to be too verbose with the supporting notes.
The first thing you need to do to your page to run XFBML is add the Facebook and Open Graph namespaces. Find your root html tag which will look something like this:
Add the Open Graph and Facebook namespaces as follows
The Facebook 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 problem to overcome. As a rule I stick to XHTML 1.0 Transitional but HORROR if you use XFBML tags with that Doctype your page will not validate, now this is not an issue for everyone but it’s a serious problem for me. The solution is you need to use the RDFa version 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 explanation, the short of it is you’ll need to change your doctype to this (assuming you are using XHTML 1.0 otherwise just have a little google for whichever HTML version you are using + RDFa):
Our site still doesn’t actually validate 100%, we have some errors referencing the XFBML tags, but I can deal with that (for now) as the code was supplied by Facebook. That’s the hard part out of the way.
Facebook supplies handy generators for you here. You’ll need a different tag depending on your preference.
Click here to go to the Facebook page to generate 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 attributes for specific layout and control features like this if you fancy, see the Facebook documentation for specific info:
Like boxes are the slightly more advanced siblings to the Like buttons. They are tied to a Facebook page. Quickest way to get the code is to visit your Facebook page (you must be logged in), click Get Started then click Add Like Box. This will take you to the generator page with all your details pre-filled. Set the settings how you fancy them and click Get Code and you shall receive something like this:
Stick your supplied tag wherever in the page you want it to go then configure your Open Graph Meta tags…
You can read all about the Open Graph Protocol here. For the sake of this article the Open Graph tags are additional meta tags you can add to your document to add specific information about the document which will be used by Facebook. There’s some information on the Facebook Like page on how to use them. Add the meta tags to the head section of your document, they should look a little like this (with your information in, not ours obviosuly):
title, email, phone_number, url and site_name are pretty obvious. type must be one of a very specific list available on the Open Graph website. image image is more important than you expect, I intially didn’t specify it assuming Facebook would either not use an image or would use the first image on the page. Nope, it used one of our clients logos so anyone who liked our page ended up with a confusing link to our website using our client’s logo. Facebook explain the image as follows:
The URL to an image that represents 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 importance is the fb:admins entry. This must contain a comma seperated list of user id’s who are responsible for this page. To get your Facebook id go to your profile and look at the url, your id is the part after the ?id=. My profile is http://www.facebook.com/profile.php?id=100001073515935 so my id is 100001073515935.
To get the like button working one of the users listed 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 integration here, there’s loads more you can do with a bit of research. Let me know how you get on.