Facebook Like Button on the Product Page
Hi,
[Megento Version: 1.4.1.1]
We’re going to add today the Facebook Like Button you’ve see everywhere on the Magento Product page. We’ll start by adding the Open Graph Meta Tags required by Facebook Like button to the head template.
/app/frontend/default/default/template/page/html/head.phtml
<?php if (Mage::registry('current_product')) { ?>
<!--start Facebook Open Graph Protocol-->
<meta property="og:site_name" content="Your Site Name" />
<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="your_profile_id_here" />
<!--end Facebook Open Graph Protocol-->
<?php } ?>
We also need to include the Facebook javascript SDK for this to work and parse the XFBML tag (Facebook basically replace the <fb:like>آ tag with an iFrame on pageload )
<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 XFBM
});
</script>
We can put the script to either footer.phtml or head.phtml. Performance-wise, it’s recommend to put it just before the body closing tag, i.e. in footer.phtml, however IE8 didn’t seem to honor this preference and we had to use the head.html file to make it work on IE.
The last step is to add the like button itself on the product page:
/app/frontend/default/default/template/catalog/product/view.phtml
<!-- Facebook Like Button - Start-->
<div class="facebook">
<fb:like href="<?php echo Mage::helper('core/url')->getCurrentUrl() ?>" layout="standard" show_faces="true" action="like" />
</div>
<!-- Facebook Like Button - End -->
We can put this anywhere we like the facebook button to appear on the page, we placed it just below the short description. You can also customize with different attribute, refer to the Facebook Like Button page for more details.
That should be it, hope that helped.