Building a “Facebook Like” button extension for Magento in 15 minutes

Building a “Facebook Like” button extension for Magento in 15 minutes

Facebook LIKE button is pretty easy and straight forward to implement. All you need to do is to copy paste 2-3 sections from Facebook developer site adjust them to your needs and you are done.

Since we will be coding this for Magento, why not make it an extension, Inchoo_Flike. Imagine I’m working under the budget and my time is limited, I’ll do my best to code is as fast as I can, but still keeping the “Magento way of things” in mind. With that in mind, here is the content of my extensions config.xml:


As implied within the above’s config I need to add the inchoo/flike/flike.xml under the default theme layout folder. Here is the content of flike.xml file:

<layout version="0.1.0">
        <reference name="head">
            <block type="core/template" name="inchoo_flike_tags" template="inchoo/flike/tags.phtml" before="-" />
        <reference name="after_body_start">
            <block type="core/template" name="inchoo_flike_js" template="inchoo/flike/js.phtml" before="-" />            
        <reference name="alert.urls">
            <block type="core/template" name="inchoo_flike_button" template="inchoo/flike/button.phtml" before="-" />

For sake of simplicity and budget restriction, I decided to stay within the frames of “core/template” blocks. I can spare a minute or two on this one :). Now we move on to the files mentioned in the flike.xml file: tags.phtml, js.phtml, button.phtml.

File tags.phtml contains the “Open Graph Tags”, as we want to have the correct product image, description, etc. when we LIKE our product. Since this stuff needs to go under the “head” of HTML page, I injected it under the head block. Here is the content of tags.phtml:

<?php $_product = Mage::registry('current_product') ?>
<?php if ($_product && $_product->getId()): ?>
<meta property="og:title" content="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
<meta property="og:type" content="product" />
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(130, 110); ?>" />
<meta property="og:url" content="<?php echo $_product->getProductUrl() ?>" />
<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName() ?>" />
<?php endif; ?>

Notice the detail around the image size. This conforms to the official Facebook definition of og:image tag: The og:image is the URL to the image that appears in the Feed story. The thumbnail’s width AND height must be at least 50 pixels, and cannot exceed 130×110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126×39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.

File js.phtml containes the JavaScript code that goes along with LIKE button:

<?php $_product = Mage::registry('current_product') ?>
<?php if ($_product && $_product->getId()): ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); = id;
  js.src = "//";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<?php endif; ?>

And finally, file button.phtml contains the actual button:

<?php $_product = Mage::registry('current_product') ?>
<?php if ($_product && $_product->getId()): ?>
<div class="fb-like" data-href="<?php echo $_product->getProductUrl() ?>" data-send="true" data-width="450" data-show-faces="true"></div>
<?php endif; ?>

And that’s it. If you did not do any heavy modifications around your custom theme, more precisely the product view page by removing the “alert.urls” block, then you should be able to see Facebook LIKE button there, right near the product name.

Surely there is room for improvement to this little extension. Consider it only as a quick example.

You made it all the way down here so you must have enjoyed this post! You may also like:

Social Connect Magento extension Marko Martinovic
Marko Martinovic, | 399

Social Connect Magento extension

Google Connect Magento extension Marko Martinovic
Marko Martinovic, | 60

Google Connect Magento extension

Simple social sharing buttons in Magento Srdjan Stojiljkovic
Srdjan Stojiljkovic, | 51

Simple social sharing buttons in Magento


  1. Hello Branko Ajzele,

    It is very good extension, well I need your help in button.phtml you pass data-href but i also need to pass product name and product small image than how can i pass it.


  2. Need some newb help here, I’m not having any luck, presumably because I’m not sure exactly where these files go in the structure. Can you please give me a quick structure outline of where to put them?

  3. @Branko Thanks for the article 🙂

    Regarding the “room for improvement” … may be we can add product description:

    <meta property="og:description" content="Product ..." />

    Thanks for the note about image size, that was something that I missed while was reading the Facebook developers page.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.