Contact
Site: US UK AU |
Nexcess Blog

Add Facebook Like Button to Magento Product View

August 14, 2011 20 Comments RSS Feed

Add Facebook Like Button to Magento Product View
It seems that every site you visit has a link to share this article, page or product with your Facebook friends. This tutorial will make it easy for your customers to share your products with their Facebook friends. For this article I will use the Magento default theme as reference, you may need to adjust your code slightly if you use a custom theme.

We will simply add the Facebook like button to your product view page. With your favorite text editor, I like Notepad++ , open /app/design/frontend/base/default/template/catalog/product/view.phtml and around line 50 find the following code:

<br />
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1><br />


Place the following code on a new line below:

<br />
<div id="fb-root"></div><br />
<script src="http://connect.facebook.net/en_US/all.js#appId=181097698614858&amp;amp;xfbml=1"></script><br />
<fb:like href="<?php echo $_product->getProductUrl() ?>" send="false" show_faces="false"></fb:like><br />

That block of code should look something like this:

<br />
<div class="product-name"><br />
  <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1><br />
  <div id="fb-root"></div><br />
  <script src="http://connect.facebook.net/en_US/all.js#appId=181097698614858&amp;amp;xfbml=1"></script><br />
  <fb:like href="<?php echo $_product->getProductUrl() ?>" send="false" show_faces="false"></fb:like><br />
</div><br />

Refresh your product view page and you should see the like button. If you don’t see the change, you may need to refresh the Blocks HTML output cache in System > Cache Management.
Facebook Like Button

Yea, it’s as easy as that!

Posted in: Magento