Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. GET STARTED

How to Add Social Share Buttons In Magento 2

Updated on  23rd January

4 Min Read
Reading Time: 4 minutes

Social media is like a busy airport. Someone from anywhere around the world is always present on some platform all the time. Social media engagement is on the rise with every passing year and is perhaps the best method of promoting your products on your online store. However, Magento unfortunately doesn’t provide a way to share things on social media directly.

Add Social Share Buttons In Magento

We are always on the lookout for solutions though, aren’t we? Previously, we learned how to add custom tab in Magento 2. And today, we are going to learn how to add social share buttons in magento 2. We are going to use the same module that we created in the first part of this tutorial series.

Override Addtocart File:

First, go to app/code/Cloudways/Mymodule/view/frontend/templates  and add directories catalog/product/view. Now go to app/code/Cloudways/Mymodule/view/frontend  and create more directories web/css.  Now your file structure should look like this:

Directory Structure

Now go to the root directory of your Magento and navigate to vendor/magento/module-catalog/view/frontend/templates/product/view, and find the addtocart.phtml  file.

Copy this file to your module in app/code/Cloudways/Mymodule/view/frontend/templates/catalog/product/view .

Cloudways Magento Hosting For Developers

Now we have to inform Magento that we want to use our own addtocart  file. To do that, we have to add a code in our app/code/Cloudways/Mymodule/view/frontend/layout/catalog_product_view.xml. Add the following code in it:

Since our file also have a code for Custom tab which we created in our last tutorial, your XML code will look like this:

Add a Facebook Button

First, we will add a Facebook button on the product page of Magento 2 which will allow people to share products with their friends on Facebook. Get the Facebook button code.

The following screen will appear when you click on the provided link. Go to the Like Button section:

facebook like

Scroll down to the Like Button Configuration Section and set the Facebook button according to your requirements and then click on Get Code.

facebook code

Once the code for the Facebook button has been generated, copy it!

facebook copy code

Now go to app/code/Cloudways/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml and paste the code here. Replace the data-href  with your product page URL by using this code: data-href="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];  ?> .  Now the code will look like this:

paste facebook button code

Add Twitter Button

Now we will add a Twitter button on the product page of Magento 2 which will help people share products with their followers. Get the Twitter button.

Now scroll down and click on the Twitter Buttons.

twitter buttons

Click on Share Button.

share twitter

The code will appear; click on Copy Code.

copy twititer code

Create <div class=social-share></div>  in app/code/Cloudways/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml. We are creating this div in order to add CSS which we will use later. After creation of div, copy the Twitter code under this div. Now the code will looks like this:

paste twitter code

Add Google+ Button

Now we add a Google+ button on the product page of Magento 2 that will help people share products on Google+. Get Google+ button.

Scroll down and go to the sections shown below and copy the code.

google+ button size


javascript google+

Go to app/code/Cloudways/Mymodule/view/frontend/templates/catalog/product/view/addtocart.phtml  and paste the Google+ button code under <div class=social-share>. Now the code will looks like this:

paste google+ code


Create mycss.css file in  app/code/Cloudways/Mymodule/view/frontend/web/css  and add the following code in it:

Now go to app/code/Cloudways/Mymodule/view/frontend/layout/catalog_product_view.xml . Add the XML code on it:

Catalog_product_view.xml  will now looks like this:

Launch SSL and run the following commands:

Refresh Product Page

Now refresh the product page and you will see the social sharing buttons on product page in Magento 2.

Social sharing buttons in Magento 2

Final Words

Social media is perhaps the best platform for sharing and promoting products. Now after this tutorial we should be able to add social share buttons to Magento 2. If you have a problem or would like to add to the discussion, just leave a comment below and don’t forget to share this article with the friends you think may need it!

Share your opinion in the comment section. COMMENT NOW

Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is a Magento Developer and Blogger at Magenticians - a platform for Magento Tutorials. He is an expert in PHP and Magento and prefers to educate users in the implementation of Magento. When not working, he loves to play games and watch cricket.

Convert visitors into buyers on your 100% faster Magento store.

Deploy your Magento stores on optimized Magento hosting servers.


Get Our Newsletter
Be the first to get the latest updates and tutorials.