Ecommerce Developer
 
 

APIs & Plug-ins

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

By Armando Roggio on April 28, 2010 · with 13 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.

<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.

<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.

    <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

<!doctype html>
<html lang="en">
<head>
<title>Using Facebook's JavaScript SDK Example</title>
<meta property="og:site_name" content="Armando's Using Facebook's JavaScript SDK Example"/>
<meta property="og:image" content="http://www.ecommercedeveloper.com/buell-product-image.jpg"/>

<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


<div id="wrapper">
	<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" />
		
		<fb:like href="http://ecommercedeveloper.com" layout="standard" show_faces="true" width="400" action="like" font="segoe ui" colorscheme="light" /> 
	
	</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>
</body>
</html>

CSS from the Example

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.

13 Comments

Rss-sm