Magento 2 | Create “Share this” module for single product page

We want create something like this:

A simple module that able the administrator add ,remove or change social share icon and url, from backend.

I want that social panel is visible only in single product page.

Let’s start:

First thing to do is create the block that will contain our share code, so, if we need to, add, remove, or change a share link, we don’t need to pass through the .phtml files.

Navigate to “Content => Block” and “add new block”.

Compile the “add new” form in every parts :

In the content area, add the code necessary for the sharing buttons.

Now open code editor and add new file called “socialShare.phtml” in “your_theme_root/Magento_Catalog/templates/product/view”.
In file, paste this code :

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

<div class="social-share-icons" data-role="wdm-social-icons"> //SOCIAL_SHARE WRAPPER

// CODE FOR CALL THE "Single_sharing" BLOCK

  <?php

  echo $block->getLayout()
  ->createBlock('Magento\Cms\Block\Block')
  ->setBlockId('single_sharing') // This is the block identifier that you had assign when you have created the block.
  ->toHtml();
  ?>

</div>

Now we need to “positiong” the block inside the single product page.
Open “catalog_product_view.xml” under “your_theme_root/Magento_Catalog/layout/”, scroll to :

<container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links">

and immediately after

<block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="Magento_Catalog::product/view/addto.phtml">
<blockclass="Magento\Catalog\Block\Product\View\AddTo\Compare"name="view.addto.compare"after="view.addto.wishlist"
template="Magento_Catalog::product/view/addto/compare.phtml"/>
</block>

paste this :

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

Empty all cache, navigate to a product page, and you’ll see the “Share this” bar, remember to customize the url for the share of various social, and the graphic aspect by css