Magento 2 social share buttons?

Question

How to add Magento 2 social sharing links to the product view page? Actually, I have registered in add this tool and followed the steps to integrate social sharing via AddThis snippet I have a snippet that wants to place on the view page from the customer theme

Answer 1

Something like this,

Add this code in catalog_product_view.xml,

<referenceContainer name="product.info.social">
    <block class="Magento\Catalog\Block\Product\View" name="product.info.socialmedia" template="Magento_Catalog::product/view/socialmedia.phtml"/>
</referenceContainer>

And Create new phtml file at following path,

app/design/frontend/Custom/theme/Magento_Catalog/templates/product/view/socialmedia.phtml

Add below code in it.

<?php $_product = $block->getProduct(); ?>
<div class="social-media-icons">
    <!-- WhatsApp -->
    <a target="_blank" href="https://api.whatsapp.com/send?text=<?php echo urlencode($_product->getProductUrl());?>">
            WhatsApp</a>
    <!-- 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('Magento_Catalog::images/facebook-share.jpg'); ?>" alt="Facebook" width="12%">
    </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('Magento_Catalog::images/tw.png'); ?>" alt="Twitter" width="5%">
    </a>
    <!-- Pinterest -->
    <a href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode($_product->getProductUrl()); ?>&media=<?php echo urlencode($_product->getImageUrl());?> &description=<?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="Pin it">
        <img src="<?php echo $this->getViewFileUrl('Magento_Catalog::images/pinterest-share.jpg'); ?>" alt="Pinterest" width="12%">
    </a>
    <!-- Google Plus -->
    <a href="https://plus.google.com/share?url=<?php echo urlencode($_product->getProductUrl()); ?>" 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 Google Plus">
        <img src="<?php echo $this->getViewFileUrl('Magento_Catalog::images/google-plus-share.jpg'); ?>" alt="Google Plus" width="12%">
    </a>
</div>

Answer 2

This is not the best solution but here you go,

I don't want to use 3rd Party modules so i used FB JS to make it work.

For FB

<div class="facebook_button social-button">
<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-layout="button" data-width="400" data-show-faces="false"  data-href="<?php echo $YourProductUrl; ?>"  data-send="true"></div></div>

For Twitter

<div class='twitter_button social-button'>
    <a href='https://twitter.com/share' class='twitter-share-button' data-url="<?php echo $this->getProductUrl(); ?>" >Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>

This is working for me.