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.
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.
Here is an example of that iframe code.
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fecommercedeveloper.com&layout=standard&show_faces=true&width=400&action=like&font=segoe+ui&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_nameis 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:imgagedescribes 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.
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.
