February 29, 2012

Facebook LikeBox JQuery Popup with Timer!


imageWe have published so far two versions of Facebook Likebox Jquery popups (Version1 | Version2) and today we are sharing another version with much more control options. This one includes a time counter and instead of likebox it displays a like button that links to your Fan Page and an attractive Image that also links to your fan page letting your visitors to either join your fan page by clicking the like button or by simply visiting your fan page by clicking the image. You can set for how long the widget/plugin must display before disappearing automatically. It also includes a close option. You can also specify whether you want it to show immediately as soon as a visitor enters your site or after a specified time. The JavaScript code for this plugin is created by kakiheboh termed as "LikeBox FB Fanpage Pro"  and we simply modified the code to create four different backgrounds for the likebox. The installation is extremely easy just follow these steps. This one comparatively loads faster compared to the previous facebook blogger widgets we published so far. 


Live Demo

Add Facebook LikeBox Popup To Blogger

This popup contains a likebutton instead

  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Paste the following code just above </body>

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='BloggerTricks'

//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}

#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}

.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}

#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}

#fblikepop #closeable{float:right;margin:7px 15px 0 0;}

#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}

#fblikepop #actionHolder{height:30px;overflow:hidden;}

#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}

#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}

#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}

#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}

#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>

<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>

<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>

<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                       
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/BloggerTricks',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

 

Make these important changes:

  • Replace this BloggerTricks with your Facebook username.
  • The timer is set to 30 seconds to change it simply edit timeout: 30
  • The widget appears immediately after a visiter eneters. If you want it to appear after one minute or more then edit wait: 0

Change Facebook FanPage Background Image:

The above code displays the following image:

fbbutton

To use the following images, simply replace http://mybloggertricks.googlecode.com/files/mbtlikebox2.js with anyone of the given links

BecomeFanOnFacebook

http://mybloggertricks.googlecode.com/files/mbtlikebox4.js

 

facebookbutton

http://mybloggertricks.googlecode.com/files/mbtlikebox3.js

 

like us on facebook

http://mybloggertricks.googlecode.com/files/mbtlikebox.js

Add Facebook Likebox Popup To Wordpress

Simply copy the above code and paste it juts above </body> inside your wordpress theme. You can find this tag inside your Theme settings. For those who you Genesis Framework, you may simply paste this code above </body> by going to Genesis > Theme Settings.

Need Help?

The steps are self explanatory and it works just smoothly without any troubleshooting. Add it to your blogs to increase your Facebook fan followers and drive more and more traffic from this giant social media network with over 800 Million registered users. Do let me know if you needed help. Peace pals! :)





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 »

157 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. Great One :)
    I really loved it ......

    I e-mailed you the problem with the picture .......

    ReplyDelete
  2. Nice one but each time I use it, it will affect my drop-down sidebar menu(shows featured Jobs and the rest). Please check my weblog and advice me what to do?

    My blog http://www.naijaguardianjobs.com/

    Thanks.

    ReplyDelete
  3. thanks, this is what I needed.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. edited wait to 120 but it loads immediately only. Please guide.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. when we edit timeout and wait,then also appears immediately and neither show close option nor waiting seconds

    ReplyDelete
  8. Hello admin.Your article is great but i want only one time window popup.Please do something :-)

    ReplyDelete
    Replies
    1. Did you get an answer to this question? I would like to use this but only want the popup once.

      Delete
    2. You have to add cookies as well

      Delete
  9. its not work with me

    www.melodysport.tv

    ReplyDelete
  10. i want that it should appeear a little more down how to change its position??

    ReplyDelete
  11. Can you plz tell us how to create just like you the mbt code bar written blue line vertical.. i hope you understand

    ReplyDelete
  12. Ola amigo, Hi friend, very good this box, muito bom mesmo

    ReplyDelete
  13. its displaying JOIN MYBLOGGERTRICKS and below them is my facebook fan page ,so how to change mybloggertricks with my name ?

    blog is : www.StudentsCrunch.com

    ReplyDelete
  14. i want it to use in my website
    how can i use,help me

    ReplyDelete
  15. It looks fine. I am going to try this with my design blog.

    ReplyDelete
  16. very nice...........

    www.mbboys.co.cc

    ReplyDelete
  17. thanks you admin alayına isyan hepsine mokoko thanks you
    sohbet
    chat
    sohbet odaları

    saolun varolun

    ReplyDelete
  18. very important and nice sharing,
    i will apply this on my blogger because now i am on travel and having iphone.
    see your blog soon.

    Facebook App Developer | Facebook Game Development

    ReplyDelete
  19. bro it worked fine for me but another bug is coming when i added this java script in my blog. My slider stop working! :( what will i do? :(

    This is my blog:- http://thecybertutorials.blogspot.com

    Can you help me bro?

    Thanks in advance!

    ReplyDelete
  20. close button not working...
    check my Blog : www.googlefanz.blogspot.com

    ReplyDelete
  21. it shows in every page..that will be so irritating for visitors..how can i show it only once when a visitor visits my blog?

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Does placing this widget on the first visit on my blog will affect my seo/rankings on google?

    ReplyDelete
  24. Anxiously awaiting a work around for this to only appear once per however many days we set like the other one you wrote about.

    ReplyDelete
  25. thanx for this trick ..it did help me much....

    ReplyDelete
  26. Please make a Similar Subscription Pop up Box for Blogger , I have checked the aweber one you guys provided but that's not upto the mark and i want a widget from you .

    This is awesome but i was Looking for a Pop up subscription box Please if possible create it .....I have High hopes from thsi and wonder why have not you created it yet ?

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. I rechecked the code that was causing the widget to wait before it appears but somehow the code is dead and does not work though other options are working fine.

    As soon as I get some time I will publish version 2 of this widget with changes to javascript. Explaing it here would be comprehensive. I will make sure the widget appears only once and wait time may work.

    Some of you requested tutorials for Blue headlines that I use in my posts. I will publish a tutorial on it tomorrow soon.

    Subscription box widget have already been published at version2 but we will create more better designs for that widget in coming days. All new requests have been noted down.

    Thanks a lot for liking this little gadget. :)

    ReplyDelete
  29. I have 2 Website

    1. Fullsoftdl.com


    And Another that i have recently created . Via Blogspot .


    But when i am Putting This Html/Javescript

    it is not comming What to do Please Guid me

    Here my Personal Id : Support@fullsoftdl.com

    Anyone Help me !

    ReplyDelete
  30. not working to me nothing happens ??? check Please help http://mobilemillion.blgspot.com/

    ReplyDelete
  31. @bishal

    It wont work in HTML/javascript widget. Add it directly inside your template as guided

    @mobile

    You website is not blogger based. It will still work if you add it after the opening body tag

    ReplyDelete
  32. I like the popup but how can I make it to show say every 7 days?
    Popping up on every page refresh is really annoying even to myself.

    ReplyDelete
  33. Hello , Its very Cool but has one problem, it has conflict with my jquery tools such as slideshow and others pop up slider. do u have any solution? thanx :)

    ReplyDelete
  34. Nice job but i don't want it to appears in all my pages but only in the first page.Please tell me how to do this.

    ReplyDelete
  35. Admin, close button doesn't work. Dnt know why. please can you check what is the problem. I think some people are getting this problem. Your reply will be great help for me. Thanks.

    website: www.funsms94.blogspot.com

    ReplyDelete
  36. Hi Mohammad there is a problem coming in my blog everything funtioning well only the problem is the wait seconds are not functioning.Please give me some suggestions to resolve this problem.

    http://kingofjeshurun.blogspot.in/


    Thanks & regards
    Sreedhar

    ReplyDelete
  37. Mohammad Mustafa Ahmedzai,

    Brother i am sorry i was not clear or of i have misunderstood , But i am asking for a POP-UP subscription box not static boxes ..Just like you have created this AWESOME Facebook pop up which is really very much appreciable , I want a similar pop-up for Subscription .

    Also as you said "Subscription box widget have already been published at version2" i Doubt whether it was a Pop-up or static one and if it was a Pop-up i would love to have that link of the blogpost ..

    I was able to find the Aweber popup subscribe box which was a really good one but that does not seem to work now and i was wondering if we can see it from your hands with great design .

    Cheers and thanks for all you do , No one can do that if a person is not passionate , Truly admirable !

    ReplyDelete
  38. Thats correct the wait function is not working and I am working on it. I am a little busy with some incomplete tasks. I will get back to this tutorial very soon releasing a better version.

    @admin

    Close button is working fine on all blogs. Kindly try it on your test blog first and then apply it to your main blog. :)

    @NJ
    Oh thanks for your kind and motivating remarks NJ. Well yes I did publish a simple design for likebox along with subscription box inside it. You can find the tutorial here. I will be publishing more versions of it very soon.:)

    ReplyDelete
  39. Nice post mohamad. Its very cool widget. This will surely increase the like on facebook page.

    Visit My Blog: ShineMat.Com

    ReplyDelete
  40. @Mohammad Mustafa Ahmedzai
    Bro It's still not working do i need to change my template and which is the best template for my site : android apps/games ???
    which look like my installed template??
    and can you please email me memonvicky007@gmail.com

    ReplyDelete
  41. it gr8 i am using on my blog
    www.efunnypic.com

    ReplyDelete
  42. bro i found this one ..http://conventy-btheme.blogspot.com/
    can i change its background color and will these jquery widgets works on please help....... please must reply

    ReplyDelete
  43. How to avoid the pop up from keep popping every time we clicking to other URL in the blog?

    ReplyDelete
  44. Wont this work for Blogger dynamic views templates??????

    ReplyDelete
  45. Thanks for the script.It works pretty well in my blog
    MabZTech

    one thing, i have a problem in dealing with the comments in blogger..i need to have some pagination... :(

    ReplyDelete
  46. Hello.. admin.Your article is great but i want only one time window popup.Please mail to me how to do that. hotnewsowner@gmail.com

    ReplyDelete
  47. hi, i have problem with that i have set timer to 0 and enabled the close, but it doesn't appears in chrome , mozilla, but appears in properly in ie 9, i have also changed the css code for #closable and set it to color:red; font-weight:bold;.

    But not appearing any idea?

    my site www.nsmtechie.com

    ReplyDelete
  48. This comment has been removed by the author.

    ReplyDelete
  49. Wow it totally working on my blog ! That's cool. Keep up the good work! I love reading articles in this blog.
    From 1malaysianews.net

    ReplyDelete
  50. Awesome!!! Just check out why I love MBT... visit My Site and see the reason.

    Thanks,
    Mohammad

    ReplyDelete
  51. mind blasting
    thanks for this dude
    www.tipsviablogging.in

    (^-^)...

    ReplyDelete
  52. thanks.. its working... i love it..

    ReplyDelete
  53. hy admin its gud i had added it my site but my i have reason, my jquary media bar scroler did't work proper after apply your tutorial and also did't work light box effect on images plz visit and tell me the soloution,,,,www.Shaan-ali.blogspot.com..and email me if u can at shaan.skpweb@gmail.com

    ReplyDelete
  54. this widget is super awesome that what i was looking for
    But i have problem with jquery code conflict when i instal this code to my template my slider stop working
    i did try to delete this code <.........http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript slide.........> slider starts working fine but facebook like box dosnt popup :(.... same problem with my back to top button ... if anyone know hot to fix this problem please let me know...
    www.youhavetocit.com
    Thanks!

    ReplyDelete
  55. is anybody going to help ? i am really need help to resolve this problem if anybody have idea how to fix jquery code conflicts PLEASE CONTACT ME ...

    ReplyDelete
  56. I Want This For HTML-CSS Website...???
    What Should I Do?

    ReplyDelete
  57. Very nice pop up timer widget but how to add pop up with hover effect facebook like box

    ReplyDelete
  58. I strongly support this script. however, I do not really like the look of the pop up window appears when opening a new page. how to set up the popup that appears only once when opening the blog. because it could make visitors uncomfortable blog. please help with this problem. Thank you.

    contact me at YM: ngecamp, G + budiseplawan or my blog
    http://ngecamp.blogspot.com

    ReplyDelete
  59. great widjet
    great work
    i have 2 problems
    1. the close button doesn't appear
    2. if you click the logo, it directs you in wrong address

    ReplyDelete
  60. We want only one time window popup please Mr.Admin..Thanks

    Hamidiblogs.blogspot.com

    ReplyDelete
  61. somehow it dissapeared after working for sometimes

    ReplyDelete
  62. close button not appears
    plz help

    ReplyDelete
  63. This comment has been removed by the author.

    ReplyDelete
  64. This comment has been removed by the author.

    ReplyDelete
  65. Hii, i just tried to use it in my blog but its not working no LIKE button is there plzz help

    here is my blog
    http://tipsntrickss4u.blogspot.in/

    ReplyDelete
  66. its worked for me!!!!!!!!!!
    thanks for this wonderful post ,
    the pics of liked people doesn't appear in the pop up box , how to make it visible
    http://mechfuturekings.blogspot.com

    ReplyDelete
  67. i found a way to make pics visible in popup fb like box
    i have changed the value of "height30px to 60" in the following line , and change the timeout to some extend to load the pics in pop up box .. "timeout to 60"

    #fblikepop #actionHolder{height:60px;overflow:hidden;}

    now the pics of of liked people are visible cleanly , check my site
    http://mechfuturekings.blogspot.com

    ReplyDelete
  68. Hola cuando le dan like al popup les vuelve a aparecer a los usuarios. Como le hago para que cuando le den click en Like ya no les vuelva aparecer ?

    ReplyDelete
  69. Would you mind to add subscribe button near by LIKE button? please replay me as soon as you get my comment! Thanks

    ReplyDelete
  70. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 video hosting| html5 hosting

    ReplyDelete
  71. This comment has been removed by the author.

    ReplyDelete
  72. This comment has been removed by the author.

    ReplyDelete
  73. hii dude i want some help. please tell me how popup ads in blog....i see in some blog that when some buddy enter in those blog and click any where in blog page then some ads open automatically ..how they edit html for this type pops...plzz help me..

    ReplyDelete
  74. hii dude i want some help. please tell me how popup ads in blog....i see in some blog that when some buddy enter in those blog and click any where in blog page then some ads open automatically ..how they edit html for this type pops...plzz help me..
    this is my blog thehackeroftheworld.blogspot.in

    ReplyDelete
  75. There is a problem in popup of fan page that it popup if any one like it already ..plzz tell me how stop pop if some buddy like my fan page ..
    My blog thehackeroftheworld.blogspot.in

    ReplyDelete
  76. I have the same problem, the code does not check whether the person is actually a fan and do not write to the cookie. As a result, the person still appears to have been a fan. The script is wonderful and I hope that this will be corrected sometime :) Great job.

    ReplyDelete
  77. Hey Bro!! thanks It helped me alot!!!

    ReplyDelete
  78. I really appreciate your post. It gives an outstanding idea that is very helpful for all the people on the web.

    Regards

    Rapidleech2day

    ReplyDelete
  79. please make this this pop up only on home page..it is irritating to visitors!

    ReplyDelete
  80. Assalam 0 Alikum, Mohammad Bro! You are awesome, i have added both facebook likeboxes, 1. this one, and 2. Facebook likebox Slider, both are working smoothly.

    Here's my blog Urdu Poetry

    ReplyDelete
  81. Thanks for this! I've searched a lot for the FB pop-ups but found this one as the best! How can I set the pop-up to appear in just one page? Hope you'll be able to work on it soon. Many thanks!

    www.themommist.com

    ReplyDelete
  82. I successfully added it there, http://curioussoft.blogspot.com/

    ReplyDelete
  83. Thanks i am looking to implement it on wordpress will the popup load only once i want it to show to a user only once he enters the site not every time

    ReplyDelete
  84. it is not working on my wordpress blog http://neeshu.com can you see the theme and tell my why it is happening i copied and pasted the code below the starting body tag

    ReplyDelete
  85. Wow nice snippet. i will use this on www.klixindia.com

    ReplyDelete
  86. i like it
    visit back jogja-mp3.blogspot.com

    ReplyDelete
  87. great!

    a2-studios.blogspot.com
    Cricket gaming Mods & Patches (IPL5 Patch)

    ReplyDelete
  88. please visit to my portfolio artwoks blog :)
    http://www.terawangsuji.blogspot.com/

    ReplyDelete
  89. WoW .. Nice Article ^^ I like it ,.

    ReplyDelete
  90. its pop up every time.. how fix to one time?

    ReplyDelete
  91. hm... it is similar to this fbcontentlock(dot)blogspot(dot)com
    btw, thanks MBT =D

    ReplyDelete
  92. YOu are just awesome dude thanks. thanks for this amazing help. I went to the site but wasn't able to get it right

    ReplyDelete
  93. Add in the very important; but I think coercion is bad for the visitor
    Blogger To Free

    ReplyDelete
  94. i cant see close option.. so i removed this widget. check once or come up with new one by modifiying this. ThanQ

    ReplyDelete
  95. hey admin, i loved your like box but unfortunately it pops up again after each page refresh and it gets really annoying. what to do??

    ReplyDelete
  96. hey dude there is a bug in this one,in my custom template it made Jquery slider to stop working when i added and as soon as i deleted this script slider started working

    checkout once http://copycatsrevealed.blogspot.in

    ReplyDelete
  97. i have the same problem, Slider doesnt works when i add this script.

    ReplyDelete
  98. i want a combination pop out box with rss subscribe and fb like can u plzz help me out

    ReplyDelete
  99. I tried but not done at http://www.touristscountry.com/

    ReplyDelete
  100. took me 3 days and had to mix up some others code and still the code isn't perfect becauser likers still see the popup and get only 10min break.. not acceptable

    they can't get they need to undo and relike to get a one month popup free.

    so it s pretty tough to implement this (i m speaking of a website)

    if u see the popup like me always coming back, it s because the cookie isn't setup by the script. that was the big challenge for me

    ReplyDelete
  101. Hello I cant seem to get either of the 3 codes for the popup boxes to work in the html widget I copied and replaced it for all 3 styles and just does not work for me any clues why

    ReplyDelete
  102. if u see the popup like me always coming back Surf Movies

    ReplyDelete
  103. Wow your blog is so wonderfull ... i love
    please check my blog

    www.annajeh.com

    ReplyDelete
  104. It doesnt work on my blog http://www.rhipplemedia.com/, any idea how I can fix it?

    ReplyDelete
  105. This comment has been removed by the author.

    ReplyDelete
  106. I'm loving your blog, thank you for everything. turk chat

    ReplyDelete
  107. why it does not work on my blog ? what is timeout ? what is wait ?

    ReplyDelete
  108. hi
    thank you so much for this tutoria
    i have a question , i want to add this code just to appear in a specified page not all the blog , so please can you help me out for this one

    ReplyDelete
  109. @Admin

    ah i gorgot , i'm using wordpress

    ReplyDelete
  110. i have tried all facebook popup like box v1 ,v2 ,v3 on my blog but none of them is working www.evilarslan.blogspot.com please help me..

    ReplyDelete
  111. I did like the script, but I want it to use my own “APP ID” instead the generic FB app id when people clicks on like, which then redirects to FB Login Screen (where its the FB Generic App ID) So I wanna use my own instead? Possible.

    ReplyDelete
  112. Nice Info... thanks..
    Please visit :http://www.komputermedia.com/

    ReplyDelete
  113. It is not working in my blog....please help me.
    http://softonier.blogspot.com

    ReplyDelete
  114. Not Working On Ma Blog :(

    www.bikiniloverx.blogspot.com

    ReplyDelete
  115. How can I darken more the site during the opening of the window?

    ReplyDelete
  116. How can I darken more the site during the opening of the window?

    ReplyDelete
  117. This comment has been removed by the author.

    ReplyDelete
  118. This comment has been removed by the author.

    ReplyDelete
  119. Hi! This Pop-up Facebook Likebox is really helpful. It helps my blog's FB Page to reach 5,000 likes. But one day, the pop-up stops working and I couldnt find the reason why. Can you please help me. I really want this pop-up to work again in my blog.
    Here's my blog: http://www.allanistheman.blogspot.com/

    Thanks!

    ReplyDelete
  120. din't work with my blog
    http://www.akubloggerr.com

    ReplyDelete
  121. thank you for this tutorial, i will make an article about this in Indonesia with my own word, this website is the best references for many blogger.

    ReplyDelete
  122. It's not working with my blog: http://www.amschoirs.blogspot.com

    ReplyDelete
  123. Same, not working with my blog neither: http://www.tipsgraphdesign.com/
    Please upgrade the new tricks if you do have time, thanks :D

    ReplyDelete
  124. Fix this please. It doesn't work.

    ReplyDelete
  125. Thanks for sharing out such a great informative content are extremely fastidious.
    buy facebook followers here

    ReplyDelete
  126. Great blog you people have made here on this blog site, I will absolutely appreciate your work.pirater un compte facebook

    ReplyDelete
  127. Your blog is such like that I have run out of words!!! Really superb
    bubblegum casting

    ReplyDelete
  128. Thanks admin its really a good and hardworking job currently doing you are. This help me a lot to get more likes on my Facebook page, Thanks again. Visit http://www.filmaxtv.com 4 watch UK, USA Worldwide HD Tv channels online Free :)

    ReplyDelete
  129. this link not working plz update it


    404. That’s an error.

    The requested URL /files/mbtlikebox4.js was not found on this server. That’s all we know.

    ReplyDelete