Add Facebook Like Button to Magento Product View

Posted on August 14, 2011 by Will

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:

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


Place the following code on a new line below:

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

That block of code should look something like this:

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

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!

This entry was posted in Magento and tagged , , , , . Bookmark the permalink.
  • http://herominis.com Matt Griffith

    Worked well, just wish you could pick which image it shares for the link. I would also suggest making the change in a copy of the view.phtml in you app/design/frontend/default/_your_theme_here_/template/catalog/product otherwise you will have to add this again after any upgrades.

  • http://www.facebook.com/bradslk Lee Bradshaw

    I tried adding your code at the bottom of head.phtml, but I still get a picture of a different product on the Facebook page.

  • http://herominis.com Matt Griffith

    I am on 1.5.1.0, so if you are on an older version that might not work for you.

    Otherwise, just make sure you replace all the ~ & gt; and & lt; (in the code the gt and lt do not have a space due to this system replacing them with actual characters).

  • http://www.facebook.com/bradslk Lee Bradshaw

    Curious. I did it all again and this time it worked. Thanks.

  • http://www.facebook.com/people/Alex-Milne/653685010 Alex Milne

    Great Coding!
    Took me a while to figure out that you meant remove the ~ and not the – sign!
    If i wanted to move this code below a description and not the name how would i do that?

  • Andres Castro

    thanks for the post, i need to do the 2 things you suggest?:
    I would suggest making the change in a copy of the view.phtml in you app/design/frontend/default/_your_theme_here_/template/catalog/product otherwise you will have to add this again after any upgrades.

    If you want the image that shows up to be your main product image, copy your /app/design/frontend/base/default/template/page/html/head.phtml to /app/design/frontend/default/_your_theme_here_/template/page/html/head.phtml and add the following three lines:

  • http://www.facebook.com/people/Sara-Williams/100000933086166 Sara Williams

    Sweet! You’re an ISIS fan!

    Sorry, I had nothing else to contribute, but thanks very much for the article. ;)

  • http://www.nexcess.net/ Will

    Yes I am, I have most everything on vinyl. Glad you found the article helpful.

  • Anonymous

    I use this code in /app/design/frontend/default/hellowired/template/catalog/product/view.phtml, I cleared all cache and refreshed the product page (http://www.dekorudvar.hu/index.php/festmeny/lakasdekoracios-olajfestmeny/alma-csendelet)and my like button is invisible, but it works fine. What is the problem? I saw the source code.Is my problem in the .css file? Please help me! I’m a beginner in Magento.

  • Anonymous

    Hello Gabiszil -

    There is a bit of code in your CSS that is not allowing it to show. Open up /skin/frontend/default/hellowired/css/styles.css and search for
    iframe {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
    }

    Remove the line opacity: 0; save and you should be all set.

    - Will

  • Anonymous

    Thank you!!! You saved my life!!! I spent 2 days with searching the problem. The .css problem was caused by an extension wich used the iframe style in the .css. My like button works perfect now:)

  • http://www.facebook.com/people/Cristian-Weiser/1117520557 Cristian Weiser

    How can i translate the phrase there? I need it in pt-br

  • http://www.facebook.com/people/Cristian-Weiser/1117520557 Cristian Weiser

    My code was showing good, not i have installed some other modules at magento connect and it is not showing anymore. Can someone helps?

  • http://www.facebook.com/people/Cristian-Weiser/1117520557 Cristian Weiser

    To translate to your language, just change en_US to pt_BR or whatever do you want to

  • http://www.facebook.com/apereira10 Alex Pereira

    The icon ovelaps a bit of the email below how can i space it out

  • will_hough

    Yes I am :)

  • will_hough

    I added everything in a .facebook class div and added a margin-bottom:4px; to the container.

  • MK

    Doesn’t work anymore on my page