June 27, 2011

Customize Facebook Like Box With CSS

custom-like-boxStyling Facebook plugins is unfortunately not an easy job because very limited details are shared on the Facebook Developers page. Custom plugins help you to stand out as a brand and promote your business well. In April 2010, Daddydesigns published a tutorial on how to style and apply modifications to Facebook Fan box. Their tutorial was well entertained but with the introduction of Facebook Like Box instead of Fan Box, the change in algorithms made it difficult to modify the plugin using the same guide. After several trials and errors, we managed somehow to make the necessary small changes made by DaddyDesigns to fully customize the Like box with custom flavors of fonts and colors. This would surely have not been possible with their brilliant help.
I have made this tutorial as easy to implement as possible. You just need to carefully follow the easy steps below. I have divided the tutorial in two parts:
  1. Creating The style sheet for Like Box
  2. Creating a custom Like Box code
This Method works 101% till today :)

Update: We only showed you what you can  do. You can edit the CSS to try your creativity and make any design you like. See Likebox with mouse hover effect

1. Creating the Stylesheet For Like Box

Custom like box
Creating a style sheet is really easy. Just do this,
    1.  Copy and paste the code below inside a notepad
/*---------------MBT's Custom Like Box Start--------------*/
.fan_box a:hover{
  text-decoration: none;

.fan_box .full_widget{
  height: 200px;
  border: 0 !important;
  background: none !important;
  position: relative;

.fan_box .connect_top{
  background: none !important;
  padding: 0 !important;

.fan_box .profileimage, .fan_box .name_block{
  display: none;

.fan_box .connect_action{
  padding: 0 !important;

.fan_box .connections{
  padding: 0 !important;
  border: 0 !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #666;

  color: #0080ff;
  font-weight: bold;

.fan_box .connections .connections_grid {
  padding-top: 10px !important;

.fan_box .connections_grid .grid_item{
  padding: 0 10px 10px 0 !important;

.fan_box .connections_grid .grid_item .name{
  font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
  font-weight: normal;
  color: #289728 !important;
  padding-top: 1px !important;

.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 0px;
margin: 0 !important;

.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;

.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;

/*---------------MBT's Custom Like Box End--------------*/
To keep it simple make these changes:
  • To change the font size edit font-size: 11px;
  • Replace the heading color ( #0080ff ) with a color of your choice. You can use our color generator tool
  • Replace the Profile Nick Names text color ( #289728 ) with one of your choice.
      2.   Now save the file by going to File > Save as
Save the file with the extension FB.css as shown below,
css extension
      3.   Finally upload the file on your hosting server or you can try any other free hosting service. I recommend Google Code.
You can use our link too: http://mybloggertricks.googlecode.com/files/facebook.css
      4.   Once you have uploaded the stylesheet file, you will be provided with a direct link to it. Keep it safe as we would need it later.
     5.    You are done!

2. Creating a Custom Like Box Code

Instead of using the new code provided on the developers page, we will use and modify a custom code. This is the modified code you need to use:
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0"   css="STYLE SHEET LINK"></fb:fan>
The above code structure consists of 4 important sections which must be filled properly.
  1. Like Page ID
  2. Connections i.e. Number of Profile Faces/pics
  3. Width and Height Dimensions
  4. Stylesheet link
Make these changes:
  • Replace  with the 12-15 digit numeric ID of your Facebook Like Page. You can find this ID inside your Like Page URL. For example: The URL of my like Page is,
  • I have kept the number of profile pics denoted by connections equal to 10. You can reduce it if you want.
  • Replace STYLE SHEET LINK with the link of the stylesheet your previously uploaded. I will mention later how to create
Your Custom Facebook Like Box is now ready to be served! That's All. Paste this code anywhere you want and your personalized and styled box will show up just perfectly. If you face any problems just let me know. I will publish more designs and tutorials on this topic within this week.


Readers and developers are requested to kindly link back to this page if they wish to share this working tutorial with their visitors. It's the only tutorial published after daddydesigns tut which provides a modified solution.

Please let us know if you needed any help. Peace and blessings pals. :)

Need Quick Help within 24 Hours? ASK NOW

Free WordPress Installation Service!

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

71 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. I have tried out your code and it doesn't seem to work. The Like box is displayed with default CSS. Can anyone get this working?

    1. Facebook no longer support css. So now all facebook design hacks with css will stop working. However, facebook now allows the likebox plugin to be rendered without a border via the show_border=false argument. But if you want to spice up your like box, you can fill color gradients in it using SVG. Follow this guide - http://www.howtokickblogger.com/2013/08/style-facebook-like-box-with-svg.html

  2. @although

    Did you add your Facebook ID correctly and add the proper CSS extension? Did you upload the file?
    Buddy the customization works like 123. See another example here -> Customized Facebook Like Box

  3. bhai m getting error help me
    Plugin cannot be rendered with the specified parameters.

    my blog is

    and your blog is too cool!

  4. @true
    i have problem like u. How to Fix it?

  5. Great... I´ve been looking for this.
    Thanks a lot for sharing it.

    I have onlu one problem, i don´t have a Page ID. My fb site was upgraded and now the address is just facebook.com/purelightphotography

    Do you have any idea how should i modify the code?

    Have a nice day

  6. Registration has been disabled by mydatanest

  7. This comment has been removed by the author.

  8. But what to do if the "Facebookpagename" is too long, is there a way to change the showing name with css? please answer

  9. I seem to have some trouble showing the likebox
    it wont show up at all

    tried multiple css links but nothing comes up

  10. Error.. the msg is : Could not retrieve id for the specified page. Please verify correct href was passed in.

  11. i am trying to put like box on my liquid page..can you tell me how to do that

  12. @Jeremy

    I solved the problem, I made some modification with MBT link back


  13. Okay, I got some fix with this nice tutorial, I made this thing works for me, and i got you the direct link: http://testingforsb.atwebpages.com/fbgreen.css (for the green font)
    http://testingforsb.atwebpages.com/fb.css (for red font>

    Please red the complete solution with of course credits and back links to MBT! simplifiedblogging.com

  14. better upload on google,

    using this tutorial


  15. bro i can't able to upload the file in datanest, can u please suggest me any other file hosting serives top upload my face book like box bro,

    this is my blogger www.techradarinfo.blogspot.com

  16. Thanks... this was a big help.

  17. This comment has been removed by the author.

  18. Can we reduce the width below 300px?

  19. Thanking you for this amazing post hope u will keep it up..

    How To Save Ur Blog From Sopa/pipa

  20. http://code.google.com
    google code is the best way to upload any file

  21. fb like box is not appearing with the style sheet i have defined.... it is appearing with the default css of facebook... what to do ?

  22. Great tutorial Mohammad!

    A question.
    I want to display the facebook wall feed, rather than displaying who likes the page.
    If I use the standard way to get a like box, I can simply add the code "force_wall=true" to make it happen.
    But do you, or anyone else know a way to display the feed using this tutorial's method? (So that I can style it the way I want)



  23. Great... I´ve been looking for this.
    Thanks a lot for sharing it.

    MBT Facebook Hacking Guide

  24. Thanks Mohd.. I have applied it to my blog but tweaked it & it gives excellent result. Also, provided with complete graphical presentation "How to DIY". I have also solved the problem of not having Like Page ID. Have a look at my Blog & let me know what do you think of the same.


  25. Wow very cool, I want to try it master..

  26. Keep posting such kind of information on your blog. I bookmarked it for continuous visit.
    html5 media player

  27. Awesome! Long time I thought this was impossible, which is exactly what FB wants us to believe... lol.

    Thanks :D Too bad I cant get the locale working.. but working on it. Slm!

  28. I really like this site, feel this site impressive and interesting.

    Custom Facebook App Development

  29. I have done. Thanks for sharing.
    I share the CSS tips: Programming and Coding

  30. Worked like a charm! Thank you!

  31. if your widget is not following your css, try adding the following to the end of it like so:


    MAKE SURE you increment it by 1 for every time you make changes.

    example: /path/to.fb.css?2
    example: /path/to.fb.css?3
    example: /path/to.fb.css?4

  32. dear mohammad..I had sent u already problem detail and here I m again asking to solve it.please let me know how can I get this type of fb like page at startup ...code please? see link below


  33. sir how can i add blog updates in Face Book pages pls send information thank you.

  34. can I just pay you to do this for me?

  35. I love the customized like box - it makes it seem so much more a part of the site instead of a copy and pasted tool from somewhere else.

    I do have a question - The Stream content is very short at only (215px) and I would like it to be most of the content (375px of the 400px). I have been trying to edit the length but it is built into the html that I have no access to. Do you have any suggestions?

  36. @Nihit
    You are required to kindly link back to this page to avoid copyright violation. We found no link on your page pointing here.

    @Jitendra Indave

    This is a facebook popup that we created two versions. Please find theme here: Jquery Facebook popup1 and Jquery Facebook popup2

    and a new one Jquery Facebook pop up with timer

    @Jeff Neal

    We do offer premier help please contact us through services page

    You will have to edit the height both in CSS and HTML. In CSS edit this part:

    .fan_box .full_widget{
    height: 200px;
    border: 0 !important;
    background: none !important;
    position: relative;

    In HTML edit the part at the last line i.e. Height="200px"

    Also change the number of connections (profile pic number)

    Hope this helps :)

  37. Hey there! Thanks so much for this! I followed each step carefully but for some reason it's not working?

    The file is called FB.css.txt - I uploaded it onto Google Code as advised. Have I named it incorrectly?

    Thank you!

  38. I'm new to this is the instruction that you are listing here for this cool light box pop up that shows up at the lower right hand side of your blog page? The one that is a facebook like botton and it has a list of recent article.

    Does this get set up in your blog or your facebook page. I would love to get it on my site. my site has a plug in tool box that makes it easy to add things like this. I would love to see if it would work on my site. I have a service request in. Not sure what the style sheet is, is related to the facebook like box?

  39. Please please i want set an image width and height for all thumbnail of fb like box. How to do it? Thank you very much..

  40. cool trick..I will surely try it on my blog .

    Technology Blog

  41. It's work for me, but idon't want to show face! when i set conncetion to (0) it don't show amount of people like. Thanks

  42. How do you get the like button to appear on top again. when I use stream "yes", the like button falls in the middle of my stream post. Please Help

  43. Its nice way to edit the style of like box. Will certainly do it in my blog .

  44. This comment has been removed by the author.

  45. sir how to find our page id.. I see my page url but page id was not there....Pls answer......

  46. Well this trick worked for me :) and nice share 1 like for this.

    CSS3 Zoom Out Social Sharing Plugin For Blogger

  47. my neighbor's mother got paid $18735 the prior month. she been working on the computer and bought a $423000 house. All she did was get blessed and profit by the directions made clear on this web page http://Run19.com

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


  49. if you have converted your Facebook page ID into username you can still get your page id.
    => Click on Edit Page Button
    => Update infor
    when you open this link your page id will be shown in browser address bar copy this id and use it..
    Mohammad Mustafa bai thank you soo much for sharing this..

  50. Remember to add your SDK code guys,the one that has:

    <div id="fb-root"></div>
    <script>undefinedfunctionundefinedd, s, id) {
    var js, fjs = d.getElementsByTagNameundefineds)[0];
    if undefinedd.getElementByIdundefinedid)) return;
    js = d.createElementundefineds); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265806670123892";
    fjs.parentNode.insertBeforeundefinedjs, fjs);
    }undefineddocument, 'script', 'facebook-jssdk'));</script>

    I totally left that out lol.

  51. Is there an alternative since Facebook has changed the script again. All of my Fanbox has changed to default box again.

  52. They did change the code...
    Now all the custom layout and design have been destroyed....

  53. Yes they changed something, not working any longer...

  54. Can someone *PLEASE* post a link to a working example of this?

  55. Fastidious blog you’ve got here. I’ve ever been seeing you just about many blogs recently.
    hacker un compte facebook

  56. As a tip: Put the facebook button in your footer (CSS). The button will always be visible but won't really hurt the visitors' eyes.


  57. Hi Mohammad Mustafa Ahmedzai,

    Thank you for your wonderful post! I have some questions. How do I customize my Facebook Like Box looks like this: http://prntscr.com/36ndfw

    The Header Text and the people like text are same size in my screenshot.

    Please help!

    Best Regards,

  58. Wasp dudes! Amazing stuff continues the good work.

    buy cheap likes

  59. instafamousGreat blog post! I don’t understand how long it will require me to obtain through all of them!