Create a Magento Extension for Facebook Like Button

Social integration on your website is impertinent given the popularity of most social networking sites in today's time and age. Integrating a like button on your store requires a few adjustments within the code. Instead of modifying the code, here you will be creating an extension for Facebook like button.

Let's take a look at the extensions config.xml

<config>
<modules>
<Example_Flike>
<version>1.0.0.0</version>
</Example_Flike>
</modules>
<frontend>
<layout>
<updates>
<Example_flike>
<file>Example/flike/flike.xml</file>
</Example_flike>
</updates>
</layout>
</frontend>
</config>

Add the code for flike.xml in the config.xml file under the theme layout folder

To maintain simplicity, it is always a good idea to stay within the scope of core blocks. Let's move onto the blocks within flike.xml that is tags.phtml, js.phtml, button.phtml

The open graph tags responsible for the product images are located in the file tags.phtml. Now extract the contents of this file and place it under the head of HTML page. Note that the image size detailed in this code confirms to that defined by Facebook.

<?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; ?>

JavaScript for the Like Button is located within the js.phtml file

<?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; ?>
The button for like is present within the file button.phtml
<?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; ?>

With these minor modifications, and adjustments within the theme folder, you have the like button located near the product name. Easy and interesting right!

Conclusion
With small and incredibly easy modifications, you can easily create an extension for Like button on your Magento store. You will need to store the original codes within the header of the theme folder. It just requires getting the correct code, and placing it along the right location. With social integration an absolute necessity, creating an extension seems a great technique.

Deepa, a technical writer with Semaphore Software (a magento development company), who now devotes her time in advising its clients to hire offshore magento developers. She offers information as well as tips and latest trends in this domain. Her love for reading helps her constantly provide latest information on different technical and design aspects of Magento

Introduction: Create a Magento Extension for Facebook Like Button