Simple social sharing buttons in Magento
There are a lot of ways to add social sharing buttons to your Magento store. You can choose from several different free or paid extensions, create your own, use services like AddThis or even paste the official button scripts from button generators (like Facebook Like Button generator). However, you will always end up with default (official) buttons that have a limited set of styling options. If you need a simple solution that just works this article is for you.
I would like to point out some potential issues with official buttons that you should be aware of. First of all, every button you generate has some JavaScript code. This code is located on a remote server and is loaded every time user opens a page. Although these scripts are loaded asynchronously, if you have a lot of them it can, sometimes, increase the page load speed and that is not good. On the other hand, if you have some complex (or badly written 🙂 ) JavaScript these buttons can start messing up with your store. One time I used AddThis to add social buttons on the product page in Magento and configurable products stopped working because of the Twitter button! Total price refused to update and clicking on “Add to Cart” button didn’t do anything. I can’t remember the exact JavaScript error I was getting but I think the problem was related to global variable names or something like that. The point is, sometimes these buttons can create issues and this is not something you should spend your time debugging. I don’t even want to remember times when Facebook Like button just refuses to work and how frustrating that can be.
Keep it Simple
I was always a fan of keeping things simple and making them work. Every social networking site has a simple “Share URL” that accepts some basic parameter and will allow you to share any URL. Because this is a simple URL you can make a link or any type of button for it and style it however you like. Another benefit of using simple “Share URLs” is that there are no external scripts.
Here is a list of URLs for some popular social sites that you can use for sharing:
- Google Plus: https://plus.google.com/share?url=[URL TO SHARE]
- Facebook: https://www.facebook.com/sharer/sharer.php?u=[URL TO SHARE]&t=[TITLE]
- Twitter: http://twitter.com/home/?status=[TITLE] ([URL TO SHARE])
- Pinterest: https://pinterest.com/pin/create/button/?url=[LINKBACK URL]&media=[IMAGE TO SHARE]& description=[DESCRIPTION]
Implementation
Although you can probably get away with simple link elements that open “Share URLs” in a new window that is not a perfect solution if you care about usability (and you should). The easiest thing to do is to open the links in a standard popup window. If you have some JavaScript modal script on your site you can use that but for the sake of simplicity I will use a default Magento popup window.
The most logical place for social sharing buttons is, of course, the product page so I will be using that for this example. I will add Google Plus, Facebook, Twitter and Pinterest buttons but I am sure you can easily add any other social site if you google it a bit. To keep this article on topic I will add simple links instead of buttons but you can create buttons with some basic CSS.
Follow these simple steps and you will have social sharing links on your product pages in no time:
- Open app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view.phtml
- Find the place where you want to add your links/buttons and add the following:
<?php $productName = $_helper->productAttribute($_product, $_product->getName(), 'name'); ?> <?php $productUrl = $_helper->productAttribute($_product, $_product->getProductUrl(), 'product_url'); ?> <?php $productImage = $_product->getImageUrl() ?>We will use these variables to set URL, title, description or any other parameter required.
- Add the following code below the variables we defined in the previous step:
// Google Plus <a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>', 'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Google Plus') ?>">Google Plus</a> // Facebook <a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($productUrl); ?>&t=<?php echo urlencode($productName); ?>', 'facebook', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Facebook') ?>">Facebook</a> // Twitter <a href="javascript:popWin('http://twitter.com/home/?status=<?php echo urlencode($productName . ' (' . $productUrl . ')'); ?>', 'twitter', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Tweet') ?>">Twitter</a> // Pinterest <a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=<?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($productImage); ?>&description=<?php echo urlencode($productName); ?>', 'pinterest', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Pin it') ?>">Pinterest</a>
Although all social sites are quite good at extracting content form the links you share (product name, image, description …) it is always a good practice to help them as much as you can. This is almost always done by adding some meta tags to your page (in this case product page). There are a lot of different standards you can use but to keep things simple I will use OpenGraph because Facebook is using it and if your page is a bit more complex chances are that it won’t extract the product info correctly.
On the other hand, I never had any problems with how Google Plus extracts product info when you share a link. Twitter is simple because you only share text that you define and Pinterest requires you to specify all the info so there is no need to set any meta tags for these sites.
Adding OpenGraph meta tags to your Magento store is quite easy. Just add the following code below the last meta tag (should be a meta tag named “robots” if you are using a default Magento head file) in app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/page/html/head.phtml
<?php $product = Mage::registry('current_product');
if ($product): ?>
<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(300, 300); ?>" />
<meta property="og:description" content="<?php echo strip_tags($product->getShortDescription()); ?>" />
<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName() ?>" />
<?php endif; ?>We are sharing a product so we need to add meta tags to product pages only but head.phtml is loaded on every page. This means that we need to check if the current page is a product page and only then add our meta tags. At the same time we need to get the product object so we can extract the data we need to put into meta tags. The first two lines in the code above will do just that. We create a variable called $product that will try to get the current product. If we are on the product page, this variable will contain the object of the current product. If not, $product will be set to false (or some other value that returns false in the IF statement). To add the meta tags we need to check if our product variable is set and that’s what the IF statement is for. I used some standard meta tags to describe the product but you can use as many tags as you need. For more info on this please visit the OpenGraph Facebook page.
Share count
If you want to take thing a bit farther and add share counts for your buttons I suggest you visit this page.
Hope this will make your life a little bit easier. In case you’re still in need of professionals who can handle your Magento development, feel free to drop us a line.
51 comments
Hi, Srdjan!
I really like your article!
I want to recommend the great solution – the Social Login Pro Extension by Plumrocket.
The module helps you to provide the secure way of logging in via 50+ social networks for your customers. More information about this extension you can find here:
https://store.plumrocket.com/social-login-pro-magento2-extension.html
Hello,
I have the same problem it not taking the product image but it taking the site logo. I tried with many ways please tell me or suggested me ho do i get the product image .
Thanks
url:https://www.eclipseexpress.com/fabseasons-women-coffee-brown-cloche-hat.html
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
Can I share product on Instagram?
If yes then How to used it?
Thanks
hi i used this code….it works well…kindly tell me how to know the customer shared the product or not
I’m trying to use in Magento 2 in my Custom Module Page. It’s giving error popWin is not defined.
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
What About magento2???
How can we add sharing button in magento 2 product view page?????????
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 .
Worked well but i no icons image on it, does it need independent implementation ??? please guide….
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?
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.
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?
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
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.
is there a way to directly share from Magento to WhatsApp when a user is surfing on a mobile device
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 !! 🙂
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 🙂
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
How can you add some buttons by using this code? my site is http://www.prestoprint.ca
it is not showing product image and title in fb wall, it is showing only link of product page..
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.
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!
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
How we Can Share our coupon code to face-book
Friend list…..help me out plz
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
Hii Srdjan
The code i used as per your instruction . but not working .
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
to get the page to validate.
Hi
is this enough to add Your code like copy and paste or else sHave to do any customization for pinterest?
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
Yet another great tutorial from inchoo.net
Keep it up…!
Wayne
@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.
I have use this same code and also put open image graph.. But still image is not showing in facebook share button.
How to share the products in https://svpply.com and tumblr 🙂
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
@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
Does it support “OpenGraph meta data” in Magento?
all social media sharing not working for tell me how ii use it
This blog is very useful for all Magento developer.
Just an update, it seems to be working now. Thanks again for the great post!
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!
Hi jignesh,
Have you included the OpenGraph meta tags in the page header?
Product image is not showing while try to share with facebook
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.
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
Hi Srdjan,
Thanks for your response. It really helps! Once again thanks for your advice.
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…
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=%5BURL 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.
@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.
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)
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/