Add Custom Facebook Like Box to Blogger V2:Digital Tech Inspiration

Facebook Like Box in your blog/website is probably the easiest way to attract new fans to your facebook fan page. In my previous tutorial I have shown you how to add a stylish
custom Facebook Like Box to Blogger V1. Here, I present you another stylish customized facebook like box for blogger blog.

This social plugin will help you increase your fan following. That’s, because the box shows photos of the visitors friends who are already fans. And when they see known faces they also liked to be linked to the fan page. Let’s get to work then!

LIVE DEMO

How to Add a Custom Facebook Like Box to Blogger Blog?

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

.facebookOuter {

background-color:#F4F4F4;

width:250px;

padding:10px 0 10px 10px;

height:250px;

border:1px solid #CCCCCC;

}

.facebookInner {

height:250px;

overflow:hidden;

}

</style>

<div class="fb-like-box"

data-width="245" data-height="290"

data-href="http://www.facebook.com/WIKITECHNOL"

data-border-color="#F4F4F4" data-show-faces="true"

data-stream="false" data-header="false">

</div>

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>

Customization:

Replace WIKITECHNOL with your Facebook Username.

MORE: The default background color of our Facebook Like Box is #F4F4F4 but you can use any other color too by changing the highlighted value. Similarly, if you want to have a wider or taller Facebook Like Box for your blog/website, you can need to change the width and height values in highlighted.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.