Making the Magento Theme Socially Ready: Adding the Facebook Like box to the left sidebar

You have surely seen Facebook with the Like button and the classic box with smileys on a fan page. Now we are going to insert them in our theme in the left sidebar by performing the following steps:

1. First, you need to go to https://developers.facebook.com/docs/ plugins/like-box-for-pages/.
2. Then, set all the parameters to customize your Like Set Width, Height, and the other options. In the Facebook Page URL option, you can add your Facebook page link. The following screenshot shows the plugin configuration page:

After you have inserted all the fields, click on the blue button to get the code. In the pop up that appears, as shown in the following screenshot, select HTML5:

3. To enable the Lightbox script, you need an API key. You can get this at http://www.facebook.com/developers/apps.php, and create a new Facebook application.
4. Once you create your app, select the application from the drop-down list, and your code is ready to use.

1. Installing the Like box on your site

Now we have to insert the code in the theme’s left sidebar. To do this, perform the following steps:

1. Copy the following code generated in the Facebook Like box page:

<div class=”social-facebooklikebox”>

<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/it_IT/all.js#xfbml=1&appId=

XXXXXXXXXXXXXXX”;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

<div class=”fb-like-box” data- href=”http://www.facebook.com/YourFanPageUrl” data- colorscheme=”light” data-show-faces=”true” data- header=”true” data-stream=”false” data-show- border=”true”></div>

</div>

2. Now, go to your theme folders and create a file called phtml in app/design/frontend/bookstore/default/template/social/.
3. Paste the copied code of step 1 in the file and save it.
4. Now, to declare a core/template block to be displayed in the left sidebar, open the xml file, find the <default> default handle, and in the reference name, place the following code:

<block type=”core/template” name=”socialsharing” template=”social/ facebooklikebox.phtml” after=”-” />

5. Now you are Open the product page and you will see the social sharing buttons where you placed them!

As you can see in the following screenshot, the Like box will appear on the left sidebar column.

Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.