Custom Facebook Like Box With Mouse Hover Effect

Custom Facebook Like BoxCustomize, 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:

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:

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.

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 »

13 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. why if I logout, this widget not working? just looks blank

    please answer my question friends :)

    ReplyDelete
  2. do you have a demo for fb like box w mousehover?

    ReplyDelete
  3. @kolom

    No it will still work just fine. It is independent of your account.

    @Daus
    The demo is on my blog at the top right sidebar. :)

    ReplyDelete
  4. @anupal

    Looks like you not trying. :>

    @lovefortechnology

    Kindly shift your like box to an upper position and also see that the Facebook Like + Send Button is not present somewhere in your blog. Read this post-> http://www.mybloggertricks.com/2011/06/fixing-facebook-like-box-rendering.html

    ReplyDelete
  5. i got "Could not retrieve id for the specified page. Please verify correct href was passed in."
    i was follow your instruction correctly...

    ReplyDelete
  6. @Narsis
    MAke sure you are pasting the correct like page ID. You are getting this error because your LIKE PAGE ID is not correct.

    @RO
    Upload the CSS stylesheet file at mydatanest.com only

    ReplyDelete
  7. i applied it, musfata bhai, i've noticed mydatanest .com is always down, even i've upload my mp3 song playlist there for blog but its not workng, just bcoz site never responded or down.
    i recommend fileden.com it works like charm and its always up.

    Sahil
    http://moviesnsongz.blogspot.com

    ReplyDelete
  8. assalamu alaikum mustafa sir..
    i hope your fine...
    Sir i have one question, i add this widget on my blog, but like button is comming below like box, so how can i change the posstion of like button or i want make like button above the like box .
    sir i hope you will help me.

    ReplyDelete
  9. hey, bro i have the error-

    Could not retrieve id for the specified page. Please verify correct href was passed in..

    plz tell me what should i do.???

    ReplyDelete
  10. For whomever its not working, take the script provided by Facebook developers. In their script you just need to change header="true" to header="false" and border_color ="" to border_color="white". By doing this you all will be able to get all the above effects that my friends is talking about...

    It S|_|CKS more when you don't try things yourself.. Be Yourself and you will rock the world

    ReplyDelete
  11. i dont know how to add the like option of the my blog id please help me

    ReplyDelete
  12. Hi, Mohammad!!
    I just started a blog (on blogger) cant add this, but I really want to :( It only accepts URL gadget code.
    Please help me

    ReplyDelete