How to Add Social Share Buttons In Magento 2

by Syed Muneeb Ul Hasan  January 23, 2017

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 .

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

Add CSS

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!

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is a Magento Community Manager at Cloudways. An expert in PHP and Magento, he prefers to educate users in the implementation and usage of cloud based Magento Hosting Solutions. When not working, he loves to watch cricket. You can email him at muneeb.hasan@cloudways.com

Stay Connected:

You Might Also Like...