The Like button enables users to make connections to your pages and share content back to their friends on Facebook with one click. Since the content is hosted by Facebook, the button can display personalized content whether or not the user has logged into your site. For logged-in Facebook users, the button is personalized to highlight friends who have also liked the page.
The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the <fb:like> XFBML tag and requires you use the new JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook. The XFBML version also dynamically sizes its height; for example, if there are no profile pictures to display, the plugin will only be tall enough for the button itself.
If your web pages represent profiles of real-world things — things like movies, sports teams, celebrities, and restaurants, you can optionally use the Open Graph protocol to enable users to establish lasting connections to your pages. Your pages show up in more places on Facebook and you gain the ability to publish stream stories to connected users.
The Facebook documentation doesn’t really go into any detail about what the generated code means, so I took the default sample and hacked on it to figure out what each parameter affected and how to best customize it to our own particular needs.
If you look at the default code that the generator outputs, it looks like this:
iFrame code:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fcrunchify.com&width&layout=standard&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
XFBML code:
<fb:like href="https://crunchify.com" layout="standard" action="like" show_faces="true" share="true"></fb:like>
So, in essence, the entire widget lives inside an iframe, whose content is generated entirely by Facebook’s servers. If you parse through and de-percent-encode the actual URL, you’ll find it makes an HTTP GET request to http://www.facebook.com/plugins/like.php with the following parameters:
- href = http://developers.facebook.com/
- layout = standard
- show-faces = true
- width = 450
- action = like
- font = arial
- colorscheme = light
Look familiar? Those are all the same options that you can set with Facebook’s generator, albeit expressed much more densely. layout can be standard or button_count, show-facesis a boolean that corresponds to the “show faces” checkbox, etc.
Get your Like Button here:
| HTML5 Attribute | Description |
|---|---|
data-action | The verb to display on the button. Can be either like (default) or recommend. |
data-colorscheme | The color scheme used by the plugin for any text outside of the button itself. Can be light (default) or dark. |
data-href | The URL of the webpage that will be liked. |
data-kid-directed-site | If your website or online service, or a portion of your service, is directed to children under 13 you must set this to true. Default is false. |
data-layout | Selects one of the different layouts that are available for the plugin. Can be one of standard (default), button_count, button or box_count. See the FAQ for more details. |
data-lazy | true means use the browser’s lazy-loading mechanism by setting the loading="lazy" iframe attribute. The effect is that the browser does not render the plugin if it’s not close to the viewport and might never be seen. Can be one of true or false (default). |
data-ref | A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details. |
data-share | Specifies whether to include a share button beside the Like button, true or false (default). This only works with the XFBML version. |
data-size | The button is offered in 2 sizes i.e. large and small (default). |
data-width | The width of the plugin (standard layout only), which is subject to the minimum and default width. Please see the Layout Settings table for more details. |