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;
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/Btsnts" 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%2FBtsnts&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>

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.

Credits

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

Post a Comment

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

    http://www.way2blogging.org/2012/03/new-facebook-popout-likebox-version-2-for-blogger.html

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

    ReplyDelete
  3. how to add this to a website not a blog
    visit http://www.hdwallbase.com

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

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

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

      Delete
  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."

    ReplyDelete
    Replies
    1. Can you provide your facebook fan page URL?

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

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

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

    ReplyDelete
  9. please send to my emial tkjedu@yahoo.com

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

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

    Thanx.

    ReplyDelete
  11. Hi Rahul,

    I tried to integrate the above code in my blog: http://www.kunal-chowdhury.com 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.

    Regards,
    Kunal Chowdhury

    ReplyDelete
    Replies
    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.

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

    http://amispace.com/create-custom-facebook-like-box/

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

    www.anime2enjoy.com/p/anime-list.html

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Hi! I love your blog .Thank you for your share.By the way,i want to share a best free date recovery to you!

    ReplyDelete
  16. This is so good, i just loved it, simply lite and awesome,

    Regards,
    Bad Masti

    ReplyDelete
  17. This is so good, i just loved it, simply lite and awesome,

    Regards,
    Bad Masti

    ReplyDelete

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

 
Top