How to Add a Facebook Like Button to Site

2 August 2011

Facebook Like buttons, their types and how to make them look good on your website. All main features and attributes with buttons examples.

The Like button allows users to share content of your web-sites with their friends in Facebook network. Clicking on “Like” button on web-site user adds its link to News Feed, where it can be browsed by friends.

More information about web development and integration with Facebook in our post:

Facebook allows two ways of connecting Like button to your web-site: via XFBML-tag fb:like or with HTML-tag iframe. XFBML version is more universal and allows user to add comments, but requires usage of JavaScript SDK.

To receive button code click on the link, fill in all fields with appropriate parameters and generate the code. You can choose between iframe and XFBML versions.

Attributes

  • href – URL to the web-page to like. It’s not necessary for XFBML-version.
  • layout– type of button. There are 3 options:
    • standard – shows total amount of users and friends who clicked the button on the right;
    • button_count – shows total amount of users who clicked the button on the right;
    • box_count – shows total amount of users who clicked the button on the top.
  • show_faces – assigns whether to show photos from profile under the button (only for standard layout).
  • width – specifies width of the button
  • action – describes verb to display on the button. You can choose between Like and Recommended.
  • font – font type used in the button. Available options are ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’.
  • colorscheme – the color scheme for the Like button. Options: ‘light’ and ‘dark’.

Facebook Like button: button types

If you use XFBML-button, users will be always able to add comments. If you use iframe-button, users will be able to add comments only in standard layout and with button width less than 400 pixels. Note, label with user’s comments looks better and can attract more attention.

It’s easy to localize button’s label. If you use XFBML-version, change ‘en_US’ in the string to the local code you need. For example, let’s localize to French. Just change ‘en_US’ to the ‘fr_FR’:

before <script src="//connect.facebook.net/en_US/all.js ...

after <script src="//connect.facebook.net/fr_FR/all.js ...

Facebook Like button: button localization

To localize iframe-version of the button, add parameter ‘locale= fr_FR’ to URL of SRC:

<iframe src="//www.facebook.com/plugins/like.php? locale= fr_FR& ...

To find out that user clicked on the button on XFBML-version, you may subscribe to the ‘edge.create’ event through FB.Event.subscribe.

Using Open Graph Tags

Open Graph tags are meta-tags you can add to the <head> part of your web-site for the additional description of Like-button. User and his friends could receive more relevant information about what he liked. Open Graph tags look as follows:

<meta property="og:TAG_NAME" content="VALUE"/>

If you have decided to use Open Graph tags, you should add six required tags:

  • og:title – title of the object you add
  • og:type – object type. You can choose from the following list.
  • og:image – image’s URL that represents object. Image should be at least 50×50 pixels.
  • og:url – constant URL of web-page containing object .
  • og:site_name – name of the web-site
  • fb:admins –  a comma-separated list of administrators of this page
  • fb:app_id – identifier of your application.

“Share” button

Share button is a predecessor of Like button, but it’s used quite often as well. Its main feature is the ability to leave a reference to the web-site you licked with picture, description and your comment on your wall. To add it to your web-page is very simple – just add the code to the proper place:

<a name = "fb_share"></a>
<script src="//static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

There are four button types with different sizes:

  • box_count – displays total number of likes above the button
  • button_count – displays total number of likes on the right from the button
  • button – usual button with label
  • icon_link – small icon with text reference on the right
  • icon – small icon without text

To use them, add parameter type=”BUTTON_TYPE” to the <A> tag.

Facebook Like button: button size

If you want to share web-page different from the web-page with your button, you can add parameter share_url="web-site_URL".

To change label on the Share button, to localize for example, you should just add the text you want to the <A> tag:

<a share_url="http://google.com">Not default label</a>

Facebook Like button: custom label

When button pressed user will see a dialog frame with prompt to publish reference to the web-site on his Facebook wall and field with comment he can add.

Facebook Like button: sharing link

After sharing the reference to the web-site will be displayed on the user’s Facebook wall.

Facebook Like button: link shared

Using this short tutorial you will be able to add any Facebook Like button you want without problems. If you have questions, write them below and we will answer them.

About the authors:
PHP Development Department at NIX Solutions.
Want to see what we do? That is easy in our PHP Web Development Portfolio.

Leave a Comment

Your email address will not be published. Required fields are marked *