Awesome Custom Facebook Like Box For Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Wednesday, 28 March 2012

Awesome Custom Facebook Like Box For Blogger

Cascading Style Sheets (CSS) is a heart of web designers.We can design any thing as our wish with using CSS.We already published four custom like boxes and again we are here with another cool custom facebook like box.For creating this like box we does't use any JavaScript or jQuery, this like box is created with using pure CSS. This widget is extracted from labnol and after making some several changes we managed to create custom facebook like box.I have kept the installation of this widget damn easy you just have to copy and paste the code.You can check our previous versions of facebook custom like boxes.

Previous Versions Of Custom Facebook Like Boxes

  1. Custom Facebook Like Box - V1
  2. Custom Facebook Like Box - V2
  3. Custom Facebook Like Box - V3
  4. Custom Facebook Like Box - V4

How To Add Custom Facebook Like Box To Blogger?

  1. Go to Blogger Dashboard > Design > Page/Edit Layout. (In new User Interface Dashboard > Layout)
  2. Add a Gadget > HTML/JavaScript.
  3. Paste below code after changing my username with yours and save it.

<style>.helperbloggerFB {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
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;

<div class="helperbloggerFB">
<div style="height:155px;overflow:hidden">
<fb:like-box href="" 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=";;colorscheme=light&amp;header=false&amp;height=179&amp;;locale=en_US&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
<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); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Now replace Btsnts two times with your facebook fan page username and save your widget.

If you want to customize this widget then you can edit above CSS properties as you wish.If you want to make changes to this widget use our HTML Editor.


This widget is totally customized and bloggerized by helperblogger,If you want to share this widget with your readers then kindly link back to this article.

I hope you will surely like this custom facebook like box.Don't forgot to share this with your friends...


  1. its very nice. but how 2 mix these 2 features? It will be gr8 if u can do it.

  2. @امیر امامی - I will try my best.Please stay connected with our updates....

  3. how to add this to a website not a blog

  4. @fa87e1b6-7aa5-11e1-b850-000bcdca4d7a - It is same for all.Just g oto your dashboard then select add HTML/Javascript.Paste above code and save it.Drag your widget as you wish...

  5. Thanks it helped a lot but there is one problem... i have little knowledge about javascript and i'm still stuck with retrieving my id. where do i change my id/username? it would be nice if you could highlight the places where things should be changed.

    1. I have already highlighted my username in above code just replace it with your username and you are done...

  6. yes i saw that... what i meant was within the script. Anyway, i have changed them but the message still says: "Could not retrieve id for the specified page. Please verify correct href was passed in."

    1. Can you provide your facebook fan page URL?

  7. @Jasmine A - You can't create fan box for your profile.You have provide username of FANPAGE....

    1. aha! i got it now hahaha my bad! Thank you so much for the script it's working perfectly!

  8. how about adding like botton on post title blogger in new interface

  9. please send to my emial

    1. Hey I can't understand what are you asking about ?

  10. @Rahul

    Great tutorial. Works for me. Just one question. I dont want to show the faces, the rest is fine.

    How do i do this?


  11. Hi Rahul,

    I tried to integrate the above code in my blog: but it was not working. I tried from many other sites too, but none of them are working.

    I want to use a dark background (which I am able to do) but can't able to change the font color. Can you let me know whether the above code is still working or not.

    What's the alternate way to change the font color of the "Facebook Like Box"?

    Waiting for your reply.

    Kunal Chowdhury

    1. You can not edit the font family of facebook like box.Also I have checked my all above code and it is working perfectly.Also dont edit the code,only replace my username with yours.

  12. For bloggers amispace Widget Creator is a wonderful tool to create a custom Facebook Like box for your blog. You can adjust height, width along with background colour.

  13. Thanks a lot for this awesome Facebook Like Box.

    But I am facing a little bit problem in design .. can u please take a look and fix it for me .. There is a blue line over the top side of the box which looks bad. Thanks a lot in advance .. will wait for ur reply.


If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM