Top

Care to rate this post?

Author

Srdjan Stojiljkovic

Frontend Developer

Srdjan worked at Inchoo from October 2011 to September 2013. He was a Frontend Developer at Novi Sad, Serbia branch.

Other posts from this author

Discussion 31 Comments

Add Comment
  1. 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/

  2. 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)

  3. Srdjan Stojiljkovic

    @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.

  4. Muniraj

    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…

  5. Srdjan Stojiljkovic

    Hi Muniraj,
    “Mail a friend” is a default Magento functionality so it is already there.
    For “Thumblr” you can use the following URL: http://www.tumblr.com/share/link?url=URL TO SHARE]&name=[TITLE]&description=[SHORT_DESCRIPTION]
    Or you can just use: http://www.tumblr.com/share
    I am sure you can find more information about “Thumblr” share URL, just google it.

  6. Muniraj

    Hi Srdjan,

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

  7. jothikannan

    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

  8. Srdjan Stojiljkovic

    As mentioned in the article, you can get the count for those buttons quite easily (https://gist.github.com/2640302). You can then use a simple JavaScript to parse the JSON data and make a total count.

  9. jignesh

    Product image is not showing while try to share with facebook

  10. Srdjan Stojiljkovic

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

  11. Vladimir Baus

    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!

  12. Vladimir Baus

    Just an update, it seems to be working now. Thanks again for the great post!

  13. Divyaraj Bheda

    This blog is very useful for all Magento developer.

  14. sunil kuamr

    all social media sharing not working for tell me how ii use it

  15. Does it support “OpenGraph meta data” in Magento?

  16. Srdjan Stojiljkovic

    @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; ?>
  17. I’m not that much of a online reader to be honest but your blogs really nice,
    keep it up! I’ll go ahead and bookmark your website to come back in the future. Cheers

  18. How to share the products in https://svpply.com and tumblr :)

  19. Prashant Parekh

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

  20. Srdjan Stojiljkovic

    @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. Yet another great tutorial from inchoo.net

    Keep it up…!

    Wayne

  22. Here is extensions for adding social media experiences like facebook like/share, pinterest, twitter latest tweets, facebook like box and many more.

    URL : http://www.xthemers.com/magento-themes-extensions/magento-extensions/socialize-your-store.html

  23. Shobana

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

  24. Derak

    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

    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML+RDFa 1.0//EN&quot; &quot;http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd&quot;&gt;
    

    to get the page to validate.

  25. kamal

    Hii Srdjan
    The code i used as per your instruction . but not working .

  26. nidhi

    hello,

    I wnna use count g(0) f(2)… so on.. i go to this link https://gist.github.com/jonathanmoore/2640302, But i am not able to find the way how to use this code. i don’t kno json. Please help me where and how to embed this code.

    thanks

  27. How we Can Share our coupon code to face-book
    Friend list…..help me out plz

  28. Anu

    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

  29. 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!

  30. 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.

  31. it is not showing product image and title in fb wall, it is showing only link of product page..

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top