Monday 25 April 2011

Magento: How to place Facebook Like and Twitter Buttons in the products view page

In Today's Era it is really essential that you are very much in touch with Social media like Facebook and Twitter. Nowadays every client ask for this Social media buttons on his e-commerce site this is creates some problem with my magento friend so this post if for all My Magento Developers

Instructions:
  1. Open file to \app\design\frontend\default\default\template\catalog\product\view.phtml
  2. Copy the codes of the button that suite your magento store design and paste them exactly where you need to appear the button in the frontend
  3. Save the file and refresh the page

Facebook Like Button:
Add the following codes to display the facebook like button in the products view page.
  1. Standrad Button

    Using XFBML

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo $currentUrl ?>" show_faces="false" width="450" font=""></fb:like>


    Using iframe

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
     
  2. Minimal with count – Horizontal


    Using XFBML

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl();  ?>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="<?php echo $currentUrl ?>" layout="button_count" show_faces="true" width="450" font=""></fb:like>


    Using iframe

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
  3. Minimal with count – Vertical


    Using XFBML

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl();  ?>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="=<?php echo $currentUrl ?>" layout="box_count" show_faces="true" width="450" font=""></fb:like>


    Using iframe

    <?php $currentUrl = $this->helper('core/url')->getCurrentUrl(); ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $currentUrl ?>&amp;layout=box_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>


Twitter Button:
The twitter buttons are very simple and takes the current pages url automatically. i.e. it doesnot need any php codes for its working. Placing the javascript codes at the correct location will make the button load in the next page refresh.
  1. Vertical

     
    <a href="http://twitter.com/share" data-count="vertical">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

  2. Horizontal

     
    <a href="http://twitter.com/share" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
  3. No Count

     
    <a href="http://twitter.com/share" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
Main Source

    0 comments:

    Post a Comment