Blogging is Meant to be Simple! - Subscribe via or

Thursday, August 18, 2011

Customize Facebook Like Box With CSS, Tested To Work for YOU!


This trick is from one of my favorite blogs that taught many bloggers to make some nice tweaks to their blogpages! But somehow, this tutorial about Facebook Like Box seemed not working to me and for some people who have tried the trick, so I made some step to fix this problem!

In this simplified tutorial, you are not going to necessarily upload the css to your web hosting! I will give the direct link below with two choices, with the green font same as MBT or the red font like mine! Or, if you want more customization of the CSS, I recommend WEBFREEHOSTING.NET, and upload your FB CSS file there.

Here are the two direct links of the FB LIKE BOX CSS I uploaded to my WEBFREEHOSTING.NET account:

Red Font
http://testingforsb.atwebpages.com/fb.css

Green Font
http://testingforsb.atwebpages.com/fbgreen.css

One problem also, as I read some comments at the original tutorial, the like box won't appear, okay, I encountered that as well, so we will use another link of the FB Like Box Javascript to solve the problem:

<style>
#mbtlikebox{
color: #365899;
font: bold 11px arial;
background:#ECEEF5;
padding:3px !important;
margin:5px 0px!important;
border:1px solid #E1E4ED;
-moz-border-radius:3px;
-webkit-border-radius:3px;
width:290px;
}

#mbtlikebox:hover{
border:1px solid #6383C1;
}
</style>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="REPLACE THIS WITH YOUR LIKE PAGE ID" stream="0" connections="10" width="350px" height="200px" header="0" logobar="0" css="REPLACE THIS WITH FB LIKE BOX CSS DIRECT LINK"></fb:fan>
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="REPLACE WITH YOUR FB LIKE PAGE URL">Visit the Like Page»</a><div style="float:right"><a href='http://www.mybloggertricks.com/2011/07/custom-facebook-like-box-with-mouse.html' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>

Now, simply open your Blogger account, ADD GADGET-HTML/JAVASCRIPT! Save, place that gadget from anywhere of your blog! Enjoy!

Oops, if you got some problem from the above codes, refer to the example below:

<style>
#mbtlikebox{
color: #365899;
font: bold 11px arial;
background:#ECEEF5;
padding:3px !important;
margin:5px 0px!important;
border:1px solid #E1E4ED;
-moz-border-radius:3px;
-webkit-border-radius:3px;
width:280px;
}

#mbtlikebox:hover{
border:1px solid #6383C1;
}
</style>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="251311191548351" stream="0" connections="8" width="300px" height="200px" header="0" logobar="0" css="http://testingforsb.atwebpages.com/fb.css"></fb:fan>
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="https://www.facebook.com/pages/SimplifiedBlogging/251311191548351">Visit SB on FB »</a><div style="float:right"><a href='http://www.mybloggertricks.com/2011/07/custom-facebook-like-box-with-mouse.html' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>

As you can see, I am using 280 instead of 290, and 300 instead of 350, and 8 instead of 10... it depends with the width if your sidebar!

Important References:
Read More

 
Blog Directories: Bloggers | BlogCatalog