jQuery Popup For Facebook LikeBox

Update: Version 2 has been released. Please find it here: Facebook Likebox popup V2

jquery popup facebook likeboxThis widget pops up a jQuery window containing Facebook likebox as soon as a new visitor arrives. This plugin can be added to both Blogger Blogs and Wordpress. I am using here the same jQuery effect introduced by sidhart in JQuery Popup Just Like Aweber Subscription Form. Lightbox effects like this one can be widely seen on many blogs now. It will help you increase your Facebook Fans greatly and our previous version will surely increase the number of your RSS subscribers. In my next tutorials I will make sure to make it more interactive with social media links and a complete version with everything you may need.

I will not be providing a DEMO for this because you can try it live in our HTML Editor to see how it works.

Tip: Copy the code given in step#4 and paste it inside this editor.

Try it now!

How it works?

This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every pageview. It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.

Add Facebook LikeBox inside Jquery Popup in Blogger

I am discussing here steps for blogger but if you know how to deal simple HTML code then you can easily add it to your wordpress blog too.

  1. Go To Blogger > Design
  2. Click choose a gadget
  3. Select HTML/javascript widget
  4. Paste the following code inside it


   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
#cboxOverlay{background:#000;opacity:0.5 !important;}
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);

#cboxTopLeft{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*   Facebook Likebox popup For Blogger
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
box-shadow: 5px 5px 5px #CCCCCC;
line-height:25px; font-family:arial !important;
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
a:link, a:visited {
.demo {

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script src="http://downloads.mybloggertricks.com/jquery.colorbox-min.js"></script>
<script type="text/javascript">
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
    <!-- This contains the hidden content for inline calls -->
        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> 

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>


Make this simple change:

  • Replace bloggertricks with your facebook username.

Update: If your Facebook URL is too long and contains numbers then you may first create a branded Facebook username in seconds at Facebook.com/username

   5.   Hit the save button. Drag the widget to anywhere on your right sidebar.

     6. Click the orange save button towards top right.

done! Visit your blogs to see it poping up just beautifully. To review the widget just delete your browser cookies and refresh the page to see it appearing again.

Want the widget to appear Repeatedly

If you want to prompt the likebox every time the visitor enters your blog then simply delete this *30 from the code above.

Do let me know if you needed more help. Peace and blessings pals! :)

Need Quick Help within 24 Hours? ASK NOW

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 »

95 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. you are always great man you are always great

    thanks mohammed

  2. why dont you redirect all your templates links and test lab to subdomain to your blog
    as zailab.blogspot.com to zailab.mybloggertricks.com this will increase your alexa rank

    i would like also to know the pack that you bought from hostgrator name and if i will buy i will buy under your affilate link

  3. Hey Mohd.Dude Whenever i embed this popup thing in my blog, my featured and popular section tabs opend can you tell me the reason why its happend like this ?

  4. and can you please tell me , how to make subdoamin of my englishsongz.com

  5. This is what im waiting for long time!!
    I did all the step, including delete cookies.. BUT.. WHY IT DOESNT WORK ON MY BLOG?? ;_(((((

    Mohammad, pls analyze it for me.. why my template make it doesnt work. ;_O i want it badly..

    or anyone.. pls try go to my blog here: http://muxlimo.blogspot.com
    if it works on You.. pls send CBOX message to me.. pls..thanks.. ;_O

    1. same here...its not wroking for mine too :(

  6. great share man!!! will try in my site

  7. I delete * 30 but it appears only one time :(

  8. Mine Not Working After Replace The bloggerticks to mine 1 :( please help http://www.tamilanspace.net

  9. Can you please make a popup containing all social bookmarking. E.g, Facebook, twitter, rss subscribe and etc

  10. thx u very much dear bro .. its really nice widget five star *****

  11. Thanks For The Credit Sir :)

  12. thx for your all best guidelines .. now i subscribe your page via email .. i also follow u on G+ :).. also i want to give thx dear Sidharth for this unique widget :).. right now i have run 2 blog onestepdownload.blogspot.com & jaycutlerbest.blogspot.com
    i need more guidelines in future.. and bast of luck dear Mohammad Mustafa Ahmedzai bro .. thx again u Rock

  13. lokkin great

  14. can you tell me please how to make a subscribtion as mashable so that the subscriber choose the topic that he want to follow

    i will explain more

    when you see the subscribtion box you see check boxes you choose the topic that you want can i make this in blogger

  15. @daven
    u r Widget working Fine I visited U r website Working Great ?

    @ MUXLIMO on 7:18 AM, January 04, 2012 said... # 7
    Buddy It Is not working for me At Beginning Problems You Might have

    1)If your Website contain Any redirection Script then This Is not going to Work Like i Had Adfoc.us Redirection ..just look at u r scripts ?
    2)Replace bloggertricks to u r Facebook Page Id if it is wrong then it might not work [look carefully at u r id my Id Contains number Also :)]

    @mohd Simply i had not any Word to Describe u r Work i am Speech-Less Bro Forgive Me :)
    Just visit My Website

  16. Can i make the widget to show again repeatidly only at those who didn't click like?

  17. @Unknown
    Ah,.. thank you very much for replying me, Umknown Bro.. I replaced the ID to mine and all i can remember, i never put any redirect javascript to my template.. i dont know how to make it work.. ;(

    btw, thanks again for the suggestion, Bro.. God Bless You :)

  18. not working for me i have installed it already

  19. check my blog it's not working properly
    give me any suggestion for modifying


  20. Hi there..

    Awesome widget! Nice job, well done you did a great job mate. This widget will make our blogger hosted blog look more pro and modern i guess. ;) My blog Camcorder buying guide Thanks MBT!

  21. For those of you, who can't make it work, please make sure that you drag your widget to extreme bottom right sidebar. Place it below all widgets on your right sidebar.
    If it still didn't work then please delete this line from the code and save and check again:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

    Let me know everybody.


    Unfortunately that can't be done because zailab is a separate blogger blog and subdomains are only possible for a blog having the main domain reserved for itself like mbt.
    For hosting guidelines please give me some time to write a detailed post on it. I will share coupon codes too that may provide you with free first three months. A lot of readers have asked me on this therefore I needed to first assure you why should you choose hostgator and then I will skip directly on how can you register for free months and enjoy the best discount possible. I will answer all your questions on hosting in my coming posts buddy. :)

    For that mashable type subscription you will need special development which is costly. They are putting a lot of bucks in providing such category subscription. Not possible with feedburner or even aweber.

    @English songs
    My next posts are on web hosting please stay tuned.


    My bad that I am reading your comment so late dear. Please apply the method I shared above and let me know else I will personally help you for being a loyal reader. :)

    @MR. DJ
    Please instead of deleting try putting this *0 in place of *30

    @babu singh
    Thanks for your kind feedback. You will be treated exceptionally from today onwards for being a loyal reader now. Always welcomed. :>

    Most welcomed buddy :>

    @M saad
    I am working on it buddy, will be served very soon.


    Thanks buddy for helping others. Really appreciated it :)

    @Ayush agarwal
    You can change its colour so that it may not display too much but kindly keep it intact as the only favour pal.

    @ndark @kilaruteja
    Try the method I shared above.

    Most welcomed pal :)

  22. For some reason doesn't work for my page. Which part of my link I need to replace?


    Thanks for this great products

  23. @JoseDelgado hey man I had the same problem and it took like 3 hours to figure it out lol, but you jus have to replace "BLOGGERTRICKS" with--> "pages/Amardon-War-Field/288829401161546" i hope you can make it work, and Mohammad your blog is amazing!!!

  24. OMG.. i'm looking for this tutorial at a long time.. i'm so happy.. thanks MBT for this awesome tutorial.. Best regards: Mr.DewaTV

  25. Update

    I have updated the point on Facebook Username URL. please find it above step#5

    You will have to create Facebook usernames and this is important for your future use too else you can get the Facebook Liklebox code from this page

    You will like Version 2 a lot!

  26. @Mohammad Mustafa Ahmedzai
    Thanks for this reply, Brother.. its OK i know u're so busy there.. btw, it stil doesnt work, Bro.. (*sad) might be caused by my transparent image for my template background??

  27. amazing man you r superb man visit my blog http://mithilaworld.blogspot.com/

  28. Hi! i have a problem with this! I have Nivo's slider and when i add this script, then slider stops and is not loading the images.... I asked in Nivo's forums and they told me:
    "The reason is probably related to that code that you're trying to add containing an older version of jQuery.
    Try adding it in and let us know - we can then better diagnose the issue.
    -- Michael"

    Can you help me maybe? :)

  29. Please Re-Upload Images ... ImgBoot.com Shows Error.. All Images Are Deleted :(

  30. Yes i have the same problem reupload the imags pleasee!!!

  31. Please update the post i am also getting the error on image it says go to www.imgboot.com

  32. Replace the link with this :)

    border: http://i.imgur.com/2rIKc.png

    controls: http://i.imgur.com/ydcPr.png

    loading: http://i.imgur.com/MtP9b.gif

    loading_background: http://i.imgur.com/s7h4D.png

  33. @MAX89X hey i saw your blog and the widget is working fine please can you upload your whole text


  34. Update

    Images have been updated and the updated code is highlighted in blue color. You can now use the updated code to make things work just perfectly :)


    I have replaced the jquery link with the most updated code. It will work now in your case too. :>

  35. Thanx soo much 4 this!

    It's working perfectly on my blog and i switched to version 2 ;D

    will the code still work if i store the images on my own server?

    plus I was wondering, is there a way to change code so that it stops appearing to people who have already liked the page?

    thanx 4 ur awesome work

  36. could not retrieve id for the specified page. Please verify correct href was passed in. :(((( y so.?

  37. mine is not working too buddy ...why's that ??? :((((

  38. Dude try this to wrap text in the box..

    .comment-text {
    word-wrap: break-word;

  39. I deleted *30, in order pop-up likebox every time I visit my blog, but it doesn't works. Do you know what the problem could be?

  40. Dude, i think this popup is great. But i think this popup can be much better if you can hide the close button and make the popup auto close after readers click 'LIKE'.. can you make that?

  41. Not working for my blog.
    Earlier worked when i had default blogger template.

    Please help me.


  42. how can i get this to work in wordpress hosted blog ?

  43. Hey thanks for the Excellent Code !!!

    I have a Query - If I want to restrict the user not to close the popup by cliking out the window. they should close only by CLOSE button in the popup..please guide me what to change ?

  44. Its Ok but not work the slider

  45. it can not for my blog too when I change the username of my facebook

  46. Is there any thing for my wordpress website Wide Info to pop up like box ?

  47. Thanks.....Working Great.....
    Demo: http://bollywood-cleavages.blogspot.in/

  48. its def not working bro try to resolve the issue


  49. should i just put my username or is it like facebook.com and then your user name??

  50. This comment has been removed by the author.

  51. sir this script don't working in my blog .

    plz help me


  52. thanks for the great widget but i also have the problem after i delete *30 the pop up is not pops up every time

  53. sir mohammad

    is there any way to implement this on my Joomla website?

  54. check my site here. www.123inztructor.com

  55. Than you very much...Working fine for me...

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

    What should i do Master????

  57. thanks sir! i'm a daily visitor of this site! but after adding this pop up box on my site, the slider stopped working. if you could fix it, it would be much appreciated! thanks again for your great help!

  58. assalamu alaikum, your popup is working fine but the jquery version 1.6.1 is conflicting with by sidebar tab widget for which i have already use jquery version 1.8.0 .Please help me to avoid this conflite. I tried every thing delete cookies, removed jquery script version 1.6.1... Nothing worked! please help!

  59. Hi I have tried all possible ways to do this but failed...do u mind helping me? I love this widget so much.

  60. hai my god...this is not working for my site please help me out my blog is myandhramp3.in

  61. Salam: Once again BTL is on the top of providing best and easiest way to enhance the performance of our blog. I was looking for this kind of tool all tutorials I found are so difficult for new bloggers to understand but this is just perfect ready to put just 1 easy change and such beautiful pop-up for facebook likes..Thanks sir..
    this is running very well at:

  62. This comment has been removed by the author.

  63. if I change the-- *30; to *10, does that means visitor will get pop every 10days only?

    also how do I change the orange text to black colour font. pls help me.

  64. This comment has been removed by the author.

  65. Hi I am a regular follower of your blog, you are really rocking. recently i have observed that for every search query related to blog out of 10 queries your blog is coming in google first page for 9 qieries its awesome...

    And i have tried to add this widget to my blog www.idleindia.com, and i have added successfully but here after adding this widget my Jquery slider is not working. can you please suggest here, i want both slider and this widget.

  66. I tried replacing bloggertricks with the following and nothing worked:

    Can't seem to get the pop up to show up! What am I doing wrong?

  67. @Louise Morgan

    I also tried changing my Facebook user name to thefrugalteacher and it's still not working :-(

  68. it is working guys on my website

    Urdu Poetry

    i have made some changing in facebook popup window code so its working fine and generating a lot of likes ...

  69. i have a serious problem here, i added this to my blog and it worked just fine, but now i changed something in the template and it's not working anymore ! and i don't have any idea what i have done or change but i think it's something about jquery thingy so plz help :(

  70. hey admin..first of all you are best and your effort is really fantastic...I use this widgets but it is not working in my blog..plz its my need...plz plz check it....i think there is 2 jquery so it's problem may be happened...so plz if you solve it .it is really good for me...my blog address is www.nikhilgodhani.blogspot.com

  71. Assalamu alaikum ya Mohammad. I'm Diky Andrean, Newbie blogger from Indonesia. I want to use this cool widget on my lovely blog, but it can't be work :( . Please help me ....
    Answer it on my blog right ;)

  72. UPDATE

    I just update the scripts and it works just fine now! Apologies for the inconvenience caused. :)

  73. Fantastic post and Thanks for sharing this informative post. It's very helpful. by HRM 531 Week 3

  74. cool and must have widget


  75. I'm delighted to mature so additional functional and informative collection on your web site.
    cheap facebook followers for sale

  76. I tried most of available codes but only this one is working as i want thank you very nuch dear admin

  77. Hi, my feature slider will not work if i have this code in any of my widgets : -script

    when i remove it, the pop up box will not work. Is there any work around for both to work? Thanks

  78. NIce tutorial man.. Yhank you and more power

  79. Great webpage buddy, I am going to notify this to all my friends and contacts as well.
    how to increase likes on facebook page

  80. This is very fast lie box, Actually there are many like box but most are made by many extra coding, so they also making blog more heavy and affecting blog's speed, You like is very fast and also working, Thanks sir.