Custom Like Box HTML and JavaScript Code
Place your like box anywhere you like by using this code,
<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="LIKE PAGE ID" stream="0" connections="10" width="350px" height="200px" header="0" logobar="0" css="STYLESHEET LINK"></fb:fan>
<div id="mbtlikebox"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="LIKE PAGE URL">Visit the Like Page »</a><div style="float:right"><a href='http://www.mybloggertricks.com' style="text-decoration:none; color:#365899;">Widgets »</a></div></div>
Make these changes:
- Replace LIKE PAGE ID with your Like Page User ID. Read the previous post for help.
- Replace STYLESHEET LINK with the link of your CSS file that you uploaded as made clear in our previous post.
- Replace LIKE PAGE URL with your Like Page link
That's it!
Credits
All customization credits goes to MBT blog and [a href="http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/" rel="nofollow" target="_blank"]DaddyDesigns[/a]. Web developers and bloggers are requested to link back to them if they wish to share the codes above with their readers.
Troubleshooting
If you faced any problems or received Facebook rendering errors then you may kindly read this post:
- [a href="http://www.mybloggertricks.com/2011/06/fixing-facebook-like-box-rendering.html" target="_blank"]Fix Like Box errors[/a]
If you needed any help with regard to customizing the colors and look of Like box then feel free to post your query. Would be a pleasure to help you. Peace and blessings.
0 comments :
Post a Comment