Recently one of my reader asked me for popup facebook like box which I am using on this blog.Therefore I kept my word and today publishing another cool jQuery popup for facebook like box. We have published four versions of facebook like box (Version1 | Version2 | Version3 | Version4) but today's popup is little different from them in this gadget because we have used another version of jQuery colorbox.As always you can add this gadget very easily to blog just copy and paste the code.You just have to replace my username with yours and you are done.See the demo of the gadget.


How To Add This Popup To Your Blog?


As always I have kept the installation extremely easy.You just have to copy and paste the code below...


  1. Now go to Blogger Dashboard > Design.
  2. Add a Gadget > HTML/JavaScript.
  3. Paste below code after replacing my username with yours.


<style>
/*
    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;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height: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:url(http://4.bp.blogspot.com/-8n5B05PTdFc/T1eJ4l1t1jI/AAAAAAAABBQ/wjOQPxrTcsI/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(http://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(http://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(http://4.bp.blogspot.com/-qXR5VW86tTU/T1eK26OlLJI/AAAAAAAABCI/15OgyJGAxgc/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(http://3.bp.blogspot.com/-M37w9fBpYc0/T1eK1xVuXMI/AAAAAAAABCA/dj23BHXxP94/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(http://1.bp.blogspot.com/-RhmmNbYthgQ/T1eK3_yFbYI/AAAAAAAABCQ/OOA2WRKRIpI/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(http://1.bp.blogspot.com/-RhmmNbYthgQ/T1eK3_yFbYI/AAAAAAAABCQ/OOA2WRKRIpI/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(http://4.bp.blogspot.com/-9_GvfznJpmA/T1eKxznvIqI/AAAAAAAABBc/QCxpXpZRRKc/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(http://2.bp.blogspot.com/-JMn5kVlrREs/T1eKzLJQp1I/AAAAAAAABBo/sKxAQECScTs/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(http://2.bp.blogspot.com/-GdZVtHqHzAY/T1eK0LfvVAI/AAAAAAAABBw/NItg_Pispb0/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(http://3.bp.blogspot.com/-Inz4vd6RVTo/T1eK1JG3aWI/AAAAAAAABB4/mqn1hczMewg/s1600/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger By Helper Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://269827695c7c05b4f44562afc525cc71d7261db3.googledrive.com/host/0B00G46OQ_mfCdnowckpzc1dxMDQ/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="http://4.bp.blogspot.com/-yKl984YHtNc/Tz5eFcKawQI/AAAAAAAAClc/tRhcONEeG9k/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&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"><!-- Warning: Don't edit this line,If you edited this line then your gadget may not work --></iframe></center><p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="http://goo.gl/9fXrd">Grab This Gadget »</a> </p></div>
</div>



Now replace btsnts with your facebook fan page username.(Highlighted in red color)

Customizations (Optional)


I have set the cookie refresh time to 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear this gadget daily the simply change the *7 value to *1 in above code.(Highlighted in Yellow color)

Need Help?


I have kept the installation extremely easy,if still you have any queries or questions about customizing this gadget then feel free ask me.I will solve your query as soon as time allows.

Credits


I have spent my hours on customizing and editing this gadget.Actually I use this gadget on my blog but one of my loyal reader asked me for that gadget so I kept my word and sharing this gadget with you.If you are using this gadget then you should not remove the credits links present on the footer of gadget.Also if you want to share this gadget then kindly link back to this article.

Post a Comment

  1. oh, not working, i've tried several times, i don't know what I'm doing wrong :( It's simply gone, it never appears..

    ReplyDelete
    Replies
    1. Hey Its working perfectly,see screenshot below -

      https://lh4.googleusercontent.com/-pkdBLQtEEP0/T6s0LaoX_DI/AAAAAAAABrg/JxbJjtTbiGA/s1600/fb-like-box.png

      Clear your browsers cookies then visit your blog.

      Delete
    2. Same here,it's not working.. my blog url is criticallygeek.in

      Delete
  2. sorry bro its not working please fix it and email

    ReplyDelete
  3. hey all, it's work ... thankyou @Rahul for post this article ...
    . from now i will subscribe and follow you ..
    Thanks .

    ReplyDelete
    Replies
    1. Hey thanks for following and subscribing :)

      Delete
  4. hi Rahul
    its working before 2 weeks but know its not working

    ReplyDelete
    Replies
    1. hey I have updated the script,pls re-install the widget and clear your browser's caches and cookies and go to your blog you will watch this pop up :)

      Delete
  5. working thanks a lot ! in return i like this website page in fb and follow in twitter!

    ReplyDelete
  6. where you change the fanpage url/name and how can i eliminate the close button?

    thank!

    ReplyDelete
  7. how do you stop it from popping up on all the pages. www.unlockscodes.com

    I only really want it to pop up once and only after 1 minute after been on the website

    cheers

    ReplyDelete
  8. Thank you!
    It is great widget.
    If you want to have a look
    please vist my blog:
    http://yonjademirel.blogspot.com
    http://yoncademirel.blogspot.com

    ReplyDelete
  9. Dear Author
    I want to use "author red label / tag" to my blog
    How will I do it?
    Thanks

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

    ReplyDelete
  11. I consider something really specially in your site .

    Keep Blogging ............

    Thanks
    The Beautiful Names

    ReplyDelete
  12. I have added this but i want remove the close button. Please help
    Free Software And Games

    ReplyDelete
  13. This trick is realy great! Thanks, my fans are growing fast!

    Try my SEO Blogger Guest Posts

    ReplyDelete
  14. It seem not working with my blog

    http://change-4-better.blogspot.com/

    How to i fix it ?

    ReplyDelete
  15. Great post.Very helpful.Continue creating such great posts.

    Regards
    Blogger Whale

    ReplyDelete
  16. dashboard >> javascript ???

    please update accordingly new blogger layout

    ReplyDelete
  17. It's not working as html/java coding...suppose to come up on this page (http://www.desi4um.com/forum/) as per the configuration....but nothing is happening...

    ReplyDelete
  18. it is not working .. help me out plz blogg url is http://www.thesoccerplanet.com/

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

    ReplyDelete
  20. It is working on my test blog but not working on kamrandownloads.blogspot.com
    please help me.

    ReplyDelete
  21. The box comes up again and again
    i wannaa that box come with first entry of blog.
    not again n again.

    ReplyDelete

  22. Not work One off mine ,but work for the my other blog,thanks alot..its very awasome Rahul..my be in case i have a bad templete in my personal blog

    ReplyDelete
  23. BCFBLThank you very much for this usefull information! I really understand the topic now!

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  24. Hi
    Nice blog Post but not working on my blog
    I have Used This Code After Copying From Here
    Friends Check Out
    Pak India fashion styles Provides Updates On Fashion In Pakistan & India.
    http://pakindiafash.blogspot.com

    ReplyDelete
  25. hwy there iz problem after installing have a look
    http://innovation-civil.blogspot.in/

    ReplyDelete
  26. i cannot copy the text.help me how to copy, when i paste it show See more at: http://www.helperblogger.com/2012/04/awesome-jquery-popup-for-facebook-like.html#sthash.IfZKuzW1.dpuf

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top