May 292014
 

The Facebook documentation offers three different ways to add a “like” button to a web page:

  • HTML5
  • XFBML
  • IFRAME

This post explains the pros and cons of each of them, and how to add the “like” button in each case.

Adding a Facebook “like” button using HTML5

HTML5 is the latest version of the HTML specification, and is supported by most browsers. In principle, this is the preferrable method to add the “like” button to a web page, unless the site has a significative amount of visitors using old browsers that do not fully support HTML5.

To add the button using HTML5 markup:

1. Insert, immediately below the <body> tag, the javascript code that loads the Facebook SDK:

2. Add the following code where we want the button to be displayed:

with these two snippets of code in place, we can verify that the button is rendered as:

Adding a Facebook “like” button using XFBML

XFBML is a markup developed by Facebook. It has the advantage that it compatible with older versions of browsers that do not support HTML5.

To add the button using XFBML:

1. Insert, immediately below the <body> tag, the javascript code that loads the Facebook SDK (this is identical to the code added to add the button using HTML5):

2. For compatibility with older versions of Internet Explorer, add to the <html> tag the reference to the facebook namespace:

3. Insert the following code where we want the button to be displayed:

And check the result:



Adding a Facebook “like” button inside a <iframe>

If the button is added by means of an iframe, there is no need to load the Facebook javascript SDK in the page where the button is placed, because the whole page with the url “http://www.facebook.com/plugins/like.php” is loaded from the facebook site inside the iframe.

The required arguments to specify the type of buttons, size, etc are added to the URL as the query string.

Example:

An the resulting button looks like this:


Layouts

The “layout” argument allows choosing between several options for the display of the button. Besides the “standard” value that we have been using in the previous examples, there are three other possible values: “button_count”, “box_count” and “button”:

layout=”button_count”

layout=”box_count”

layout=”button”

Other arguments

So far, the examples in this post used arguments “layout”,”width”, etc to customize the look and functionality of the “like” button. Other arguments available are:

  • action – “like” or “recommend” (defaults to “like”). Is the text shown inside the button.
  • colorscheme – “light” or “dark” (“light”).
  • href – The absolute URL to be liked. In the XFBML and HTML5 versions of the code, it defaults to the URL where the button is placed.
  • kid_directed_site “false” or “true” (“false”). If the site’s content is addressed to children below 13, this arguments must be set to “true”.
  • ref – A label to track the pages where the button has been used. Must be less than 50 characters long, and the allowed characters in it are alphanumeric and the symbols +/=-.:_
  • share  – “false” or “true” (“false”). If set to “true”, a “Share” button is displayed to the right of the “like” button.
  • show_faces –  “false” or “true” (“false”). Specifies if the pictures in the user profiles are displayed below the “like” button. If the site’s content is directed to children below 13, it must be set to “false”. Only applied to the “standard” layout.

 

References

 Posted by at 8:13 am

 Leave a Reply

(required)

(required)