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

If you are thinking of re-stlye your blogger template and looking for a facebook like box widget. Here, I present you a stylish customized facebook like box for blogger blog. Since it
is better to have your own custom widgets in your blog which can easily be styled and customized to blend you blogger template.

This social plugin will help you increase your fan following. The custom stylish Facebook like box will be linked to your fan page so that any like may turn out into a Fan. 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.

<style>

.WTbloggerFB {

width: 280px;

height: 150px;

border-radius: 3px;

position: relative;

background-color:#f4f4f4;

padding:5px 10px 15px 0;

}

.WTbloggerFB, .WTbloggerFB:before, .WTbloggerFB:after {

background: #f4f4f4;

border: 1px solid #ccc;

}

.WTbloggerFB:before, .WTbloggerFB:after {

content: "";

position: absolute;

bottom: -3px;

left: 2px;

right: 2px;

height: 1px;

border-top: none;

}

.WTbloggerFB:after {

left: 4px;

right: 4px;

bottom: -5px;

box-shadow: 0 0 2px #ccc;

}

</style>

<fb:like-box href="https://www.facebook.com/WIKITECHNOL" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2FWIKITECHNOL&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>

</div>

Customization:

Replace WIKITECHNOL with your Facebook Username.

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.