Magento Tutorials

How To Add Social Buttons In Magento Site

Social networking has become very popular since the past decade. It helps businesses to establish a stronger web presence, generate an unlimited number of leads and increase traffic with effective execution of marketing plans. For ecommerce businesses, effective social marketing is the key to success. Social networking sites offer new and different ways to reach your first-time visitors, loyal customers, engage returning customers, reward existing customers, and showcase the best your business has to offer.

A well organized social networking strategy is essential for improving the growth of an ecommerce business. Social networking continues to gain popularity owing to its commercial success around the globe. Your social networking profiles, pages and the content you share should be as vital as the frontend of your store that displays each and everything about your business in a single look. Indeed, social marketing is a nice way to promote and advertise your business, and we don’t want you to stay out of the trend. That is why today we are going to discuss how you can add social buttons to your Magento site.

There is no rocket science here. It is very simple, and all you need is to have a bit of knowledge about Magento and its code structure. Facebook and Twitter provide you built-in tools to create these buttons for your Magento site. I will show you how to add Social Buttons in Magento product pages.

Add Social Buttons Into Magento

First of all, let’s start with generating Facebook “like” button and Twitter “follow” button. For the Facebook like button, go to the link below:

https://developers.facebook.com/docs/plugins/like-button

Facebook Like

Enter your Facebook social page URL, select Layout & Button size of your choice and hit Get Code button.

For Twitter, go to the link below:

https://publish.twitter.com/

Twitter Follow

Enter your Twitter URL and follow the on-screen instructions to get Twitter follow button.

Alright, now we have enough code to use. To add social buttons to the product page, you will need to edit the file below:

MAGENTO_ROOT/app/design/frontend/[DESIGN_PACKAGE]/[THEME]/template/catalog/product/view.phtml

Open view.phtml file in your favorite code editor. You can add the social button code to any position where you want it to be, but to give your product page a nice look, I would suggest to add it below the product name, so visitors can find them quickly and can follow you on the social site.

Search for the below code in view.phtml file:

After the above code, create a new <div> with class=”extra-info” and in this div, add your Facebook like and Twitter follow button code. Your view.phtml should look like this:

Product Page

Once you are done with the changes, save the file and override it. Clear your Magento cache and navigate to your product page, it will look like the same:

Social Buttons

Conclusion

Social networking has met expectations as a direct sales channel for many ecommerce businesses. It also provides channels for customer communications, branding, social engagements, promotions and other techniques that promote direct or indirect sales of your store.

Implementing Social networking techniques in ecommerce business can be a difficult task if we don’t have a CMS with high adaptive capabilities and a robust underlying community. But if you have developed your ecommerce store using Magento, you can add Social Buttons in Magento with this tutorial that will hugely facilitate implementation.

If you have anything else to suggest, feel free to comment in below comments section.

About Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. He writes about Magento Tutorials at Magenticians as well as share his knowledge with the Magento Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

  • Stay Connected: