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

Latest Article

Blog

WHO: World is facing diabetes

The quantity of grown-ups living with diabetes has almost quadrupled to 422 million more than 30 years, the WHO cautioned, including the world is confronting the ailment which now influences about one in 11 individuals. Read more…

Blog

Back Pain

Back torment influences a great many people sooner or later in their life, activated by terrible stance, twisting ungracefully or lifting inaccurately. Most instances of back agony enhance inside of a couple of weeks or Read more…

Blog

Bitcoin cracks $5,000 mark for first time

LONDON: Bitcoin surged through the $5,000 level on Thursday out of the blue since the dispatch of the unregulated virtual cash over 8 years back. The cryptographic money struck another record high of $5,183.97 around Read more…