Magento themes and extensions

How to add Facebook and Twitter buttons into Magento site

Share

Social network is becoming very popular these days. Almost web-store owners want to integrate great features from Facebook, Twitter… into their websites. Indeed, it’s a very nice way to advertise and promote products, and Magestore does not stay out of the trend. Browse our site and you will see that we have Send, Like button for Facebook fan page, Twitter share for Twitter in all product pages. If you are also interested, follow my article ;)

Well, there is no magic here. It’s really simple. Facebook and Twitter already provide you all tools to create these buttons. I will show you how to add these buttons for different product pages.

Facebook Send and Like button

Here is what you need to generate Facebook Send & Like button code:

https://developers.facebook.com/docs/plugins/

Using this plugin, you will be able to get the following code:

* Send button:

<fb:send href="PAGE_URL" font=""></fb:send>

* Like button:

<script src="http://connect. facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="PAGE_URL" layout="button_count" show_faces="false" width="110" font=""></fb:like>

Of course, you can get different codes for different styles and button types.

Tweet Button

You should get Tweet button at this URL: http://twitter.com/about/resources/tweetbutton

You will get the following code:

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

OK, now you have enough source code to use. The file you need to edit is app/design/frontend/[DESIGN_PACKAGE]/[THEME]/template/catalog/product/view.phtml

Now, add all the above codes to the position where you want it to be. We usually add it below product names, so you can find and add them below these lines:

<div>
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>

It’s not done yet. You need to change TWITTER_ACCOUNT by your twitter user name. And change PAGE_URL by the product URL. You should get it by this code:

<?php echo $_product->getProductUrl() ?>

Now, we are done. Refresh the product page to see amazing features just added.

Good luck!!!

Leave a Reply

You must be logged in to post a comment.