Custom Facebook Like Box With Mouse Hover Effect

Posted by : ADMIN Wednesday 30 May 2012

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.pctricks8.blogspot.in' 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!