2

How to add Magento 2 social sharing links in 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 want to place in the view page from customer theme

  • On which section you want to place? – Sukumar Gorai May 17 '18 at 4:03
  • Hi @nagaraju did you added gmail share button here. – shivashankar m Nov 30 '18 at 10:50
  • No @shivashankarm – Nagaraju Kasa Nov 30 '18 at 10:51
7

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">
    <!-- 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>
  • thanks @kazim noorani where i need to keep this code ? – Nagaraju Kasa May 17 '18 at 4:44
  • thats means calling how to do the calling – Nagaraju Kasa May 17 '18 at 4:45
  • I have updated my code. Please check and let me know if you still need any help. @NagarajuKasa – Kazim Noorani May 17 '18 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? – Nagaraju Kasa May 17 '18 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 – Kazim Noorani May 17 '18 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.

  • how to add instagram button? – jafar pinjar Oct 3 '18 at 11:29
  • Hi @user67337 How to add gmail share button here – shivashankar m Nov 30 '18 at 10:29
  • Hi @nagaragu, i have added a facebook link, it is sharing but how can i get the shared response id magento2 – shivashankar m Feb 19 at 10:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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