jQuery Facebook Likebox Popup For Blogger - v2

Facebook Likebox popup
The previous version of jquery popup for Facebook Like box was warmly welcomed by all of you. Most of you requested social media links to be added to it along with a RSS subscription form. Normally it's a standard to keep it simple with just a subscribe form and Likebox and adding social media links does not make sense here. However if you wish to have them then please vote by posting your comments. I am a little busy with some other tasks therefore designed this new version in hurry. You can easily add it to your blogger blogs as well as wordpress blogs. The steps are exactly the same and we will be using the same Lightbox script that we used in creating a simple Subscribe Popup form. I will further troubleshoot some problems that you faced with the earlier version. Lets get to work then!
If you are using the previous version then you can simply replace the code with this new one. The steps are exactly the same. To Learn how it works Please consult the details in earlier version.
Tip: Copy the code given in step#4 and paste it inside this editor to see a live demo.

Try it now!

Add Facebook Likebox Popup To Blogger

  1. Go To Blogger > Design
  2. Click choose a gadget
  3. Select HTML/javascript widget
  4. Paste the following code inside it
    /* Jquery Facebook Likebox Popup Version 2.0 by MBT    MyBloggerTricks.com
    #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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJGtcjl0fbllybMdFYPkbLQ4pcrLfbCDAmDHSJ6FfTNPtwmg1w1xXPG5t73UDEhDX8DsyPG06PCn5AMzqve2uwbIqk3_NXdXhwbMlQ-zq6lql-hYhbSZEbpfEtvV5sYo3QqZkYwasHz4/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBJGtcjl0fbllybMdFYPkbLQ4pcrLfbCDAmDHSJ6FfTNPtwmg1w1xXPG5t73UDEhDX8DsyPG06PCn5AMzqve2uwbIqk3_NXdXhwbMlQ-zq6lql-hYhbSZEbpfEtvV5sYo3QqZkYwasHz4/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHNn0zt60-8gMUSitM9tSJ6YL36TCY3PP1BedTRXWWbx0szRykLRl3OVzr5B4JsXcRTxAG2PQKcC4yH3SSDq0P3CzgCOkXFGsxAEind1LdQPHWmaEk-OLqBEhgSTqlC4KTYCr4S9RotQQ/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIg73hax6QDU26wuPMHljgx0_nn0Y6pX6AqvB1Ybx_sCiUUQmL8VNb65Ej20B0BlS20PcaaEtvGcMqRErKPM-DIBUzH4Jo6JU_a4LwEBhQZNyF3GyAbDXEMhevD0ASSPGNTtCg6hvMJmw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4n1EPvO6PB6UbspH7CHSVWrsP0Lo3gUFkXkhrjXV3n_fpuBqAf26CXPNxvI9yuxdXpZVZpF45ngdBGpfMCwCnU4oCulSbKjrY9-FrSgeXN1N37LjSXfcocEyxy-hMwyqCD_B7DAgIFx0/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 Version 2.0
    #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: 18px !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 {

/* ---------MBT Subscribe Form---------- */
    .box-title1 {
    border:1px solid #ddd;
    box-shadow: 5px 5px 5px #CCCCCC;
  margin: 10px 0;

background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
<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"});
        <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>
<div class="box-title1 ">
<h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
<!--Please Do not Remove the Credits -->
    <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 these changes:
  • The text in brown can be changed to anything you wish. You can leave it as default.
  •  *30 Setting this value will effect cookie refreshment. I have set the popup to appear only once to the visitor and this popup will appear again after 30 days. If you wish to display popup to your visitors after a week then set 30 to 7. Similar if you want it to appear daily then set 30 to 1. Note that if you set the value to low then it can irritate your daily readers.
  • Replace bloggertricks with your facebook username. If your facebook username is too long and includes numbers then do not panic and first create a Branded Facebook username for your blog in seconds by going to Facebook.com/username
  • Next replace twice tntbystc with your feed title. It appear at the end of your feed link. In my case it is:
    5.  Save the widget and drag the widget anywhere on your right sidebar. Place it below all widgets on your right sidebar
     6. Finally Click the orange save button towards top right.
     7.  Done!
Visit your blogs and see it popping up just fine! Remember as we already mentioned on previous post that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again.
It will look like this:
jquery popup for likebox

Need Help?

I hope that all unanswered queries on the previous tutorial are covered in this post. If you still need help in changing colors and other stuff then you are most welcomed to post your queries below. Have a nice day pals. 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 »


We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. looks beautiful.how can we increase the width of the box and and same time decrease the length.

  2. This comment has been removed by the author.

  3. Thx Mohammed for this tip.
    Is it possible to display this likebox after a certain delay?

  4. Thanks Mohammed,great work... and you are the best

    Mohammed,when adding your Mashable sharing widget to html,error

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Attribute "rel" was already specified for element "a".

    what's the problem...? Thanks in advance....

  5. Great Brother..! I'll try it..
    btw, i just sent You email, Bro.. :)

  6. I need all time display. visit mt site and see pop up.

  7. it not work in my bloge www.melodysport.tv whayyyyyyyyyyyyyyyy?

  8. Admin,Please write a tutorial for how to add this "http://www.risepk.com/posts/3-in-one-social-slide-widget/" to blogger.

  9. v2 is awesome more fixes

  10. Hello I am back, I really wanted to add this pop up like box on my blog but I have the problem in customizing it sir to fit my design because I can only preview this once in your html editor. Is there any other way I can preview this things several times until I will be done with the customization I want?

    One more thing, I know you are kind enough to write a tutorial about this. Since my blog is about building a community of bloggers, I want to design a like function on readers comments. I want to host a giveaway or recognition to the most like comments at the comment section of my blog but I cannot really make it until such time I decided to bring this problem here. Wordpress blogs offers the thumbs up and thumbs down function at the comment section, or facebook can do best, is that possible to design such function at blogger comment section Sir? So far I added the addthis function just before the reply button, but that's not enough to do the readers engagement. I hope you can do the trick about this at your convenience.

    Looking forward

    Prime Aque @SB

  11. if i use this code. my premium blogger templates widget is block.


    example: never change images in my blog sites.




  13. Great One Mohammad Bhai. :)

  14. For those of you who are are getting errors. Please do not add it inside the template directly just add it to HTML/Javascript widget.

    @Prime Aque

    To preview it again just delete cookie of your browser

    Unfortunately the voting feature is not yet supported by blogger blogs. We can add a like button to it but that would badly effect the load time. Never compromise load time for anything

    Please read this Change Author comment style

  15. Wow.. it's so cool.
    Thanks a lot! Keep go on!

  16. this is working fine then last one

  17. i have done exaclty as you have instructed, but i cant see it,please help me to fix it, my blog is http://green-tv.blogspot.com/

  18. @ Jasmine :- hi just replace thr your fan page name Green.Tv.Blog ! step 1 - delete "bloggertricks" add thr "Green.Tv.Blog" i think its help u :) happy blogging

  19. Bro it's working on my blog but not exactly the same way it should be working. My slider stopped working after i added this box and my blog archive are being shown twice just after adding this. As soon as i remove it everything works fine.

  20. images problem please fix it........ imgboot shows error .. please upload images in blogger domain

  21. man can you upload the images on blogger please!!!

  22. 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

  23. 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 :)

  24. Hello, everything is working amazingly!! but when I put my links, the box doesn't pop up anymore even when tested on different browsers. can you please help me? :) i would really appreciate it!

  25. @Farah
    Please Go To your Browser Clear History > Delete Cookies

    Refresh the page and it will show up again. It appears only once in 30 days to the visitor.

  26. thank u very much!!~

  27. Buddy i've tried but i have problems, when i add the popup i got my picture slider frozen up, and everything else is just messed up :(... but the popup is working reat, so what could it be ??? :(

  28. Thanx soo much 4 this!
    It's working perfectly on my blog

    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

  29. This comment has been removed by the author.

  30. This comment has been removed by the author.

  31. Mohammad thank you for your great tips that i use a lot in my bloggspot...I just wanted to ask you if there is a sollution for the disapear of a tab widget (you can find it here http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html ) i mean that if i place your widget under that the tabs are disapear if i placed it up from that your gadget did not work ...till now i choosed yours to work but i would like to have them both tnku a lot... you can see my page at http://scandalistiko.blogspot.com/ tnku!

  32. NOT WORKING IN MY BLOG PLEASE HELP :( http://www.tamilanspace.net

  33. Thank Mohammad for your time and work! I'm re-asking the question of crack-net... can you have a delay of let say 15s before the pop up appears?? (personally before I subscribe, I like to have a feel of the content)
    And instead of burn feed can we include a code for people to subscribe to mailshimp. Thank you for your help!! Moutassem

  34. Not working for my current template,earlier worked with blogger default template


    Help me..!!

  35. How can i make this popup to be scrolling on page ? thanks

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

  37. thanks great man (mohammad

  38. I wanna Show This Popup on Every time When My visitors Visits another page of my site on Same Day from Same Browser.
    What Can I do For It?
    please replay Soon

  39. Greetings Mohammad from Greece! This a really nice and useful pop-up gadget for all bloggers i believe! I was waiting a long time for this! But i can't make it work with my template :( Seems that is conflicting with my template slider. When i add in an html widget your code, it's working and i can see the pop-up window BUT my slider freezes :( I also tried to fix it by removing the following code <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> but the pop-up window doesn't show up at all. Yes i 've cleared the browser's cookies in every attempt that i made! Can you Help me please?
    Thank you in advance and keep up the great work!

  40. Dear Mohammad Sir,
    This widget not working on my blog, may be because I am using various jquery widget, but when I try on other test blog it works fine, could you please help me to solve the conflicts, my blog gizpad.blogspot.in.

    Thanks in advance

  41. The script works fine but it crashes my scroll bar at the top of 2 sites ...

    thank you anyway ;)

  42. Brother,,
    This widget is awesome
    But my blog www.eenadueducation.net not showing this popup
    Please help me

  43. help !!!! le pop up ne fonctionne pas !!!!

  44. It will be better if it pop up alwyas for person who not liked my fb page of Smartphonecity.in :D

  45. Hello, how to make this box be scrolled with the page.

  46. hi mohammad after adding the script the slider stops working
    how to correct it

  47. How to get the same in Dynamic Blogger

  48. Thanks so much for the plugin and tutorial, I just installed it on my site www.karaokemusic4u.com it works like charm thanks once again.

  49. Hello mohammad first of all thanks to you for providing such a great widgets .

    why the facebook popup is not displaying always when I open my blog
    sometimes only displaying .

    Now it is not displaying at once plz tell me what's the problem?
    I hope you will reply soon

    my blog is http://bankexamsportal.com

  50. i tried to add this to website. but facebook like box is not appearing in pop up. i have changed the facebook name correctly.
    how to correct..
    plz help.

  51. Not working on my blog :-(
    what to do now mustafa

  52. Working for me....but Master,can you show how to make it appears when we open to a new labels of the post???

  53. @MaX

    Even i'm having the same problem with by blog. This jquery version 1.6.1 is conflicting with by sidebar jaquery version 1.8.0... please help!

  54. Amazing work! Mohammad. I wanted to know if there is a way to allow some time for the visitor to browse my blog before the pop up comes up? say like 60 seconds. Thanks for all your help and support to all fellow bloggers

  55. its not wrkng for me plz help me

  56. its not working for me ...will you please check it
    Thats my blog...please mail me nknakul@gmail.com

  57. Your widget works great on my website i am in search of it for some days and finally i got it here. Thanks u very much
    I want that this popup appears after some seconds a visitor entered my website say ay 20s not in the starting. Can please you add this feature in new version?

  58. Hello, i am unable to install this but it is not working on my blog www.hackitparadise.in

  59. hi admin i do not understand where i use feed title in my website http://hadiuits.blogspot.com

  60. hai admin the javascript link is broken "http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js" fix it...>

  61. Hello, the above tutorial is not working anymore, please update following JQuery link because its dead now. http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js

    Update above link

  62. I was disappointed before reading this article, but now I am an optimist.
    free weights

  63. Dear Mohammed,
    can you pls help me look at the coding on my blog. I have tried this widget but it,s not coming up.

  64. hi bro this widjet is not working on my blog.please help me..


  65. Update
    Apologies for the inconvenience caused. I have just updated the code and it is working just fine now! :)

  66. Copied your updated code. Still not working! :(
    Here's my blog: Fashion Panache

  67. hey i would like jQuery Facebook Likebox Popup For Blogger - v2 plugin in my blog. i try plugin this but i cant so plz help me . how to i plugin this.

  68. hey bro its not working. how to work this
    here is my blog : http://allfilm1.blogspot.jp/

  69. Oh man is the 20th I am trying..Don't know why but is simply not working :(
    Is it something wrong with this blogger template maybe..?
    Everything that is being displayed is the name of it "fb" on the bottom of the page Maybe you could have a look. :D
    Thx in advance..my page is http://retouch-and-manipulation.blogspot.com/

  70. This is making the blog too much slow to load. Is there any light version?

  71. Friends Best Movie Site

  72. when popup my slide picture tops all , please tell me how to...

  73. nice post, is there any way to make it pop up on every visit and not anytime the page is refreshed?

  74. not working for me either. Argh! Will love to have this!

  75. Assalam Alikum Sir,, Its very nice but page speed very slow,,please fix this bug