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:

<config>
    <modules>
        <Inchoo_Flike>
            <version>1.0.0.0</version>
        </Inchoo_Flike>
    </modules>
    <frontend>
        <layout>
            <updates>
                <inchoo_flike>
                    <file>inchoo/flike/flike.xml</file>
                </inchoo_flike>
            </updates>
        </layout>        
    </frontend>
</config>

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">
    <catalog_product_view>
        <reference name="head">
            <block type="core/template" name="inchoo_flike_tags" template="inchoo/flike/tags.phtml" before="-" />
        </reference>        
        <reference name="after_body_start">
            <block type="core/template" name="inchoo_flike_js" template="inchoo/flike/js.phtml" before="-" />            
        </reference>
        <reference name="alert.urls">
            <block type="core/template" name="inchoo_flike_button" template="inchoo/flike/button.phtml" before="-" />
        </reference>
    </catalog_product_view>
</layout>

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); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  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.
Cheers.