The past decade has witnessed an immense growth in the social media popularity. The best thing happened when social media started helping businesses to establish a solid web presence, generate strong leads, and increase website traffic through an effective marketing strategy.
With social media today you can reach to your first-time visitors as well as the repeat customers in multiple ways and showcase the best your business has to offer. A well developed and organized social networking strategy is very crucial when you depend on social media for marketing, lead generation and much more.
Different forms of social media engagement provide multiple ways to improve the user experience and brand image of your business. Features like social login, Facebook login, click to tweet, share on Facebook, follow on Twitter are some examples of how social media can be integrated on your site itself.
Today we are going to discuss on such integration that you can do on your Magento store- how to add the Facebook’s “Like button” and Twitter’s “Follow button” on your Magento store? This addition will help you to improve the social media visibility of your Magento pages by allowing users to Like or Follow your brand.
Get Facebook Like button code
Let’s start with Facebook like button then we will add the Twitter “Follow” button. So, for adding the Facebook Like button first visit the Facebook’s developer site and navigate to the following URL.
https://developers.facebook.com/docs/plugins/like-button
You will find the following form asking some details to be filled in.
- Enter your website page URL or your Facebook social page’s URL in the “URL to Like Section”
- Enter the width of the button that you wish.
- Select the button layout and hit the Get Code button below.
If you also want to show the Facebook “Share” button by the side of Like button, you can check the check-box that says “include Share Button”. Keep the code screen as it is, and proceed to the next step.
Get the Twitter Follow button code
To get the Twitter’s Share button code you need to first visit the following Twitter URL.
You will see the following page:
Here, enter your Twitter page URL and follow the on-screen instructions to get the Share button code.
Scroll down to find the following interface and click as shown in the image below:
Next, you will see a pop-up. Here you need to click on the “Follow Button” option as shown in the image below:
The next interface will ask you to enter either your Twitter Page URL or your Twitter Username. Enter anyone and click Preview. You will get the code.
Add social buttons to your Magento store
Now we have the Facebook Like button and Twitter Share button code. I am going to add these social buttons on my Magento Product Page. So I need to edit the following file from website’s FTP.
MAGENTO_ROOT/app/design/frontend/[DESIGN_PACKAGE]/[THEME]/template/catalog/product/view.phtml
Open the view.phtml file in any of the editors you like to use. I am using Netbeans. You can use any text editor like notepad, Notepad++, etc.
You have the option to add these social buttons on any position on the page. However, I have chosen the space below the Product title on the page.
So, to add the social buttons on the space below the Product name on your Magento page, search for the following code in the view.phtml file.
<div class="product-name">
<span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
</div>
<div class="price-info">
<?php echo $this->getPriceHtml($_product); ?>
<?php echo $this->getChildHtml('bundle_prices') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
After this code, add a new <div> with class=”social-info”. Inside this new <div>, add the codes that you have got from Facebook and Twitter respectively. The code would look something like this:
<div class="product-name">
<span class="h1"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></span>
</div>
<div class="price-info">
<?php echo $this->getPriceHtml($_product); ?>
<?php echo $this->getChildHtml('bundle_prices') ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
<!-- Social Buttons -->
<div class=”social-info”>
<!-- Code for Twitter Follow button -->
<a href="https://twitter.com/knowbandplugin" class="twitter-follow-button" data-show-count="false">Follow @knowbandplugin</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Code for Facebook Like button -->
<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_GB/sdk.js#xfbml=1&version=v2.9"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/Knowband/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> </div>
When done with the code addition, Save the file. Clear the Cache Magento cache and navigate to your product page to see if you are successful in adding the social buttons to your Magento store. It would look something like this if added correctly:
To conclude
Social media has become an inseparable organ of the businesses thriving because of it. Whether it is through social login plugins, Social advertisement, or social sharing, social media is helping businesses in uncountable ways. Which kind of social media options do you use in your business? Do let us know in the comments.
Want to learn more? Read our posts on:
How to start a PrestaShop Twitter login on your PrestaShop store?
Setting up the Google Login for PrestaShop sites
You Might Also Like:
