Wednesday, 20 March 2013

Tagged under: , , ,

How to Add New Facebook Pop Up like box For Blogger 2013

How to Add New Facebook Pop Up like box For Blogger 2013
Facebook pop up like box play a vital special in increasing your blog traffics. Facebook pop up like box will increase your facebook page traffics in a very short duration. Previously we shared automatic sliding floating facebook like box in blogger. Today every blogger want to increase their blog traffics as well as theirs social media networks sites. So there are out thousands of ways to increase your traffics by different methods some of them you will have to do manually while some of them are automatics. Now we have not much time to works on social media networks thats why if we use automatic method then it will become better for us. So in today article we will discuss about new facebook pop up like box which appear before while visitor landing your blog home page. So in this way we have more chances to increase our blog website facebook fan page popularity.

Today article is all about how to add facebook pop up like box in blogger. So before adding facebook pop up like box in blogger you will need to have a facebook fan page along with user name

How to add Pop Up like box in blogger

This is a simple java script pop up widget So adding this widget in blogger its so simple.Jus add the Facebook pop up like box code in blogger java script section.
  • Got to blogger>>Layout: 
  • Add a Gadget>>Html JavaScript Gadget:
  • Inside Html/JavaScript Gadget Past below code: 

<script src=''></script>
<script src=""></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:"#exestylepopups"});
<style type="text/css">
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore -
#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%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{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( no-repeat 0 0}#cboxTopCenter{height:14px;background:url( repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url( no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url( no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url( repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url( no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url( repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url( repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url( no-repeat center center}#cboxLoadingGraphic{ 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( 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}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important}
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//;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>
  Now save the widget and you done everything.

Customization OF New Facebook Pop Up like box

  • Normally this widget will appear only Once in a month for each visitor who visits your blog first time.This will widget will also appear if you clear your browser all Data, History and Cache and re visit your blog.
  • IF you want to appear this widget for every page refresh then just change the blue color "true" value to "false". But I would recommend you to keep it as it is.
  • The blue color text is the text which will be displayed above the Facebook like box in the pop up, so you can change it to whatsoever you like. 
  • This is my facebook page user name "ProBloggerTrick" , so you must replace it with your FB page user name, and you can find that just by visiting your facebook page.
  • You have done now save the widget again and visit your blog for seeing the beautiful pup up like box.if possible clear your browser cache.

What if facebook pop up like box does not work

  • Go to your facebook fan page which you want to appear:
  • Go to edit page >> update info:
  • Then write unique name for your page by click Username:
  • when you write available username for your page then copy that and replace with ProBloggerTrick 
  • Noted you can only one time change this name after this you have no permission to change it:
  • Clear your Browser history, data and Cache.


  1. @Ankit
    Thanks Ankit for your suggestions i will keep in mind...

  2. @Asghar
    Thanks for your appreciations

  3. slaam Dear Bro...this code is not working on my blogger .please tell me is working.

  4. @Ahmad

    IT will work once you give username to your facebook page. then copy the username from there and replace with my page name.

    but if you have not success again then comments me again. i will do it for you.

  5. @Gupta

    Bro its working try to clear your browser cache and also give unique username to your facebook fan page.

  6. if this code not work in widget

    this code past in

    above </body>

    thank you

  7. @Ilyas Shaikh

    Thanks ilyas shaikh for mention your experience with PBT. thanks to you for helping my readers.


    Thanks to you bro for being here with us .Your Blog is really awesome.

  8. Here is my facebook page- What do I put in for my fb username? I am having a hard time getting it to work on my site and I am very excited to use this widget. Thanks for your help.

  9. @Tamara Chilver

    Bro its very simple just give any unique username to your fb page. just like "teachingtlc" and past that in the facebook widget it will definitely works. thanks to you. but if you failed then feel free to ask again.

  10. Hi Hafeez. I tried this and it isn't working on my blog, not sure why. I have a unique Facebook page name and everything!

    Please help!!

    1. Clear your cache and do not visit your site unless you have applied the gadget. After that visit your site you will see the result is ok.

  11. Replies
    1. Clear your Browser history and cache because you have recent view you page thats why its not working. So clear all the cache and then visit your sites.

  12. hey, i would like to know if there is a way to remove 'Remove updates.... thingy? I mean only the like box will pop up, no other things

    1. Yes you can easily remove this.

      Just remove thats green line from the code. Receive all updates.....

      After removing this you will get a clean widget without thats updates etc words.

  13. Hi Hafeez, can i put my website/blogger url instead of facebook fanpage? please i have been looking for a locker like this for so long!
    if no then is there any solution to this? i just want to lock the main blog page until visitors make like

    i have tried almost all locker tutorials but nothing works! is it that hard to do?


    1. Try once again and if it does not work still then you may also put the javascript code above the /body> tag inside the template

  14. Thanks for sharing, I did it but can you please tell me if it works?
    Thanks, Kyriaki

    1. Follow the above all steps correctly. Hope it will work. but if you still getting problem then kindly send your template at our editorial team will work on it and after resolution we will send back to you.

  15. i still cant do.. sad. but good info. thank you for sharing

    1. IF it does not work on your template. Then kindly send your template at this email address we will solve your query.

  16. Nice widget bro. But this is not working because it's external .js file in unavailable. I hope you will update the code.

    1. Yes!! You are right bro!! .js file is unavailable :)

  17. not working...please check!

  18. Hello man, it is very very nice! :)
    I would like to customize it: can it appear once a day, instead of once a month?


  19. More TIPS and TRICKS here

  20. bro. please help me ,the template which i am having is not showing comments in any post or at any page it only show the no. of comments .help hafeez bro.

  21. its Working

  22. its Working

  23. Really admin i really thank full to you and your site for such a nice article.i want
    my facebook like box in my blog.I search realted article in many sites but your
    site gives me full satisfaction.thank you again

  24. Thanks Buddy Its Working
    <a hrefs=">Blogger tips and Tricks</a>

  25. This comment has been removed by a blog administrator.

  26. Cool post.I can.thank you.

  27. friend visit my blog and latest pc software free download.

  28. Its Really Nice Widget To Have On Your Blog Keep Working On Dude

  29. Hi! I did exactly how you taught, changed "probloggertricks" with "Felipeopequenoviajante" - why doesn´t it work??? :-( thanks, Claudia


About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism