Get FREE $25 Hosting for Managed Magento Hosting. Use Coupon: MGT25 Avail Now
Magento 2 Tutorials

How to Add Social Share Buttons in Magento 2

social share buttons in Magento 2

Social media platforms are one of the best ways to market a business in the age of digital media. Not only do you have a large number of audience present, but they are also active and contribute to promoting your business. And this is precisely the reason why social media is essential for all ecommerce stores.

However, it would be much better if the customer shares your product themselves, and for them to do that, you have to give the customers an easy way to share the products on Social Media channels.

Magento 2 is the leading ecommerce platform, but by default, it does not provide the option for customers to share products on social platforms. So today in this tutorial I am going to teach you how to add social sharing buttons in Magento 2 and show you how to integrate Facebook and Twitter button.

Since editing core files are not recommended, I will use a custom module for this tutorial. If you don’t have any idea about using this method, you can refer to this guide: How to Create a Module in Magento 2.

Create Module

I am using Magenticians as Namespace and Mymodule as Module name.

Create module.xml file in app/code/Magenticians/Mymodule/etc and paste this code in the file:

Now register the module by creating registration.php in app/code/Magenticians/Mymodule and add this code in the file:

Create Directories

Now create directories in the module as shown:

directories social share buttons Magento 2

Copy and Override addtocart.phtml

Go to vendor/magento/module-catalog/view/frontend/templates/product/view and search addtocart.phtml file. Now copy this file in app/code/Magenticians/Mymodule/view/frontend/templates/catalog/product/view.

Now override the file by creating catalog_product_view.xml file in app/code/Magenticians/Mymodule/view/frontend/layout and add this code in the file:

Add Social Sharing Buttons

For Facebook

Go to Facebook for Developers and click on the Like Button, then scroll down to Like Button Configurator Section and click on Get Code:

get code fb

The screen with the code will show up; just copy the code from Step 1 and Step 2:

fb button code

Go to app/code/Magenticians/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml and create <div class=social1>  in it and paste the code you copied above inside the div :

For Twitter

Go to Twitter, scroll down the page and click on Twitter Buttons:

click twitter buttons

Then click on Share Button:

share tweet

Once you get the twitter code; copy it:

copy twitter button code

Go to app/code/Magenticians/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml and create <div class=”social2”> in it and paste the twitter code inside of this div:

Buttons Styling

Create newcss.css file in app/code/Magenticians/Mymodule/view/frontend/web/css and add this code in the file:

To integrate the css file above, you need to update catalog_product_view.xml. So, go to app/code/Magenticians/Mymodule/view/frontend/layout/catalog_product_view.xml and update it with the following code:

Run CLI Commands

All done! Just run the following commands in the root directory of your store:

It’s time to check the result. Go to the product page of your store and you will see the social sharing buttons:

result social share magento 2

Final Words

Giving your customers an option to share products on social media is a great and convenient marketing tactic. After following this guide, you should now be able to add social share buttons in Magento 2. Facing any issue related to this guide? Use the comment box below!

Subscribe Newsletter

Subscribe to get latest Magento news

Experience Faster
Managed Magento Hosting