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:

<Magento_Catalog_module_dir>/view/frontend/layout/catalog_product_view.xml

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

<child_theme_dir>/Magento_Catalog/layout/catalog_product_view.xml

Now, in this file, locate the product.info.social container.

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

<container name=”product.info.social” label=”social links” htmlTag=”div” htmlClass=”social-links” after=”product.info.overview”><block class=”Magento\Catalog\Block\Product\View” name=”product.info.addto” as=”addto” template=”product/view/addto.phtml”/> <!– adding social sharing block –><block class=”Magento\Catalog\Block\Product\View” name=”product.info.scl” template=”product/view/social.phtml”/> <block class=”Magento\Catalog\Block\Product\View” name=”product.info.mailto” 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:

<child_theme_dir>/Magento_Catalog/templates/product/view/social.phtml

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

<child_theme_dir>/web/images/

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=”https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($_product->getProductUrl());?>&t=<?php echo urlencode($_product->getName())?>” onclick=’javascript:window.open(this.href,””,”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=”http://twitter.com/home/?status=<?php echo urlencode($_product->getProductUrl());?>(<?php echo urlencode($_product->getName())?>)” onclick=’javascript:window.open(this.href,””,”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 Article

0 thoughts on “How to Add Social Sharing Links for a Product in Magento 2”

Leave a Reply