How I Added Customize Facebook Like Box With CSS To My Blog

I got this idea of how to add this CSS facebook like box from one of my favorite Author who blog at mybloggertricks where most of the blogger today in all over the world gain useful tips on creating a beautiful blog, blogger template, make money tips etc. 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 which work for me which am taking the step to teach you how I fixed it!

In this tutorial, you will no longer of necessarily upload the css to you we hosting anymore. I have done that and I will also give you 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.

The following are the two direct links of the FB LIKE BOX CSS that I have uploaded 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>

What you will now do is, simply open your Blogger account, ADD GADGET-HTML/JAVASCRIPT! Save, place that gadget from anywhere of your blog! Enjoy!

Or

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:290px;

    }

#mbtlikebox:hover{

     border:1px solid #6383C1;

    }

</style>

<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="250726771616717" stream="0" connections="10" width="350px" height="200px" header="0" logobar="0"   css=" http://www.4shared.com/document/ISHtypLG/FB_2.html "></fb:fan>

<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href=" http://www.facebook.com/pages/Winodeys-blog/250726771616717">Visit the Like Page »</a><div style="float:right"><a href='http://www.facebook.com/pages/Winodeys-blog/250726771616717' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>

Hope it work for you!

Reference To:

MBT Original Tutorial: Click here!