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

In the e-commerce space, you’re always looking at multiple avenues to drive traffic. And when doing so, you simply CAN’T ignore the importance of Social Media.

Social media is part of the old WOM marketing, where peers act as primary influencers. A simple and easy technique to be a part of this game, is to create a social sharing option for products on your e-commerce store.

This works great for you for two reasons:

1. Shoppers can share products they like on their timeline
2. Shoppers can recommend products to others using social networks.

[su_note note_color=”#FFFCDD”]Did you know? Facebook is a leading source of social e-commerce traffic and sales; and has the highest conversion rate![/su_note]

[space]

Adding Social Sharing Options in Magento 2.0

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 (or extend a parent theme’s page layout by creating a child theme)

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

Step #1 Creating a Child Theme

Since the process of creating a child theme has been explained under Magento Documentation: Creating a theme, I won’t be repeating it here. You can follow the steps mentioned in the documentation to create a child theme.

Step #2 Identifying the Layout Template

Once you’ve created a child theme, you need to find the product page layout and add an additional block in it.

Here’s where we can then add social icons.

Now, our earlier post, Override Default Magento 2.0 Templates To Redesign Your Store, mentions how to locate a needed template file. For quick reference, I’ll summarize the steps here:

• Under Stores -> Configuration -> Advanced -> Developer -> Debug set the ‘Enabled Template Path Hints for Storefront‘ to “Yes“, and click on ‘Save Config‘
• Refresh the cache and head over to a single product page on the front-end of your store
• You should notice highlighted statements on the page, which indicate the paths to the templates responsible for various UI elements

Make note of the template file that renders the ‘Add to Wish List’  or ‘Add to Compare’ element. We’ll be adding social icons on the product page below these buttons.

Step #3 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

[space]

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

This container is responsible for rendering the ‘Add to Wish List’ and ‘Add to Compare’ buttons. Add a new block as shown in the snippet below to render the social icons:

<container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-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.wdm" template="product/view/wdm-social.phtml"/>

<block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="product/view/mailto.phtml"/>
</container>

Let’s walk through the above block that we’ve added. We’ve specified three main attributes namely, class, name and template.

• Class: Every block should have a unique class name and it is a required parameter to instantiate a block.
• Name: A name is used to address the block to which this attribute is assigned. If a name is not specified, it is set to ANONYMOUS_n. This attribute is case sensitive
• Template: The file path which represents the functionality of the block

Now, after adding this block in the page layout file, we will need to create its corresponding template file i.e., wdm-social.phtml to perform the functionality of adding social icons.

[space]

Creating the Template File

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

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

Since we’ll be using some images to display social sharing links, we need to first add some image icons before we head towards editing our template file.

You can download images from relevant sources, or create your own. Make sure that you store the images under the following directory:
<child_theme_dir>/web/images/

Now, let’s head to our newly created wdm-social.phtml file, to render these social icons. Add the below code to your file (we’ll be adding Facebook and Twitter sharing links. You can use this idea to add links to other social networking websites):

<?php
$_product = $block->getProduct(); // GET THE PRODUCT
?>

<div class="wdm-social-icons" data-role="wdm-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=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes");return false' title="Share on FaceBook">
<img src="<?php echo $this->getViewFileUrl('images/fb-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=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes");return false' title="Share on Twitter">
<img src="<?php echo $this->getViewFileUrl('images/tw.png'); ?>" alt="Twitter" width="5%">
</a>

</div>

Make sure you modify the name of the images specified as per image names you’ve uploaded.

[space]

And that’s it! Now all you have to do, is flush all the cache from cache management and refresh any product page.

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

Note: If you get any errors before flushing the cache, you might want to check the permission of Magento root and the child theme created.

[space]

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

Got questions?

The comment section is open for discussion!