Like Button

The Like button is the quickest way for people to share content with their friends.
A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.
URL to Like
Width
Layout
Action Type

Settings

In addition to the settings above, you can also change the following:
SettingHTML5 AttributeDescriptionDefault
actiondata-actionThe verb to display on the button. Can be either "like" or "recommend""like"
colorschemedata-colorschemeThe color scheme used by the plugin. Can be "light" or "dark"."light"
hrefdata-hrefThe absolute URL of the page that will be liked.XFBML and HTML5 versions default to the current URL.
kid_directed_sitedata-kid-directed-siteIf your web site or online service, or a portion of your service, is directed to children under 13 you must enable this"false"
layoutdata-layoutSelects one of the different layouts that are available for the plugin. Can be one of "standard", "button_count", or "box_count". See the FAQ for more details."standard"
refdata-refA 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.None
sharedata-shareSpecifies whether to include a share button beside the Like button. This only works with the XFBML version."false"
show_facesdata-show-facesSpecifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites."false"
widthdata-widthThe width of the plugin. The layout you choose affects the minimum and default widths you can use, pleasesee the FAQ below for more details.Depends on layout

FAQ

Why are people seeing a 'Confirm' button when they click on my Like button?

There are integrity and spam-prevention safeguards built into social plugins, and this is one of them. If you have been heavily testing a Like button before launching, you may have inadvertently triggered these safeguards. Additionally certain domains on the internet are more likely to contain spam, so will see the confirm step more often.
This confirmation adds one extra step to the Like button process, but once the like has been confirmed separately by a number of users, it will no longer appear, and the regular Like button will only appear.

Should I display the Like button by itself or the Like and Share buttons together?

We recommend that you include both buttons on your website to let people choose the way that they want to share your content.

How do I display the Share button without the Like button?

To get code to display the Share button by itself, please visit our Share button documentation.

How do I optimize my website for sharing using the Like button?

If you plan to use the Like button on your website, you should read our best practices guide to ensure published stories look great on Facebook and get the best possible distribution.

What makes up the number shown next to my Like button?

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

What are the different layout types?

There are three options:
LayoutDefault Sizes
standardMinimum 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).
box_countMinimum width: 55 pixels.
Default width: 55 pixels.
Height: 65 pixels.
button_countMinimum width: 90 pixels.
Default width: 90 pixels.
Height: 20 pixels.

How do I know when someone clicked on a Like button on my site?

The XFBML and HTML5 versions of the button allow you to subscribe to the 'edge.create' event in the Facebook SDK for JavaScript through FB.Event.subscribe. This JavaScript event will fire any time a button is clicked.

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

If you are using the XFBML and HTML5 versions 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.

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

If the Like button is placed near the edge of an HTML element with the CSS overflow property set tohidden, 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 visiblescroll, orauto.

What analytics are available about the Like button?

If you visit Facebook 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.

How can I track referrals from a Like Button?

The ref setting 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.
For example:
http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline
You can track these parameters using your analytics software.

Can I link the Like button to my Facebook page?

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

Why and when does Facebook scrape my page?

Facebook needs to scrape your page to know how to display it around the site. This happens every 24 hours to ensure the properties are up to date. The page is also scraped when the URL is entered into the Debugger Tool.
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.
In some cases you may want to serve a different version of a page to our scraper (containing more Open Graph metadata) than you do to people who are viewing the page. In this case you can target the browser agent used by the scraper: