As social media continues to grow in popularity it’s more important than ever for your Magento store to get social. Facebook is a great source for new leads and referrals. Google is now integrating their search results with their own social network, Google+. Twitter brings viral marketing to the next level with real-time discussion. If you haven’t jumped on the bandwagon yet now is the perfect time! By the way, our premium Magento theme comes with social media buttons straight out of the box.
When it comes to Magento extensions for social media buttons such as Facebook Like there’s a huge variety of solutions both free and paid available on Magento Connect. However, if you’re interested in learning more about how Magento works this is a fantastic DIY starter project. I’m going to show you how to create new template files and append them to existing blocks using layout XML. This should give you some insight on how to add new services and widgets to your store in the future.
So let’s get started. I recommend installing Facebook Like and Google +1 on as many pages as you can. Twitter is optional. I’ll show you how to add them to your homepage, footer, and products. In the past I’ve seen a lot of success using Facebook Like. Thanks to “Search, plus Your World” Google +1 is now absolutely essential. You wanna top the search results, right?
Facebook Like Button
Facebook Like offers 2 huge benefits: Word of mouth advertising and a direct marketing channel with your audience. When a customer likes your store or product, their friends hear about it. They can also subscribe automatically to your Facebook page, allowing you to stream announcements and deals directly to their news feed.
1) Generate your Facebook Like button code. Keep the “URL to Like” field blank and adjust the settings accordingly.
2) Click “Get Code”. Make sure “HTML5″ is selected.
3) The first piece of code (JavaScript SDK) goes right after the opening <body> tag. Let’s create a new template. You may have to create a new folder inside /template called “social”:
/app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/social/facebook-like-js.phtml
1 2 3 4 5 6 7 8 | <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 = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
4) Now we need to add this template to after_body_start, a block called right after <body> in our /template/page column files (e.g. 1column.phtml). Update your local.xml file inside your theme’s /layout directory. If you’re unfamiliar with local.xml, learn more here.
Sitewide (Homepage, Header/Footer, Products, Catalog, etc.)
1 2 3 4 5 6 7 | <default> <reference name="root"> <reference name="after_body_start"> <block type="page/html" name="social.facebookjs" template="social/facebook-like-js.phtml" /> </reference> </reference> </default> |
Product Page Only
1 2 3 4 5 6 7 | <catalog_product_view> <reference name="root"> <reference name="after_body_start"> <block type="page/html" name="social.facebookjs" template="social/facebook-like-js.phtml" /> </reference> </reference> </catalog_product_view> |
5) Finally, we need to place the Like Button code somewhere in your store. Here’s a list of template files you may want to consider:
- Header: /template/page/html/header.phtml
- Footer: /template/page/html/footer.phtml
- Homepage: Include using the CMS editor.
- Product: /template/catalog/view.phtml
Here’s some sample code that I used for my product page:
1 | <div class="fb-like" data-send="false" data-width="450" data-show-faces="false"></div> |
After that you should be good to go! To get it looking perfectly you may want to add a new CSS rule to your stylesheet so you can move around the Like Button, e.g. .fb-like { position: absolute; }
Facebook Open Graph & Analytics
Facebook Open Graph includes meta tags that allow your customers to provide more contextual info when sharing your products, such as the product image and title. It’s easy to set up:
/app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/social/facebook-open-graph.phtml
1 2 3 4 5 6 7 8 9 | <?php $_helper = $this->helper('catalog/output'); ?> <?php $_product = Mage::registry('current_product'); ?> <meta property="og:title" content="<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>"/> <meta property="og:type" content="product"/> <meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl(); ?>"/> <meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"/> <meta property="og:site_name" content=""/> <meta property="fb:admins" content=""/> <meta property="og:description" content="<?php echo trim(strip_tags($_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description'))) ?>"/> |
You can hard-code og:site_name or use <?php echo Mage::app()->getStore()->getName() ?> for store name or <?php echo Mage::app()->getWebsite()->getName() ?> for website name. For fb:admins, refer to the Facebook documentation:
A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
In your local.xml we need to add these meta tags to <head> on the product page:
1 2 3 4 5 6 7 | <catalog_product_view> <reference name="root"> <reference name="head"> <block type="page/html" name="social.facebookopengraph" template="social/facebook-open-graph.phtml" /> </reference> </reference> </catalog_product_view> |
Lastly we need to add the following to our <html> tag:
xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"
“XMLNS” is an XML namespace used by Facebook for Open Graph. You can do this two different ways. The easiest way is to just add the code to your /template/page column template. By default the product page uses /template/page/2columns-right.phtml. Add it to your <html> tag like so:
1 | <html lang="<?php echo $this->getLang() ?>" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> |
You can also create a new block with a template just for this code and use $this->getChildHtml() to add the XML namespace solely for the product page.
International Translation
If you need to translate the Like button then use the following code for facebook-like-js.phtml:
<?php echo Mage::app()->getLocale()->getLocaleCode() ?>
1 2 3 4 5 6 7 8 | <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 = "//connect.facebook.net/<?php echo Mage::app()->getLocale()->getLocaleCode() ?>/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> |
Google+
Google Search is quickly evolving. It started off with Social Search in 2009 with real-time tweets in your search results. Google+ launched last year in June. Last November they launched Google+ Pages for businesses. Now, in 2012, it’s all about Search, plus Your World. What does this mean for eCommerce? It means SEO isn’t just about backlinks and internal optimization. It’s about getting your customers to share content!
Google +1 Button
We’re going to follow the same approach as we did with the Facebook Like button but without the hassle of adding extra JavaScript right after <body>:
1) Get your Google +1 button. Adjust the settings accordingly and open “Advanced options”. Make sure “Asynchronous” and “HTML5 valid syntax” are checked. Async JavaScript ensures that the +1 button won’t slow down your website.
2) Copy and paste the code somewhere in your store. Again, here’s some template files you may want to consider:
- Header: /template/page/html/header.phtml
- Footer: /template/page/html/footer.phtml
- Homepage: Include using the CMS editor.
- Product: /template/catalog/view.phtml
1 2 3 4 5 6 7 8 9 10 11 | <!-- Place this tag where you want the +1 button to render --> <div class="g-plusone" data-annotation="inline"></div> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> |
International Translation
We need to use explode() on getLocaleCode() to grab the first part of the locale code (e.g. “en” from “en_US”):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!-- Place this tag where you want the +1 button to render --> <div class="g-plusone" data-annotation="inline"></div> <!-- Place this render call where appropriate --> <?php $lang = explode('_', Mage::app()->getLocale()->getLocaleCode()); ?> <script type="text/javascript"> window.___gcfg = {lang: '<?php echo $lang[0] ?>'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> |
Google+ Meta Tags
Google also provides meta tags similar to Facebook Open Graph that allow you to define the context of a +1 share. Follow the same approach given for the Facebook Open Graph tags:
/app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/social/google-plus-tags.phtml
1 2 3 4 5 | <?php $_helper = $this->helper('catalog/output'); ?> <?php $_product = Mage::registry('current_product'); ?> <meta itemprop="name" content="<?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>"> <meta itemprop="description" content="<?php echo trim(strip_tags($_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description'))) ?>"> <meta itemprop="image" content="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"> |
In your local.xml:
1 2 3 4 5 6 7 | <catalog_product_view> <reference name="root"> <reference name="head"> <block type="page/html" name="social.googleplustags" template="social/google-plus-tags.phtml" /> </reference> </reference> </catalog_product_view> |
One more thing. You need to update your HTML tag to include the itemscope and itemtype attributes. Open the column template file used by your product page (e.g. /template/page/2columns-right.phtml). If you aren’t sure which template file to edit, refer to /layout/catalog.xml and look for <action method="setTemplate"> under catalog_product_view.
Here’s what my <html> tag looks like with FB Open Graph and Google+:
1 | <html lang="<?php echo $this->getLang() ?>" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope itemtype="http://schema.org/Product"> |
Twitter is great for certain eCommerce websites. It depends on your audience. If you’re still on the fence about using Twitter and whether or not it delivers good ROI, do some research by using Twitter Search. See if there’s discussion about your brand and/or industry. Like Facebook, Twitter offers some fun social widgets. I’ll even show you how to add a real-time Twitter stream to your store footer.
Tweet Button
1) Grab your Tweet button. Fill in the “Via” input box with your Twitter account name. If your industry uses a popular hashtag, use that too.
2) Copy and paste the code into the template file of your choice, preferably next to your Like and +1 buttons.
1 2 | <a href="https://twitter.com/share" class="twitter-share-button" data-via="fastdivision" data-hashtags="magentothemes">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
No additional work required. You’re up and running extremely fast with Twitter!
International Translation
Twitter uses the data-lang attribute to change the language. You may need to write a PHP switch to output the correct language setting. Here’s a simple example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php $lang = Mage::app()->getLocale()->getLocaleCode(); switch($lang) { case 'en_US': $lang = ''; break; case 'zh_CN': $lang = 'zh-cn'; break; case 'de_DE': $lang = 'de'; break; } ?> <a href="https://twitter.com/share" class="twitter-share-button" data-via="fastdivision" data-lang="<?php echo $lang ?>" data-hashtags="magentothemes">Tweeter</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
Profile Widget
Twitter’s profile widget makes it easy to provide a real-time stream of your store’s tweets. You can always use the JavaScript API and build one yourself but this only takes a few minutes. Configure the widget however you like and simply copy and paste the code in one of your template files, such as /template/page/html/footer.phtml. This is better if your store has a fairly tall footer with a basic sitemap.
Social media seems simple at first glance but integration can be quite a challenge in Magento! By following along I hope this tutorial taught you a few things. As always, if you have any questions please leave a comment using the form below.
For more updates and tutorials, don’t forget to follow me on Twitter and subscribe to the feed.
