How to Add Dynamic Facebook Page Like Box to Blog or Website

You may simply add a Facebook Page Like box (Page Plugin) to your Blogger blog or WordPress blog or any website you own by visiting the developers page of Facebook. However, it does not provide customizations as you like and the looks will be default as other use.

We had a trick to make your Facebook Page like box more dynamic using the latest CSS3 and HTML5 codes. You need to just copy and paste the codes given in this tutorial into anywhere in your blog or site you want to add your Facebook Page Like Box.

The best part of this dynamic Facebook Page Like Box is that it will hide the text link of Facebook social plugin by default shown in the widget footer.

Additionally, this cool widget will not only attract your live visitors but also turn them into your permanent customer or visitors/fans who likes your Facebook page from your blog or website itself and get the latest feed of contents posted into Facebook Page.

Table of Contents

How to Show Facebook Like Box (Page Plugin) into your Blogger Blog

If you have created a free blog and wants to increase your audience and make your brand name popular on Facebook then please do not forget to create and add your Facebook Page to your blog. Follow these simple procedures explained below to add Facebook Like Box gadget into your blog:

You have to option either click a button below to add directly SWT Facebook Like Box to your blogger blog or if you have some basic knowledge to edit blogger template then follow step by step guidelines.

Method-A: Install Facebook Page Like Box (Page Plugin) with a single click

NOTE: After installing SWT Facebook Like box with method A, please go to HTML template editor (Template tab -> Edit HTML) and find https://www.facebook.com/SuperWebTricks and replace it with your own Facebook page address/name.

Method-B: Follow this step by step guidelines to add SWT Facebook Page Plugin to your blogger blog.

Step-1:

Step-2:

Click on Edit HTML button and search for </body> tag in your blog template given codes. Now copy and paste this JavaScript codes just before the closing </body> tag.

<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>

Note that if you had already added the above JavaScript codes earlier at the time of adding Facebook like or share button etc. then you need not be required to add the above code in duplicate.

Step-3:

Search for ]]></b:skin> and paste the following CSS codes just beofe/above the ]]></b:skin> and save template.

.swtFBOuter {Added by Showeblogin
background-color:#FFF;
position: relative;
width:280px;
height:218px;
}
.swtFBInner {
height:214px;
width:292px;
overflow:hidden;
background-color:#F2F2F2;
border-radius: 5px;
border-style:outset;
Tutorial at http://www.superwebtricks.com/?p=481}

Customize: If you want to change the background color then replace F2F2F2 in line number 11 above with the hexadecimal string of color you want.

Step-4:

Visit the layout tab of your blog and click on Add a Gadget link button on sidebar and then scroll down and click on HTML/JavaScript.

Step-5:

Finally, paste the following codes into the content field given and replace the word SuperWebTricks (see the line number 2) with your own Facebook Page name or ID.

<!-- SWT Facebook Page Plugin  START --><div class="swtFBOuter"><a href="http://superwebtricks.com/" rel="dofollow" target="_blank"><img src="http://goo.gl/whAnfb" border="0" style="position: fixed; top: 1%; left: 2%;" /> </a><div class="swtFBInner"><div class="fb-page" 
data-href="https://www.facebook.com/SuperWebTricks" 
data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/SuperWebTricks"><a href="https://www.facebook.com/SuperWebTricks">Showeblogin</a></blockquote></div></div><a href="http://superwebtricks.com/" rel="dofollow" target="_blank" ><img src="http://img.superwebtricks.com/files/69.png" border="0" style="position: fixed; bottom: 2%; right: 1%;" /> </a></div> </div><!-- SWT Facebook Page Plugin END -->

Enjoy!

If you have any customization problem with SWT Facebook widget then please fill free to ask me to redesign the same in accordance with your need and blog or website color.