How to Add Social Sharing Links for a Product in Magento 2

In order to show social sharing links on your Magento 2.0 product pages, you simply need to follow these steps. There are two routes you can take here:

  • You can either create a new module, or
  • You can create a new theme

In this post, I’m going to show you how to add social sharing options using a child theme.

Overriding the Layout Template

You should notice that the layout file responsible for rendering is:


And to override this layout file, we need to copy the file to the following location in the child theme:


Now, in this file, locate the container.

Add a new block as shown in the snippet below to render the social icons:

<container name=”” label=”social links” htmlTag=”div” htmlClass=”social-links” after=””><block class=”Magento\Catalog\Block\Product\View” name=”” as=”addto” template=”product/view/addto.phtml”/> <!– adding social sharing block –><block class=”Magento\Catalog\Block\Product\View” name=”” template=”product/view/social.phtml”/> <block class=”Magento\Catalog\Block\Product\View” name=”” template=”product/view/mailto.phtml”/></container>

We’ve specified three main attributes namely, class, name and template.

  • Class: Every block should have a unique class name.
  • Name: A name is used to address the block to which this attribute is assigned.
  • Template: The file path which represents the functionality of the block
Create the Template File

We now have to create a new file in the following location:


Make sure that you store the images under the following directory:


Now, let’s head to our created social.phtml file, to render these social icons. Add the below code to your file:

<?php$_product = $block->getProduct(); // GET THE PRODUCT?> <div class=”social-icons” data-role=”social-icons”> <!– FACEBOOK –><a href=”<?php echo urlencode($_product->getProductUrl());?>&t=<?php echo urlencode($_product->getName())?>” onclick=’,””,”width=680,height=420,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes”);return false’ title=”Share with FaceBook”><img src=”<?php echo $this->getViewFileUrl(‘images/fcb-med.png’); ?>” alt=”FaceBook” width=”5%”></a<!– TWITTER –><a href=”<?php echo urlencode($_product->getProductUrl());?>(<?php echo urlencode($_product->getName())?>)” onclick=’,””,”width=680,height=420,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes”);return false’ title=”Share with Twitter”><img src=”<?php echo $this->getViewFileUrl(‘images/twer.png’); ?>” alt=”Twitter” width=”5%”></a> </div>

You should be able to see the social image icons below the ‘Add to Wish List’ button!

Well, I hope you were able to follow the steps and add social sharing icons for products on your Magento store.

Related Post

Leave a Reply