Add Facebook Like Button in Product Page

by lsd / Filed under: Magento Themes
Add Facebook Like Button in Product Page

This article applies to all Magento v1.4.1.0 compatible premium themes.

All Lotus Seeds Design Premium Mangento themes are Facebook Like Button ready, but we do not enabled it by default. You can enable it easily with the following steps:

1. Add a meta tag in template/page/html/head.phtml.

<meta property="og:site_name" content="yoursite.com"/>

2. Create a Static Block, use fblike for identifier, configure your Like Button from Facebook site, copy and paste the code in the content area.

You can use either iframe (simple method) or XFBML which offers more features, with the latter, the Javascript SDK is required and you need to also register your application (website) to obtain an App ID. Please refer to the documentation of JavaScript SDK from Facebook site.

With XFBML, the code will look like so:

<div class="fblike">
<fb:like href="http://www.your-magento-store.com" layout="standard" action="like" font="segoe ui" colorscheme="light" /></fb:like>
</div>
<div id="fb-root"></div>
<script>
 /* <![CDATA[ */
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
  		/* ]]> */
</script>

A caveat for placing the code directly in the Static Block, that is, the HTML Editor in the Static Block will remove the </fb:like>…</fb:like> and iframe each time you try open the static block.

3. To avoid this from happening, we recommend you create a Custom Variable from System/Custom Variables, name it anything you like, and paste the above code in the Custom Variable’s content area.

4. Now proceed to the fblike static block, use the “Insert Variable” button to insert the Custom Variable you have just created.

Alternatively, you can skip the above steps and place the code directly in template/catalog/product/view.phtml. Look for this code in the file:

  <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('fblike')->toHtml() ?>

Remove it, and place the Like Button code in the same place.

Fix IE8 problem

The Like Button does not showed up in IE 8 browser. It maybe a bug of IE8, but more likely to do with the fact that Facebook Open Graph protocol is not standard compliant. To overcome this, open up template/page/html/3columns.phtml[1], around line #33, replace this code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">

To:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/">

[1] Note: 3columns.phtml is the template for product page, the theme you purchased maybe using 2columns-left.

Tags:

Comments are closed.