How to Add Labnol like Facebook Like Widget to Blogger ?

Labnol like Facebook LIKE widget ?

I'm a big fan of Amit ji [ Labnol.org ] , i've already shared some blog posts related to labnol here in StudentsCrunch . Even though i'm not a professional Web Developer / Designer ,i like to be and i'm learning it day by day.

The widgets and blogger templates that i share here is made by some of the fine designers , and i love their creativity , thats why i share their works here .If you wanna show your design works , unique designs,widget or blogger templates , just drop down your comment.

Add Labnol like Facebook fan box to your Blogspot Blog

labnol,like,blogger,template,facebook,like,blogger widgets

The steps are extremely simple ;) you will be able to add the stylish facebook like box like the one you could found on labnol site.

Steps to follow :

1. Goto > Blogger Dashboard > Desgin ( Select your desired blog , if you have multiple one )

2. Now, Click " Add Gadget " from the " Page Elements " page.

3. Select " Add HTML/Javascript " ( opens a pop-up window )

4. Copy and paste the below code.

<style>.helperbloggerFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.helperbloggerFB, .helperbloggerFB:before, .helperbloggerFB:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.helperbloggerFB:before, .helperbloggerFB:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.helperbloggerFB:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>

<div class="helperbloggerFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="https://www.facebook.com/StudentsCrunch" 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&amp;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&amp;colorscheme=light&amp;header=false&amp;height=179&amp;href=https%3A%2F%2Fwww.facebook.com%2Fstudentscrunch&amp;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</div>
</div>
<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>

5. Just Change the "Facebook Fan Page url " to yours.
ie) StudentsCrunch to your Facebook url.

6. Hit " Save " thats it..Check your blog for Labnol like Facebook LIKE widget.

You can adjust the width and height of the widget according to your need.

Hope you like this blogger widget , if you do so, please share this widget to your friends .The widget is made by HelperBlogger .

You may also like :

Don't forgot to share this with your friends..Your comments are always welcome ;)

Pages

Tuesday, July 31