MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Create a Magento Extension for Facebook Like Button

Published on 15 May 15
788
0
2
Create a Magento Extension for Facebook Like Button - Image 1
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

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

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.











































































Create a Magento Extension for Facebook Like Button - Image 1

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

1.0.0.0

Example/flike/flike.xml

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.

This blog is listed under Development & Implementations and E-Commerce Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top