You made it all the way down here so you must have enjoyed this post! You may also like:

How To Connect Google Analytics 4 To Magento 2 Bojan Mareljic
Bojan Mareljic, | 36

How To Connect Google Analytics 4 To Magento 2

3 best open-source eCommerce platforms in 2021 Zrinka Antolovic
Zrinka Antolovic, | 8

3 best open-source eCommerce platforms in 2021

eCommerce Returns Management – a simple solution from the Fashion industry Zrinka Antolovic
Zrinka Antolovic, | 12

eCommerce Returns Management – a simple solution from the Fashion industry

51 comments

  1. Hi Srdjan. I applied the code for adding share buttons but I am facing issue : No description is showing and no product image is displayed. I have viewed the source all the og attribute are showing correctly and on click of shared link it redirects to product detail page properly.

    Please help me.
    Thanks & regards
    Tryambak

  2. hi i used this code….it works well…kindly tell me how to know the customer shared the product or not

  3. I’m trying to use in Magento 2 in my Custom Module Page. It’s giving error popWin is not defined.

  4. I added the above code in view page. but when i share on facebook default description is showing rather than the product description . how can the product title ,description can be shown on sharing?? no problem with the imgage .image is showing well.please guide

  5. What About magento2???

    How can we add sharing button in magento 2 product view page?????????

  6. Thanks for sharing a nice list.
    I have found an amazing Facebook & Twitter Integration – Extension for Magento® 2 that will be useful for your store. It’s have many new features like Enable/Disable Social Block, Sidebar Integration, No. of post / shares, Rich Configuration, Responsive & many more. Please take a look here at https://goo.gl/cfaSiF .

  7. Worked well but i no icons image on it, does it need independent implementation ??? please guide….

  8. I am using this code. Its working fine for all the sharing buttons except Facebook. Its working but in description it is also including html tags.

    Please anyone can help me in this?

  9. I have inserted the code in my product details page (http://sonia-h.com/index.php/collection-26/grace-lace-dress-blue.html)

    productAttribute($_product, $_product->getName(), ‘name’); ?>
    productAttribute($_product, $_product->getShortDescription(), ‘short_description’); ?>
    productAttribute($_product, $_product->getProductUrl(), ‘product_url’); ?>
    getImageUrl() ?>
    <a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=&t=‘, ‘facebook’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Share on Facebook’) ?>” target=”_blank”><img src="getSkinUrl(); ?>images/facebook.png”>

    <img src="getSkinUrl(); ?>images/instagram.png”>

    <a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=&media=&description=‘, ‘pinterest’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Pin it’) ?>” target=”_blank”><img src="getSkinUrl(); ?>images/pin.png”>

    <a href="javascript:popWin('https://twitter.com/home/?status=‘, ‘twitter’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Tweet’) ?>” target=”_blank”><img src="getSkinUrl(); ?>images/twitter.png”>

    Its working properly in Chrome and IE and Safari. But in mozilla it is not working, Can you please specify as to where I am going wrong?

    Thanks in advance for your help.

  10. I have inserted the code:

    productAttribute($_product, $_product->getName(), ‘name’); ?>
    productAttribute($_product, $_product->getShortDescription(), ‘short_description’); ?>
    productAttribute($_product, $_product->getProductUrl(), ‘product_url’); ?>
    getImageUrl() ?>
    <a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=&t=‘, ‘facebook’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Share on Facebook’) ?>” target=”_blank”><img src="getSkinUrl(); ?>images/facebook.png”>

    <img src="getSkinUrl(); ?>images/instagram.png”>

    <a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=&media=&description=‘, ‘pinterest’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Pin it’) ?>” target=”_blank”><img src="getSkinUrl(); ?>images/pin.png”>

    <a href="javascript:popWin('https://twitter.com/home/?status=‘, ‘twitter’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Tweet’) ?>” target=”_blank”><img src="getSkinUrl(); ?>images/twitter.png”>

    Its perfectly working in Chrome, safari, IE. But share pop up is not opening in Mozilla. Can you pls specify what is the issue in my code?

  11. Hello there, are u able to add linkedin sharing like u shared other social networks?

    // Google Plus
    <a href="javascript:popWin('https://plus.google.com/share?url=‘, ‘google’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Share on Google Plus’) ?>”>Google Plus
    // Facebook
    <a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=&t=‘, ‘facebook’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Share on Facebook’) ?>”>Facebook
    // Twitter
    <a href="javascript:popWin('http://twitter.com/home/?status=‘, ‘twitter’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Tweet’) ?>”>Twitter
    // Pinterest
    <a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=&media=&description=‘, ‘pinterest’, ‘width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes’);” title=”__(‘Pin it’) ?>”>Pinterest

  12. Perfect tutorial. Thanks.

    I was wondering if there is a way to center the javascript popup in the center of the screen. It shows up in the top left. Is this possible?

    Thanks.

  13. is there a way to directly share from Magento to WhatsApp when a user is surfing on a mobile device

    1. Hi,
      Yes you can share on whatsapp using the URL Scheme of WhatsApp.
      e.g. Hello, world!

      Or if you have an android app for your mobile customers, you can use whatsapp share intent, and pass on the data :
      Intent sendIntent = new Intent();
      sendIntent.setAction(Intent.ACTION_SEND);
      sendIntent.putExtra(Intent.EXTRA_TEXT, "This is my text to send.");
      sendIntent.setType("text/plain");
      startActivity(sendIntent);

      More Info: https://www.whatsapp.com/faq/en/android/28000012

      Cheers !! 🙂

    2. Sorry, looks like my html tags stripped off
      the direct share should be something like , in your a href use this code “whatsapp://send?text=Hello%20World!” so basically whatsapp://send?text=$your_custom_text will do the work 🙂

  14. Hi, I dont know if you can still reply to my comment. The question is there a way I can replace the text with logo. where customer and share it by clicking logo

  15. Really great!!! Its working fine and have helped me to put social links to share my products. I was using a extension before it and that was creating many issues on live site and also was with too much scripts and external links affecting performance of website.

  16. Thank you for your post. I am using Magento Go (I am not a programmer/developer). How can I add your code into Magento Go? I already added meta tag for my website, but when I try to copy your code after that to tag individual product, the php code is not accepted. I hope you can help me!

  17. I have added some custom attributes for products meta information tab.How to display the custom attributes on head.phtml ?I dont know how to retrieve the custom field values from database to display in header section.Please help

  18. Shouldn’t the values in the content attribute be run through htmlspecialchars()?

    Also the og tags make the page invalid for XHTML strict.

    You have to use a different doc type of

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

    to get the page to validate.

  19. Hi
    is this enough to add Your code like copy and paste or else sHave to do any customization for pinterest?

  20. @Milan: As far as I can tell there is no official share/add URL for svpply. You will have to use their button (https://svpply.com/extras/store_button) or inspect it to see if you can get the URL from there.

    @Prashant Parekh: Please check if you have a correct namespace in your html tag. You should have something like xmlns:fb=”http://ogp.me/ns/fb#” as an attribute in the html tag. Also check if you resized the product image correctly. I have used this meta data on a number of project and it just works.

  21. I have use this same code and also put open image graph.. But still image is not showing in facebook share button.

  22. @pajamas: Yes it supports the Open Graph meta data and here is a simple way of adding them to your Magento site. We will use template/page/html/head.phtml

    <?php $product = Mage::registry('current_product');
    if ($product): ?>
    <!-- Facebook Share Thumbnail -->
    <meta property="og:title" content="<?php echo $product->getName(); ?>" />
    <meta property="og:type" content="product" />
    <meta property="og:url" content="<?php echo $this->helper('catalog/product')->getProductUrl($product); ?>" />
    <meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(130, 110); ?>" />
    <meta property="og:description" content="<?php echo strip_tags($product->getShortDescription()); ?>" />
    <meta property="og:site_name" content="<?php echo Mage::getStoreConfig('general/store_information/name') ?>" />
    <!-- End of Facebook Share Thumbnail -->
    <?php endif; ?>
  23. Hello Srdjan,

    This tutorial is great, and it is really simple to implement, unlike others I’ve seen.
    I have one problem though. When sharing a product, that has some images associated with attributes, all of these images end up being shared. Even though I’ve set the correct meta tag for the image. Any ideas how this can be avoided?
    Thank you in advance!

  24. Hi jignesh,
    Have you included the OpenGraph meta tags in the page header?

  25. Hi,
    Thanks for the nice post, it is working like charm,

    But i want Total count of Google+, Face book, Twitter and Pinterest

    like G+(10) + FB(10) + Twitter (10) + Pinterest (10) = 40 Total
    any way to get the total count of these social shares ?
    Sorry for my bad English

    Thanks in advance

  26. Hi Srdjan,

    Thanks for your response. It really helps! Once again thanks for your advice.

  27. Hi Srdjan,

    Thanks for your excellent post. Its really very nice. But, I want to integrate “Mail a friend” & “Tumblr” on my site. Kindly guide me how can I implement this.

    Thanks in advance…

  28. @Diego: Thank you for raising the point but if you go to the page you posted (http://developers.facebook.com/docs/share/) you can see that there is a similar functionality in the “Direct URL Example” section. The point is there will always be a way to share something on your wall through a simple URL with some parameters (I hope so).

    @Collar: Thanks for sharing 🙂 Again Sharrer uses its own JavaScript that you will have to debug if something does not work as it should.

  29. Thanks. Great, also to read about Sharrer (Jquery).

    Still. There is not an fix all plugin, with extremely simple code. *at least that my opinion)

  30. Nice post Srdjan. I think this is a really good point to think about. But, it’s good to remember about Facebook’s sharer.php limited lifetime.

    Here, at Like Button documentation: http://developers.facebook.com/docs/reference/plugins/like/

    They say:

    “What happened to the old Share button?

    We deprecated the Share Button when we launched the Like button, because the Like button improves clickthrough rates by allowing users to connect with one click, and by allowing them to see which of their friends have already connected. For reference, the Share button documentation is still available here.”

    And even this link to sharer.php documentation isn’t working anymore:

    http://developers.facebook.com/docs/share/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.