June 27, 2011

Widgets

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;
}

span.total{
  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,
https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744
  • 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.

Credits

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


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 »

69 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
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?

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

      Delete
  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

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

    my blog is
    www.theindialeaks.blogspot.com

    and your blog is too cool!

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

    ReplyDelete
  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

    ReplyDelete
  6. Registration has been disabled by mydatanest

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

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

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

    tried multiple css links but nothing comes up

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

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

    ReplyDelete
  12. @Jeremy

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

    SimplifiedBlogging

    ReplyDelete
  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

    ReplyDelete
  14. better upload on google,

    using this tutorial

    http://www.intechgrity.com/freely-host-css-js-other-static-files/

    ReplyDelete
  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

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

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

    ReplyDelete
  18. Can we reduce the width below 300px?

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

    How To Save Ur Blog From Sopa/pipa

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

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

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

    Cheers!

    Björn

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

    MBT Facebook Hacking Guide

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

    http://www.yourbloggingtips.com/2012/03/facebook-like-box-widget-for-blogger.html

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

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

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

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

    Custom Facebook App Development

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

    ReplyDelete
  30. Worked like a charm! Thank you!

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

    /path/to.fb.css?1

    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

    ReplyDelete
  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

    http://gstek.info/forum/topicseen./webmasters-forum/how-can-i-create-fb-like-widget-see-screen-shot-33856.msg463563.html#msg463563

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

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

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

    ReplyDelete
  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

    @James
    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 :)

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

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

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

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

    Regards
    Technology Blog

    ReplyDelete
  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

    ReplyDelete
  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

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

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

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

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

    CSS3 Zoom Out Social Sharing Plugin For Blogger

    ReplyDelete
  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

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

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

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

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

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

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

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

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

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

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

    Example:
    http://www.website-html-template.com/

    ReplyDelete
  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,
    Alvin

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |