Customize Facebook Like Box With CSS

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

Update – Facebook has officially stopped this code from working any longer

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:

2. Now save the file by going to File > Save as
Save the file with the extension FB.css as shown below,
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:

The above code structure consists of 4 important sections which must be filled properly.

Like Page ID

Connections i.e. Number of Profile Faces/pics

Width and Height Dimensions

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 »

About The Author

Hi! I am Mohammad, an experienced SEO Consultant, Pro Blogger, Computer System Engineer, an addicted Web Developer and now a father to a beautiful princess "Ifza". STCnetwork was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..