Posted on by Luc De Brouwer

How to add a Facebook like button to your products in Magento

Ever since Google admitted to using social network data for the calculation of their SERPs the remainder of online businesses have finally started taking social media seriously. Therefor I thought it was time to do a post on how to implement the Facebook like button in your Magento product pages, the right way.

First of all, there are two ways to implement a Facebook like button in your website. The first is through an iframe which should never have been an option. And the proper way, through XFBML. The latter forces you to add some non-validatable code to your website but it also saves the users of your Facebook like button a few clicks, and that’s what we want, ease of use for the end-user!

We start by going to the Create an App page on Facebook whilst logged in. It’s possible you’re required to validate your account before continuing. Usually this requires validating your phone number or credit card information. Continue with entering your site name, site URL and locale. From there you’ll be taken to a website with some basic implementation data. Keep this page open because you’ll need to copy your appId later on.

FTP into your Magento installation and navigate to the ‘/app/design/frontend/default/yourtheme/template/page/’ folder. In that folder you should find some .phtml files for your basic Magento webshop structure. Open them and add the following to the <html> tag.

xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"

// In my case my <html> tag looks like this now
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" lang="<?php echo $this->getLang() ?>">

This adds the necessary XML namespaces to the pages allowing Facebook to interpret additional meta-data in your product pages.

Open up ‘/app/design/frontend/default/yourtheme/template/page/html/head.phtml’ and paste the following at the bottom of the file.

<?php
	$product = Mage::registry('current_product');
	if($product){
?>
<meta property="og:title" content="<?php echo trim($product->getName()); ?>"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl();?>"/>
<meta property="og:type" content="product"/>
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image') ;?>"/>
<?php
	}
?>

These additional meta-tags allow Facebook to easily retrieve data required for posting your products through the like button to the user’s Facebook page.

The next file to edit is ‘/app/design/frontend/default/yourtheme/template/page/html/footer.phtml’. Copy the following code to the bottom of that file.

<script>
	window.fbAsyncInit = function() {
	FB.init({appId: 'yourappId', status: true, cookie: true, xfbml: true});};
	(function() {
		var e = document.createElement('script');
		e.type = 'text/javascript';
		e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
		e.async = true;
	document.getElementById('fb-root').appendChild(e);
	}());
</script>

Don’t forget to change ‘yourappId’ to your appId which you can find on the page you’ve been served after creating your app on Facebook.

The last file we have to edit is ‘/app/design/frontend/default/yourtheme/template/catalog/product/view.phtml’. Open the file and look for the location you want to place your like button. Then paste the following code:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="button_count" show_faces="false" width="450"></fb:like>

It’s possible you’ll want to have a different type of button and for this I would like to direct you to the documentation Facebook has on this.

And that’s it, go ahead and test your like button. Also be sure to check whether you’ve set up the Open Graph data correctly by checking the URL of a random product page with the Facebook URL linter.

51 Replies to “How to add a Facebook like button to your products in Magento”

      3. it seems like the line 1 – 4 in head.phtml is getting false for some reason

        I have tested it writting manual values like:

        title content = “My title”

        And when you check the url linter it shows what facebook get from reading the whole code, not that line.

          1. Hi Luc,

            Thanks for reply.

            It does come up in URL linter now, but it does not show in facebook sometimes.

            After pressing the like button it gets “liked” state, then few seconds after it gets the normal state and nothing happens in the user wall page.

            weird!!!

          2. Found it.

            “A user can not use the like button if logged in as an admin “spam reduction im sure” if you have a non admin account view your button and try to like.

            As the admin you should be able to click Admin Page and like the admin page from facebook.”

  6. Somewhat ironic, you don’t have a ‘like’ button on this page (yet). If you did, your blog users would be able to view source on this very page to see how it works in an operating page.

  9. Man, I love when a post like this answers exactly what I need to do, step by step, and worked perfectly on the first try. Thanks, buddy- saved me a lot of time!

  10. Thanks for this but I have one problem. I am using Absolute Magento template and so far all of the above steps were the same with the exception of the Head.phtml being called “header.phtml”

    Now I get to the end and in ‘/app/design/frontend/default/yourtheme/template/catalog/product/view.phtm”

    I don’t have a file called “view.phtml” I just have

    featured.phtml
    list.phtml
    new.phtml

    So what do I do now, frustrating that this is the last step… 🙁

    Many thanks,

    Juan

  11. Hi again,

    Ok I got it! It is not there, in the path that you have here. Maybe it’s this Absolute Theme but you have to go to:

    “app/design/frontend/base/default/template/catalog/product/view.phtml”

    and edit that one.

    All good.

    Great tutorial, easy to follow and works!

    Many thanks from Spain.

    Juan Miguel

    1. Glad to hear it worked for you. Although now you’ve edited a core file which will be overwritten during an update. Please copy ‘app/design/frontend/base/default/template/catalog/product/view.phtml’ to ‘app/design/frontend/default/[your theme name]/template/catalog/product/view.phtml’ to prevent this from happening!

      Cheers!

      1. everything worked like a charm! thanks!!

        however, your instructions to prevent an update from overwriting my changes were unclear to me. firstly, i do not have a file called ‘base’ inside ‘frontend’.

        also your statement, “Please copy ‘app/design/frontend/base/default/template/catalog/product/view.phtml’ to ‘app/design/frontend/default/[your theme name]/template/catalog/product/view.phtml’” doesn’t make sense to me. am i missing something here?

        thank you so much.

        j

        1. Hey Jeffrey,

          Yes, if you’re not seeing the base folder in ‘app/design/frontend’ I think you might have a broken Magento installation. It has to be in there.

          Cheers,

          L

  12. Thanks a lot for this man. Why don’t you put some ads so we can click “thank you” 🙂

    1. Hi Fabian,

      I’ve taken a quick look but I’m not detecting any code related to my post in there. Maybe you need to clear your cache to see the changes. Also there are a lot of encoded ampersands in your source codes. I’d check that too if I were you!

      Cheers,

      Luc

        1. Hi Fabian, I checked again but the code found on your page is nothing like my code listed above. Please follow these steps accurately otherwise I can’t help you debug it.

          1. Hi Fabian, you need to replace:

            <div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><like layout="button_count" show_faces="false" width="450"></like>

            With:

            <div id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="button_count" show_faces="false" width="450"></fb:like>

  14. Great tutorial, just what I needed and works like a dream. How would I get this button to show on the grid view?

    1. Nevermind, I managed the grid view, but now need to do the same on the “new products” grid, can’t seem to find the source for it. Any ideas?

  15. Hey Luc —

    GREAT post — I spent hours banging my head against the wall on this very problem. Your solution works very well.

    I have noticed strange behavior in Firefox 3.6, though: using the Like button starts an unending loop of Facebook popups after the user logs in. I had read elsewhere that using OpenGraph was the solution to this (versus using the iframe, though it seems like that iframe is created on the fly anyway using this technique).

    In the Firebug console I get two lines saying “The “fb-root” div has not been created.” (it has, it’s ordinary html in view.phtml) and that e.root is not defined. (The load command completes without error, but e itself is undefined; I’ve tried using jQuery’s getScript with the same result)

    Finally — looking at the code that grabs the script from Facebook, isn’t this cross-site-scripting? Shouldn’t you have to load this on the server-side to work, not on the client-side?

    Scott

    Any thoughts?

  16. Indeed easy to implement, thanks 🙂 . However, after having clicked the button, it doesnt turn grey or anything, to indicate that the product has already been liked. is that normal?

  17. Hi,
    thanks a lot for the post,
    I have followed all the steps mentioned, but when I share a product there’s no picture displaying and the description shown is meta description.

  20. I’m working on a site in development ( http:// siteground169.com / ~cimarron/ ) and am getting the callout image on the right rather than the product image. Any ideas?

  23. Perfect – working, also if you change language from en_US to your fb language tag.

    Great work, many thanks

Comments are closed.