How To Add Facebook Share and Twitter Tweet Button in Magento.?

Magento add Social Media Button : Adding a ‘Facebook Share button‘ and a ‘Twitter Tweet button’ to your Magento pages and products is simple but you have to use the precise code to get the specific result. These button allow the user to share this information on major social media sites with facebook share and Twitter tweet. You might find these button on product pages of E-Commerce websites.

• 1. You can use this code for sharing/tweeting specific CMS pages or product detail pages in Magento
• 2. This code should go inside the /app/design/frontend/default/yourtheme/template/catalog/product/view.phtml
• 3. You can put this in various locations, but I recommend sharing it directly after the product description on my product detail page

//Add following Snipped anywhere in the Site for Facebook and Twitter Button in Magento

<div>
<?php if ($this->canEmailToFriend()): ?>
<div><a href=”<?php echo $this->helper(‘catalog/product’)->getEmailToFriendUrl($_product) ?>”><?php echo $this->__(‘Email to a Friend’) ?></a></div>
<?php endif; ?>
<div><a href=”http://twitter.com/share” data-count=”none” data-via=”PUT YOUR TWITTER NAME HERE”>Tweet</a></div>
<div><script src=”http://platform.twitter.com/widgets.js” type=”text/javascript” ></script><div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=233211453363057&amp;xfbml=1″></script><fb:like href=”” send=”true” layout=”button_count” width=”250″ show_faces=”false” font=””></fb:like></div>
<br style=”clear:both;” />
</div>

//

Magento CSS fix for Facebook Share and Twitter Tweet Button

Now for the CSS styling part. Add the following code at the end of your theme’s CSS file which is most likely located in /skin/frontend/default/yourtheme/css/styles.css

.share { background: #F8F8F8; border:1px solid #CCC; padding: 8px; margin:0 0 5px 0;}
.email-friend a {display:block; margin:0 10px 0 0; float:left;clear:both;width:55px;height:20px;background:url(../images/email.png) no-repeat; font-size:0;text-decoration:none; text-indent:-9999px; }
.tweet { float: left; width: 55px; height:20px; margin-right: 10px;}
.fbShare { float: left; width: 175px; height: 20px;}