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.
