Looking to Increase Revenue From Your Website?

Schedule a FREE 30-minute power consultation now.

Magento - Add Facebook Share and Twitter Tweet Buttons

Adding a Facebook "Share" button and a Twitter "Tweet" button to your Magento pages and products is quite simple and good for adding the share buttons directly to a page or product detail page you want to share.

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

<div class="share">    
<?php if ($this->canEmailToFriend()): ?>       
<div class="email-friend"><a href="<?php echo $this->helper('catalog/product')->getEmailToFriendUrl($_product) ?>"><?php echo $this->__('Email to a Friend') ?></a></div>   
<?php endif; ?>   
<div class="tweet"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="PUT YOUR TWITTER NAME HERE">Tweet</a></div>   
<div class="fbShare"><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;" />

Be sure to change PUT YOUR TWITTER NAME HERE to the actual Twitter username your Tweet button is affiliated with. This will automatically add the #TwitterID tag to the end of the shared tweet.

Now for the CSS. Add the following code at the end of your theme's CSS file, 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;}

Be sure to download the email image I created and add it to your theme's image folder. The result should look like this:

Magento share buttons

View a Live Example

Looking to Increase Revenue From Your Website?

Schedule a FREE 30-minute power consultation now.