7

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

3
  • On which section you want to place? May 17, 2018 at 4:03
  • Hi @nagaraju did you added gmail share button here. Nov 30, 2018 at 10:50
  • No @shivashankarm Nov 30, 2018 at 10:51

2 Answers 2

17

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>
7
  • thanks @kazim noorani where i need to keep this code ? May 17, 2018 at 4:44
  • thats means calling how to do the calling May 17, 2018 at 4:45
  • I have updated my code. Please check and let me know if you still need any help. @NagarajuKasa May 17, 2018 at 4:49
  • hi @kazim one small doubt i have added social sharing from addthis tool prnt.sc/jiwopy prnt.sc/jiwp0o but unable to add instagram is it possible? May 17, 2018 at 4:58
  • Aaamm, as far as I know, Instagram doesn't allow to upload images through their API. Still need to search for that. @NagarajuKasa May 17, 2018 at 5:07
0

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.

4
  • how to add instagram button? Oct 3, 2018 at 11:29
  • Hi @user67337 How to add gmail share button here Nov 30, 2018 at 10:29
  • Hi @nagaragu, i have added a facebook link, it is sharing but how can i get the shared response id magento2 Feb 19, 2019 at 10:31
  • @jafarpinjar, I guess you cannot share web urls to instagram Mar 30, 2021 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.