Custom Facebook Like Box With Mouse Hover Effect

Customize, personalize Facebook like box in any way you like. This is MBT's another unique release of the custom Like box plugin. We have changed the overall look of the like box and have added borders and background colour above and below the box along with a link to your like page. The link was not included in our previous version and I hope with this new custom like box your blogs and websites will surely stand out high. So lets try the new look by following the same steps as we did before. I am only sharing here the new CSS code and HTML code. For remaining details kindly read the first release here:

• Customize Like Box

Custom Like Box CSS Code

This is the new CSS code which you should use instead of the one I shared ealier,

/* ------ MBT's Custom Like Box ----- */

    .fan_box a:hover{
      text-decoration: none;
    }

    .fan_box .full_widget{
      height: 200px;
      border: 0 !important;
      background: none !important;
      position: relative;
    }

    .fan_box .connect_top{
      background: none !important;
      padding: 0 !important;
    }

    .fan_box .profileimage, .fan_box .name_block{
      display: none;
    }

    .fan_box .connect_action{
      padding: 0 !important;
    }

    .fan_box .connections{
      padding: 4px !important;
      margin:3px 0px 5px 0px!important;
      border: 0 !important;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
      color: #666;
    }

    span.total{
      color: #365899;
      font-weight: bold;
      background:#ECEEF5;
      padding:4px !important;
      margin:3px 0px 5px 0px!important;
      border:1px solid #E1E4ED;
     -moz-border-radius:3px;
     -webkit-border-radius:3px;
    }

span.total:hover{
     border:1px solid #6383C1;
    }

    .fan_box .connections .connections_grid {
      padding-top: 10px !important;
    }

    .fan_box .connections_grid .grid_item{
      padding: 0 10px 10px 0 !important;
    }

    .fan_box .connections_grid .grid_item .name{
      font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
      font-weight: normal;
      color: #289728 !important;
      padding-top: 1px !important;
    }

    .fan_box .connect_widget{
    position: absolute;
    bottom: 0;
    left: 0px;
    margin: 0 !important;
    }

    .fan_box .connect_widget .connect_widget_interactive_area {
    margin: 0 !important;
    }

    .fan_box .connect_widget td.connect_widget_vertical_center {
    padding: 0 !important;
    }

    /*---------------MBT's Custom Like Box End--------------*/

 

If you want to change the green fondt colour of the profile names then change this 289728

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 DaddyDesigns. 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:

• Fix Like Box errors 

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.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 7/03/2011