Ecommerce Developer
Articles » APIs & Plug-ins »

Two Easy Ways to Add the Facebook ‘Like’ Button to Product Detail Pages

April 28, 2010 •
  • PrintPrint
  • Comment15 Comments

At its 2010 f8 developers’ conference, Facebook announced changes to its Connect API that make it easier to integrate the social media platform into web development projects.

In fact, even as that announcement was being made, retailers Levi’s, Sephora, and MyDeco had already integrated “Like” buttons into product detail pages.

Screen capture from the Levi's site showing the Like button in use

Adding a Facebook “Like” button can be done either with an iframe or using the Facebook JavaScript SDK and XFBML. For most developers, either process will take less an a minute. I was able to produce the Buell motorcycle example below, including the CSS, in under three minutes, which is not quite as quick as the motorcycle itself.

Using the Facebook “Like” iframe

Facebook has a configuration tool that lets you set up the iframe. Make a couple of selections, click “Get Code,” cut and paste, and you’re done.

Image shows Facebook page that makes it easy to get the Like Button code

Here is an example of that iframe code.

  1. <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fecommercedeveloper.com&amp;layout=standard&amp;show_faces=true&amp;width=400&amp;action=like&amp;font=segoe+ui&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:400px; height:px"></iframe>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fecommercedeveloper.com&amp;layout=standard&amp;show_faces=true&amp;width=400&amp;action=like&amp;font=segoe+ui&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:400px; height:px"></iframe>

XFBML and JavaScript SDK

If you intended to integrate other Facebook API services—like login, for example—it will be better to use Facebook’s JavaScript SDK since you’ll need it to implement other features anyway.

Use the same configuration tool as with the iframe, but select the XFBML code and place it in your page template.

  1. <fb:like href="http://ecommercedeveloper.com" layout="standard" show_faces="true" width="400" action="like" font="segoe ui" colorscheme="light" />
<fb:like href="http://ecommercedeveloper.com" layout="standard" show_faces="true" width="400" action="like" font="segoe ui" colorscheme="light" />

Next, include and invoke Facebook’s JavaScript library.

  1.     <script src="http://connect.facebook.net/en_US/all.js"></script>
  2.     <script>
  3.       FB.init({
  4.         status : true, // check login status
  5.         cookie : true, // enable cookies to allow the server to access the session
  6.         xfbml  : true  // parse XFBML
  7.       });
  8.     </script>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true  // parse XFBML
      });
    </script>

You should notice that the “Like” button doesn’t require you to have an application ID, which is normally a must to initiate the Facebook API. If I had included an application ID, it would have looked something like this: appId : 'YOUR APP ID',.

Meta Data

Finally, you’ll want to include two lines of meta data in your page template.

  • <meta property="og:site_name" content="Armando's Using Facebook's JavaScript SDK Example"/> – og:site_name is pretty obvious, it passes the site name to Facebook so when “Like” is included on a wall it can attribute that “Like” properly.
  • <meta property="og:image" content="http://www.ecommercedeveloper.com/buell-product-image.jpg"/> – og:imgage describes the most representative image for the page.

Facebook offers an og:title meta tag, too, but there is no reason to use it unless you want the “Like” reference to differ from the page’s actual title.

A Quick Example

To demonstrate just how easy this is to use, I built a quick example page. I’ll provide the code below for you to peruse and use.

Screen capture of the site example built to demonstrate how easy it is to add the Facebook Like button

Detail of the Like Button on the example site

The HTML, XFBML, and JavaScript

  1. <div>
  2.     <div class="product-detail">
  3.         <h2>2010 Buell 1125CR</h2>
  4.         <p><strong>21st Century Cafe Racer</strong> Part sport bike and part street fighter, the 1125CR™ combines class-leading performance with sinister styling in Erik Buell's vision of a modern-day cafe racer. Buell forgot to de-tune this animal; it offers the same power, precision and agility of its 1125R brother. With its V-twin engine architecture, it delivers raw, one-of-a-kind sound and performance, offering customers liquid-cooling technology and proven world-class handling in an exciting and innovative package.</p>
  5.  
  6.        <img src="buell-product-image.jpg" alt="photography of the 1125CR being ridden in an urban environment" />
  7.  
  8.        
  9.  
  10.    </div><!--end product detail-->
  11.  
  12. </div><!--end wrapper-->
  13.  
  14.  
  15.  
  16.    <script src="http://connect.facebook.net/en_US/all.js"></script>
  17.    <script>
  18.      FB.init({
  19.        status : true, // check login status
  20.        cookie : true, // enable cookies to allow the server to access the session
  21.        xfbml  : true  // parse XFBML
  22.      });
  23.    </script>
<div>
    <div class="product-detail">
        <h2>2010 Buell 1125CR</h2>
        <p><strong>21st Century Cafe Racer</strong> Part sport bike and part street fighter, the 1125CR™ combines class-leading performance with sinister styling in Erik Buell's vision of a modern-day cafe racer. Buell forgot to de-tune this animal; it offers the same power, precision and agility of its 1125R brother. With its V-twin engine architecture, it delivers raw, one-of-a-kind sound and performance, offering customers liquid-cooling technology and proven world-class handling in an exciting and innovative package.</p>

        <img src="buell-product-image.jpg" alt="photography of the 1125CR being ridden in an urban environment" />

         

    </div><!--end product detail-->

</div><!--end wrapper-->



    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
      FB.init({
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true  // parse XFBML
      });
    </script>

CSS from the Example

  1. body {margin: 0; padding: 0; background: #453625; color:#453625; }
  2. #wrapper {margin: 50px auto; padding: 10px 25px; width: 910px; height: 500px; background:#E5DEAF; border: #fff solid 20px;}
  3. .product-detail h2 {color: #E82B1E; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 3em;  letter-spacing: 7px;}
  4. .product-detail p {float: left; width: 400px; font-family: GeoSlab703 Lt BT; font-size: 1.15em;}
  5. .product-detail img {float: left; margin: 10px; border: #fff solid 20px;}
  6. .product-detail iframe {position: relative; top: -50px;}
body {margin: 0; padding: 0; background: #453625; color:#453625; }
#wrapper {margin: 50px auto; padding: 10px 25px; width: 910px; height: 500px; background:#E5DEAF; border: #fff solid 20px;}
.product-detail h2 {color: #E82B1E; text-transform: uppercase; font-family: GeoSlab703 XBd BT; font-size: 3em;  letter-spacing: 7px;}
.product-detail p {float: left; width: 400px; font-family: GeoSlab703 Lt BT; font-size: 1.15em;}
.product-detail img {float: left; margin: 10px; border: #fff solid 20px;}
.product-detail iframe {position: relative; top: -50px;}

Summing Up

Adding a Facebook “Like” button to your project is very easy and quick, making it a high-gain feature that your social-media-minded clients will love.

Comments ( 15 )

Have Something To Say ?

  1. SandboxThreads April 28, 2010

    So do you manually have to code each meta tag with page name & image? Is there no way to have Facebook pull this information automatically? Maybe I’m missing something. Thanks!

  2. Armando Roggio April 28, 2010

    @SandboxThreads, I would take care of it on the server side, for example with PHP.

  3. Ty Nunez April 29, 2010

    This is a great feature and something that merchants should take advantage of. Nexternal Solutions a hosted eCommerce platform, just made this feature available to all their clients so they can just turn it on and it’s automatically on the product list and product detail pages for all their items.

  4. Bartley Wilson April 29, 2010

    We’re launching a new website called [stupidbook.net](http://stupidbook.net/) I’m fed up with LIKE DISLIKE thumbs up or thumbs down.

    As of Monday, you can go to StupidBook.net and grab a single line of html code and paste it anywhere you want. Websites, blogs, even on facebook. We don’t care.

    The button simple says: [ This is stupid ] And when you click the button, it registers the number of stupid clicks and plays a random annoying sound or farm animal.

  5. Armando Roggio April 29, 2010

    @Bartley, So the site will be ready on Monday, May 3rd?

  6. vreesh April 30, 2010

    don’t work for me, neither as iframe or xfbml. Site shows up the button, but if i click, nothing happens. What I have done wrong?

  7. Armando Roggio April 30, 2010

    @vreesh were you logged in to Facebook when you clicked?

  8. tmckinnon May 6, 2010

    I noticed the button doesn’t work if facebook can’t ping back to the url you are ‘liking’. i.e. behind firewall or test environment etc

    Secondly I can’t seem to get the Javascript version to work with IE 8. The iframe version is a pain since you have to url encode the url and parameters. Is there a workaround for IE 8 etc?

  9. dealsvista May 23, 2010

    Hi,

    In order to make full use the Facebook like button, I am trying to switching from iframe-based like button to js-based like button.

    url: http://www.dealsvista.com

    Everything works fine for a user who is logged into Facebook.

    However, for a user who is not logged into Facebook, when he clicks the like button, there is a error in the popup window.

    Could someone point me to the right direction? I am really new to Facebook api and have no idea what is going on?

    Do I have to implement connect at the same time?

    Do I have to set up the connect call back url in my apps?

  10. Keith May 28, 2010

    Question on tracking the "like" clicks. I have implemented the like "like" button via iframes similar to levis and customers have been clicking on the like button but I see no way in facebook to track who has clicked the "like" button, not even in my Facebook Insights account.

    Is there anyway to track or know who clicked the like button on the product pages?

  11. mikeatsky January 11, 2011

    We use Nitrosell, and they don’t allow custom PHP, when we used this (either method) the image it pulled was random and not always the product we had intended. We had to use a standard logo for all posts. Now we use a simple script from ‘sharethis’ and it has a neat UI and works great.

  12. ajob May 5, 2011

    How do I change the Facebook like button for different products automatically.

  13. ajob May 10, 2011

    My website I am working on
    http://palmers.etbdev.com/product/detail.php?ID=23&SID=1#

    On the products page.

    The like button shows ok for the first time.

    But when I click on the side link it does not show up. It uses json.

    These is how I used it.

    $tables .= "<script src=’http://connect.facebook.net/en_US/all.js’></script>";
    $tables .= "<script>";

    $tables .= " <div id = facebookLikeButton>";
    $tables .= "<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1′></script>";
    $tables .= ‘<fb:like href="http://palmers.etbdev.com/product/detail.php?ID=‘.$fields["ID"].’" send="false" width="20" show_faces="false" font="">’;
    $tables .= "<br/>Facebook</div>";
    $tables .= "</td></tr></table><br /> ";

    $para = array(‘header’ => $fields["NAME"], ‘image’ => "/assets/".$fields['IMAGE'], ‘description’ => $fields["DESCRIPTION"], ‘tables’ => $tables);

    // create a new instance of Services_JSON
    $json = new Services_JSON();
    $output = $json->encode($para);
    print($output);

    <script src="http://connect.facebook.net/en_US/all.js"></script&gt;
    <script>
    FB.init({
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    </script>

    I included these in the head section of my page

    Also I am trying to get different images for the like button .

    <meta property="og:site_name" content="Palmer"/>
    <meta property="og:image" content="http://palmers.etbdev.com/assets/&quot;. $sbCat['IMAGE'] />

    The pictures are not changing.

    I am trying to work on them but have not succeeded. Please help me and thank you in advance.

  14. vilok123 May 5, 2012

    Just wondering… Are the Open Graph tags mandatory?

    What happens if I just paste the IFRAME/XFBML parts into my page and skip the open graph tags completely?

    And if they are, indeed, NOT mandatory, then what are the disadvantages of leaving them out?

    Thanks in advance!

  15. David Join August 23, 2012

    Thanks, but when I add like button. It became like my home. Do you know what it is?

Developer Newsletter
View a Sample

Copyright © 2009-2013 Ecommerce Developer. All Rights Reserved.