How to Add Social Share Buttons In Magento 2

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.

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:

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:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceBlock name="product.info.addtocart">
<action method="setTemplate">
<argument name="template" xsi:type="string">Cloudways_Mymodule::catalog/product/view/addtocart.phtml</argument>
</action>
</referenceBlock>
</body>
</page>

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="test.tab" template="Cloudways_Mymodule::custom_tab.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
<referenceBlock name="product.info.addtocart">
<action method="setTemplate">
<argument name="template" xsi:type="string">Cloudways_Mymodule::catalog/product/view/addtocart.phtml</argument>
</action>
</referenceBlock>
</body>
</page>

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:

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

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

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:

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.

Click on Share Button.

The code will appear; click on Copy 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:

Add Google+ Button

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

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

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:

Add CSS

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

.social-share
{
margin-top: 8px;
}

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

<head>
<css src="Cloudways_Mymodule::css/mycss.css"/>
</head>

Catalog_product_view.xml  will now looks like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Cloudways_Mymodule::css/mycss.css"/>
</head>
<body>
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="test.tab" template="Cloudways_Mymodule::custom_tab.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
<referenceBlock name="product.info.addtocart">
<action method="setTemplate">
<argument name="template" xsi:type="string">Cloudways_Mymodule::catalog/product/view/addtocart.phtml</argument>
</action>
</referenceBlock>
</body>
</page>

Launch SSL and run the following commands:

php bin/magento setup:static-content:deploy
php bin/magento cache:flush
php bin/magento setup:upgrade
php bin/magento indexer:reindex

Refresh Product Page

Now refresh the product page and you will see the social sharing buttons on product page 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!

Abdur Rahman

Abdur Rahman is the Magento whizz at Cloudways. He is growth ambitious, and aims to learn & share information about Ecommerce & Magento Development through practice and experimentation. He loves to travel and explore new ideas whenever he finds time. Get in touch with him at [email protected]

Get Connected on: Twitter Community Forum