Implementing the Facebook Like button on your website

The Facebook Like button which is popping up everywhere allows visitors to share your content with their friends on Facebook but it also keeps a recorded of what they have liked within the persons own profiles Likes and Interests. This then means they can store a list of links they like similarly to Digg that they can come back too later. This is one of the major differences between it and the well established Share button which is relatively brief, in your News Feed one day and gone the next.

Basically you have 2 options to implementing the Facebook Like button on your web page.


Firstly you can use a iFrame which is easier to implement but limited and secondly by using Facebooks own XFBML which is more complicated to implement but is more versatile.  I will give you examples and the pro’s and con’s of each.

Option 1 iFrame

When implemented on the page the iframe will give you something like the button below.

When the person then clicks on the Like button it will change to indicate that they have liked the page.  (note: if they are not logged into Facebook they will be prompted to do so via a popup window)

 

By doing this a one line text will appear on the persons Profile -> Wall under RECENT ACTIVITY.

 
(Note: in-order to get the additional information like the image when the person mouse’s over the link you will need to define it using what is called the Open Graph Protocol)

If you used the Open Graph Tags then it will also place in the persons Profile -> Info -> Likes and interests the page (Social Object) they have liked.

Pros

 • Easy to implement

Cons

 • The Liked page appears as just one line insert on the persons wall
• The Liked page doesn’t appear in a person’s friends news feed

Option 2 XFBML

When implemented on the page the code will give you a similar Like button to that of the iframe.

The difference comes when the person clicks on the Like button they are given the option of including a comment which is shared along with the page on their and their friends news feeds.

And of course as before in the iframe option if you define the Open Graph tags it will also appear in the persons Likes and Interests area.

Pros

• Will appear in both the friends and persons news feed if the user has made a comment
• Will display more than just one line if specified in the Open Graph Tags e.g.  image, description etc..

Cons

• Requires more to implement with the addition of the XFBML fb:like tag and Facebook’s JavaScript SDK.
• It doesn’t currently work if you are also using Facebook Connect on your site as the 2 plug-ins won’t play nicely with each other.  This we have found out through our own trial and error which meant we had to revert to the iFrame option instead.

Getting Started

Now that you know the pro and cons of each you can make a informed decision and get started by going to  the configurator at Facebook Developers Social Plugins Like Button.

Note: Make sure you use the Open Graph Protocol because although it is optional it gives you the following 3 additional advantages:

1. You can communicate with those who have liked your page similarly to that of a Facebook fan page.

2.You can get metrics for the pages that have the like button, this is done through Facebooks “Insights for Your Domain” which tells you how many people have liked your page etc.

3. And finally Facebook gets metadata about your page when a person likes it which is then reflected in their own profile and news feeds.

Show you liked this blog by clicking on the Like button below.