Facebook has more than 400 million users who collectively spend the equivalent of 950,662 years on the social networking site each month, according to Facebook's own data.
These committed users share some 25 billion links, notes, photographs, and videos every month. So it is little wonder that online marketers want to tap into the Facebook community and convert those users into customers.
With this in mind, I am going to use Facebook's API to add a "like" button to the product detail pages on the Pine Theme.
For the past 19 episodes, I have been developing a Magento theme, adjusting PHTML files, writing and implementing JavaScripts, and updating style sheets. So far, I have progressed from the home page to product category pages and to product detail pages.
A Magento Theme Start to Finish, Part 20
The Magento Theme Series, To Date
- Part One: Prolegomena
- Part Two: Page Planning, Templates, & HTML 5
- Part Three: HTML Validation and "Your" Labels
- Part Four: The CSS Work Begins
- Part Five: The Home Page CSS Continues
- Part Six: Product Navigation and CSS Rounded Corners
- Part Seven: More Rounded Corners
- Part Eight: The Boring Middle
- Part Nine: A Content Slider
- Part Ten: The Home Page Home Stretch
- Part Eleven: The Footer
- Part Twelve: The Search Form
- Part 13: Turning the Page
- Part 14: Facing the Horror
- Part 15: Style and Graphics for the Category Page Sidebar
- Part 16: Category Page Image and Font
- Part 17: The Category Page Grid
- Part 18: CSS for the Product Detail Page
- Part 19: Smooth Sliding Tabs
Facebook Open Graph Protocol
Facebook Open Graph protocol is a powerful tool for integrating your projects into Facebook's social network. In fact, the protocol allows you to manage logins, display your client's Facebook stream, display user data, and more.
For the Pine Theme, I am going to be using this protocol in a fairly limited way. But I don't want you to get the idea that this is all that you can do with the Facebook API.
Add Open Graph Meta Data
The first step toward putting the Facebook "Like" button on the Pine Theme's product category pages is to update the site's meta data to include a few Facebook-specifics.
All told, I am going to add seven new meta properties to the Pine Theme. These properties will include the theme administrator's Facebook user ID (I could have used an application ID), the site's name, a page description, a page title, a content type, a thumbnail image, and a URL—all specific to Facebook Open Graph.
The new meta properties will go into head.phtml, which is located at app > design > frontend > default > pine > template > page > html where "pine" is the name of your theme. I will step through each meta property individually since many of them will need a bit of PHP to make them work on Magento's dynamic pages.
og:site_name
The first meta property tells Facebook the name of the site.
<meta property="og:site_name" content="Pine Theme"/>
og:title
I will also add a meta property for the page title. I decided to have each product detail page's Facebook title match its product title exactly.
<meta property="og:title" content="<?php echo $this->getTitle() ?>"/>
I could also have added other text to the meta property.
<meta property="og:title" content="<?php echo $this->getTitle() ?> from the Pine Theme Store"/>
og:type
The next meta property identifies the page content based on a list of available content types that Facebook has specified. For a product detail page like the one I am working on, the "product" type is the obvious choice.
<meta property="og:type" content="product"/>
og:url
This meta property will provide Facebook with a URL for a link back to the product detail page. This is important because when a Facebook user likes one of the Pine Theme's product detail pages, that page's information, including this URL, will appear in the user's Facebook stream.
<meta property="og:url" content="<?php echo Mage::helper('core/url')->getCurrentUrl() ?>"/>
Notice the syntax for the URL element, Mage::helper('core/url')->getCurrentURL().
og:image
This meta property provides Facebook with a thumbnail image to display in the user's stream. For the Pine Theme, I decided to use the product's primary product thumbnail.
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>"/>
This was actually a little tricky to pull off. First, I had to reference image.php from the Magento core and then provide the parameters needed to return the proper image URL.
og:description
Using a product's description with the og:description meta property, will pass it to Facebook so it can appear in user streams.
<meta property="og:description" content="<?php echo $this->getDescription() ?>"/>
fb:admins or fb:app_id
The final meta property is to identify either the site administrator's Facebook account or the application ID.
<meta property="fb:admins" content="ecommercedeveloper"/>
Altogether, the new meta tags should look like the following.
<!--start Facebook Open Graph Protocol-->
<meta property="og:site_name" content="Pine Theme"/>
<meta property="og:title" content="<?php echo $this->getTitle() ?>"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo Mage::helper('core/url')->getCurrentUrl() ?>"/>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>"/>
<meta property="og:description" content="<?php echo $this->getDescription() ?>"/>
<meta property="fb:admins" content="ecommercedeveloper"/>
<!--end Facebook Open Graph Protocol-->
Adding the Facebook JavaScript Library
The next step toward adding the Facebook "Like" button to a Magento theme is to include Facebook's JavaScript library. Because I want to take advantage of the Facebook content delivery network, I will add the following script at the end of footer.phtml at app > design > frontend > default > pine > template > page > html.
<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>
Add the "Like" Button to view.phtml
Next, I am going to add a single line of code to view.phtml located at app > design > frontend > default > pine > template > catalog > product.
<div class="facebook"><fb:like href="<?php echo Mage::helper('core/url')->getCurrentUrl() ?>" layout="standard" show_faces="true" action="like" /></div>
For the Pine Theme, I placed the "Like" button just below the "Quick Overview" in the main section of the page. In context, the code looks like this.
<?php if ($_product->getShortDescription()):?>
<h4 class="border-head"><?php echo $this->__('Quick Overview') ?></h4>
<div class="short-description"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
<?php endif;?>
<div class="facebook"><fb:like href="<?php echo Mage::helper('core/url')->getCurrentUrl() ?>" layout="standard" show_faces="true" action="like" /></div>
<?php echo $this->getChildHtml('other');?>
Just a Little Style
Finally, I want to add a bit of padding to the top of the div surrounding my "Like" button, so I will need to create a new style declaration at the end of boxes.css at skin > frontend > default > pine > css.
/*Facebook Like Button*/
.facebook {padding-top: 1em;}
With my "Like" button in place, I am going to bring this episode to a close. In the next episode, I will update the style for "Your Cart" in the product detail page sidebar and begin to work with product comparisons.
Resources
- Facebook Open Graph Content Types
- Magento documentation
- Magento Forum "How to dynamically get product image URL and Page Title Outside of Main Page Content"
