How to add Facebook Like button to page in Magento

By Wolf | 30.09.2010

Social networks nowadays become powerful tool for promoting web shops. Millions of users spend enormous amount of time in Facebook, Myspace and other social networks. That’s why we should take advantage of using Facebook Like button in our Magento based shop. I will show you how to add it on product view page.

1. Go to http://developers.facebook.com/docs/reference/plugins/like and generate code for the button. We should get something like that:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

2. Create CMS block in Admin Panel and name it "Facebook button" with ID "facebook". In field "Content" add code you have got in the previous step.

3. Define block in catalog.xml 

<catalog_product_view>
	 <reference name="content">
            <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
				...
				<!-- Add CMS block -->
				<block type="cms/block" name="facebook">
					<action method="setBlockId"><block_id>facebook</block_id></action>
				</block>
				<!-- Add CMS block -->
				...
			</block>
	 </reference>
</catalog_product_view>

4. Go to app/design/frontend/your_package/your_theme/template/catalog/product/view.phtml and call block in proper place.

<!-- Facebook button block -->
<?php echo $this->getChildHtml('facebook') ?>
<!-- Facebook button block -->

5. Clear cache if it isn't disabled.

Of course we can simply hardcode this Facebook button code in our view.phtml, but creating CMS block for this will significantly increase comfort usage of this feature. Now not only developers but shop owners too will be able easily disable/enable Like button in Admin Panel.

Hope this will be useful.

Regards, Wolf

 

  Share  Tweet

Posted in: Magento | Tags: magento, facebook, how-to, tutorial

<< Back

6 answers

1. 

   Adam Moss 05.11.2010

   Nice post - social bookmarking for products has indeed become a very powerful SEO tool.
2. 

   server support company nyc 25.03.2011

   Oh this is what I am looking. The exact code thanks. I'll try this one. hope this will work.
3. 

   affordable websites 27.07.2011

   Hi
   Where do i place my facebook code on the view.phtml page?
   its not working on my site :(
4. 

   Wolf 30.08.2011

   @affordable websites you place your code in CMS block - not in view.phtml
   As this article is a bit old now - I suggest you to create Fan page for your shop and simply add its Like button code in view.phtml
5. 

   מתנות לגבר 14.09.2011

   wolf - your last remark to @affordable websites is totally not clear... should we add it to cms block or view file?
6. 

   xkenshin 03.10.2011

   If you hardcode those facebook like
   ""
   into the blocks it would actually 'like' the same page right? Those url have to be unique for each of the product page.
   Even with this block creating, i couldn't save those iframe code in the content. Tried with html view also did not work. Anybody got suggestion?