Create a Magento Extension for Facebook Like Button
Published on 15 May 15
Semaphore0
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
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>
<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
<layout version="0.1.0">
<catalog_product_view>
<reference name="head">
<block type="core/template" name="Example_flike_tags" template="Example/flike/tags.phtml" before="-" />
</reference>
<reference name="after_body_start">
<block type="core/template" name="Example_flike_js" template="Example/flike/js.phtml" before="-" />
</reference>
<reference name="alert.urls">
<block type="core/template" name="Example_flike_button" template="Example/flike/button.phtml" before="-" />
</reference>
</catalog_product_view>
</layout>
<catalog_product_view>
<reference name="head">
<block type="core/template" name="Example_flike_tags" template="Example/flike/tags.phtml" before="-" />
</reference>
<reference name="after_body_start">
<block type="core/template" name="Example_flike_js" template="Example/flike/js.phtml" before="-" />
</reference>
<reference name="alert.urls">
<block type="core/template" name="Example_flike_button" template="Example/flike/button.phtml" before="-" />
</reference>
</catalog_product_view>
</layout>
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; ?>
<?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; ?>
<?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; ?>
<?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.
This blog is listed under
Development & Implementations
and E-Commerce
Community
Related Posts:
Post a Comment
