DocsToolsSupportNewsApps

Like Button

The Like button is a simple plugin that lets people quickly share content on Facebook.

Clicking a Like button on a site creates a connection in the graph between the content and the person who clicks the button. Clicking the Like button also publishes an Open Graph Like action, and displays stories on that person's timeline and their friends' News Feeds. This story will link back to the site and drive distribution of content.

The story created by the Like action can be enriched by using meta tags to turn a simple HTML page into an Open Graph object. If you plan to use the Like button on any page on your website, you should follow the guide to including meta tags to ensure published stories look great in timeline and News Feed and get the best possible distribution. Also read our best practices document on maximizing distribution for hints on how to improve interactions between your content and Facebook.

The Like button itself displays a count of all the likes and shares of the content and a few other metrics listed in the Frequently Asked Questions, below. An option to comment on the story appears when the Like button is clicked, if it is configured correctly. If someone comments after clicking Like, that gives the published story prominence in News Feed.

You can use the configurator below to customize the layout and style of Like buttons and implement the plugin in minutes.

Important: If you implemented the Like button before November 7, 2012, read this notice.

  • On November 7, 2012, we updated how the Like button functions with respect to content restrictions, publishing updates and integration with the built-in like action.

  • If you implemented Like buttons before this update, read Like Button Migration since your implementation may require changes to continue working.

  • After July 2013 migration, the Like button required an absolute URL in the href parameter.

Get the code

There are three ways to implement the Like button: using HTML5, XFBML (a special Facebook markup) and iframe.

HTML5 and XFBML versions are more versatile but require use of the JavaScript SDK (snippets to use this are included in the configurator. These versions do the following:

  • Resize height according to whether there are profile pictures to display
  • Let your app use the JavaScript SDK to listen for edge.create events so that it knows in real time when someone clicks the Like button
  • Enable the comment box that appears after clicking the Like button.

Configurator

To get started, enter details for your implementation of the Like button here and then click Get Code. You can copy the snipped it generates and paste it into your HTML.

(?)
Send Button (XFBML Only) (?)
(?)
(?)
Show Faces (?)
(?)
(?)
(?)
Get Code

Attributes

  • href - the URL to like. The XFBML version defaults to the current page. Note: After July 2013 migration, href should be an absolute URL
  • send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
  • layout - there are three options.
    • standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Minimum increases by 40px if action is 'recommend' by and increases by 60px if send is 'true'. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
    • button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
    • box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
  • show_faces - specifies whether to display profile photos below the button (standard layout only)
  • width - the width of the Like button.
  • action - the verb to display on the button. Options: 'like', 'recommend'
  • font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • colorscheme - the color scheme for the like button. Options: 'light', 'dark'
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a person clicks a link from a stream story about a Like action:
    • fb_ref - the ref parameter
    • fb_source - the stream type ('home', 'profile', 'search', 'ticker', 'tickerdialog' or 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.

FAQ

How do I know when a person clicks a Like button?

If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.

When will people have the option to add a comment to the like?

If you are using the XFBML version of the Like button, people will always have the option to add a comment. If you are using the iframe version of the button, people have the option to comment if you are using the standard layout. If people do add a comment, the story published back to Facebook is given more prominence.

What analytics are available about the Like button?

If you visit facebook.com/insights and register your domain, you can see the number of likes on your domain each day and the demographics of who is clicking the Like button.

Can I link the Like button to my Facebook page?

Yes. Simply specify the URL of your Facebook page in the href parameter of the button.

What is the best way to know which Like button on my page generated the traffic?

Add the 'ref' parameter to the plugin (see "Attributes" above).

Examples:

<fb:like ref="top_left"></fb:like>
<iframe src="...&ref=top_left"></iframe>

When a person clicks a link back to your website, we will pass back both the ref value as a fb_ref parameter and the fb_source parameter in the referrer URL. Example:

http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline

Aggregated stream stories contain all ref parameters, concatenated with commas.

When does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around the site.

Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Debugger. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.

The agent of the scraper is: "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)"

How do I display the Like button in different languages?

If you are using the XFBML version include the language code when you instantiate the library. Replace ‘en_US’ in this line with the correct locale code:

'//connect.facebook.net/en_US/all.js';

If you are using the iframe version include a locale parameter with the proper country code in the src URL. Example:

src="http://www.facebook.com/plugins/like.php?locale=fr_FR&..."

You may need to adjust the width of the Like button to accommodate different languages.

What makes up the number shown on my Like button?

The number shown is the sum of:

  • The number of likes of this URL
  • The number of shares of this URL (this includes copy/pasting a link back to Facebook)
  • The number of likes and comments on stories on Facebook about this URL

When I click the Like button, the popup window (or "flyout") doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.

Updated on Monday
Facebook © 2013 · English (US)
AboutAdvertisingCareersPlatform PoliciesPrivacy Policy