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>
#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>
#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:
- MBT Original Tutorial: Click here!
- Sign Up for free web hosting webfreehosting.net
- MBT color wheel: enjoy the color code generator!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
