The Ultimate Guide to Integrating the Facebook Like Button

The days of the upward pointing thumb to advertise Facebook pages are gone. Now, Facebook has created the simple blue Like and Share buttons. They’re smaller, easier to integrate into every site layout and yet still distinct. They’re also surprisingly robust in their customization options.

Like and Share, Share and Like

There are a few basic options you can set to change the layout and display of the Like and Share buttons. Primarily, you can choose whether or not to display the Share button at all, or just the Like button. There are four layout types for the Like button itself:

• Standard. This shows the like button. To the right of it, it shows the share button, if you have that enabled. Then it has a line of text to show how many others have liked the page, along with the usual “be the first of your friends” string if the user has no friends who have liked the page.
• Box Count. This layout has the like button and, optionally, the share button directly below it. Above them both is a box showing the number of people who have liked the target page.
• Button Count. This layout is the same as Standard, except instead of text, it shows the small box with the number of likes and nothing more.
• Button. Just the like button and, optionally, the share button. No additional text to clutter up the meaning of the boxes.

These are all options for customizing the Like button. You can also use the share button alone, with a slightly different plugin from Facebook. It has the same layouts as the Like button, but with a few extra options including small text links and tiny share icons.

Additionally, there’s a third button type, seen much more rarely throughout the Internet. This is the Send button, and it has a very specific purpose most sites don’t need. Still, it may come in handy.

The Purpose of the Buttons

The Like, Share and Send buttons all have different purposes. Typically you see Like alone, or Like and Share, on a business page or blog post. The Send button is rare due to its niche use.

• The Like button is self-explanatory. When a user clicks it, they are prompted to log in to Facebook to complete the action. This has them Like your Facebook page, adding it to their list of liked pages and posting the fact that they liked your page on their timelines.
• The Share button is a little more robust. It shares the current page, rather than the website as a whole. Essentially, it works as though the user pasted the URL of your page into their post button and posted it on their timeline. This gives them the option of adding a bit of text to explain why they’re sharing the link or to comment on it in some way.
• The Send button is similar to the Share button, except it doesn’t post to the user’s timeline. Instead, it allows them to choose a friend to message the link directly. It acts as a private message, rather than a publicly broadcast action.

Alternatives to the Like and Share

There are a few alternatives offered by Facebook, if you want a more prominent display of your Facebook connectivity. Often, a site will use the more robust plugins for a homepage or main blog index, and use the smaller buttons for individual posts and other discrete pages.

• Follow. The Follow button is small and designed the same way as the Like and Send buttons. Its purpose is to allow a user to follow an individual, rather than a page. The same customization options apply to allow it to display numbers and links to friends who have followed the account in question.
• The Like Box. The Like Box is a larger box displaying the name and profile picture of your account, along with the Like button, number of people liking it and random selection of user icons who have liked it. This is a fairly common addition to many sites.

Facebook’s Best Practices

Facebook has compiled a checklist of seven items, questions to ask yourself when you’re integrating one of these buttons. In order to properly integrate the buttons, in a best practices sort of way, you should consider these questions.

1. Are you displaying both the Like and Share buttons, or just one or the other? Displaying both gives the user choice in how they want to broadcast their affiliation with your site, and that choice encourages engagement.
2. Are your images properly sized to display in a shared post? Facebook claims a minimum size of 600×315 for images to display in large format. The ideal size, it claims, is 1200×630 or larger.
3. Are you properly implementing the Open Graph? The Open Graph allows you to flag certain tags for the Facebook web crawler, which allows it to generate previews of your content with greater ease. If you’ve ever noticed how some sites generate perfect previews, while others suffer from disjointed descriptions or missing images, utilizing the Open Graph may explain it.
4. As an addendum to number three, use the Open Graph debug tool to make sure your code is well formed and generates properly.
5. Are you using the Facebook Insights tool? This tool allows you to monitor trends and engaging content throughout Facebook, so you have a better idea of what to target and when.
6. Are you using JavaScript to track real-time Facebook engagement? The JavaScript SDK for Facebook allows you to track various actions with the buttons above, particularly the Like button.
7. Are you using translation? Facebook supports a number of languages with the JavaScript SDK. If you cater to multiple languages, you should make sure your Facebook buttons are translated.

Generating the Buttons

To generate the buttons, all you need is a design in mind and the target URL. Visit https://developers.facebook.com/docs/plugins for the Social Plugins page, where you can view any of the social plugin options listed above. For the Like button, all you need to do is provide a URL, the width of the plugin, the layout and the associated action. Once you click the “get code” button, you are given another choice; HTML5, XFBML, IFrame or URL. Each option spits out a snippet of code for you to implement. With URL you can take the link and generate your own plugin, as well.

If you’re interested in using the JavaScript SDK, you need to visit https://developers.facebook.com/docs/javascript/quickstart/v2.0. This site provides a quickstart guide for using Facebook’s SDK, enabling the enhanced Javascript features of their various plugins.

With all of these customization options, you’re bound to find one that fits your site. Once you have, it’s an easy process to implement it.