July 3, 2011

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 »

23 comments : Post Yours! Read Comment Policy ▼
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. when I put it to work on my demo page http://flasharxeia.blogspot.com/ l works perfectly but when I try to on my website http://www.lovefortechnology.com/ not working any idea;

    ReplyDelete
  5. @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
  6. This comment has been removed by the author.

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

    ReplyDelete
  8. hi guys, i had the same problems just use this css-code http://file1.npage.de/004109/62/html/fb.css its the one the author postet

    ReplyDelete
  9. @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
  10. 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
  11. Okay, I got some fix with this nice tutorial, I made this thing works for me, and i got you the direct link: http://testingforsb.atwebpages.com/fbgreen.css (for the green font)
    http://testingforsb.atwebpages.com/fb.css (for red font>

    Please red the complete solution with of course credits and back links to MBT! simplifiedblogging.com

    ReplyDelete
  12. 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
  13. 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
  14. This comment has been removed by the author.

    ReplyDelete
  15. 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
  16. Thanks for this nice tut... Works like a charm.

    Is it possible to change the text "1,008 people like myfacebook page." by something like : "name1, name2 and 1,006 others like this." ??

    Any help for this ??

    thanks again

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

    ReplyDelete
  18. hmm site are really great impressive to me, stuff is creative.

    Customize Facebook Apps

    ReplyDelete
  19. 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

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!