Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

One Time Facebook Like Popup Box Widget for Blogger

3 min read

Popup box widgets really annoy your visitors when they appear again and again, but they help you in developing your blog well when you use them properly. Facebook is a major source of traffic which can send your blog a good traffic flow when you have enough fans on your Facebook page. To expand your Facebook network and to increase your Facebook page’s fans, I have brought a very stylish Onetime Facebook Like Popup Widget (watch demo here) for your Blogger blog which will appear onetime only and thus it will increase your Facebook fans dramatically without annoying your visitors.

How it Works?

Facebook Like Onetime Popup Blogger Widget saves a cookie in your visitor’s browser in his/her first visit and then never popups again after first popup when your visitor navigates to another page or visits back later. In such a way, this widget never irritates your visitors and perform its task gently.

How to Add Onetime Facebook Like Popup Box to Your Blogger Blog

1. Login to Blogger dashboard, select your blog, go to layout and add a new gadget

2. Select HTML/Java script for adding the gadget and paste the below code in it

<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%;}
#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;}
#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(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-jMjssBv0t1Q/UQejbimsNeI/AAAAAAAACG4/jAGaEw2fzMs/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh4.googleusercontent.com/-bpGBUwdDCxY/UQej05KBhOI/AAAAAAAACHQ/iBcR1hU4K3E/h120/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://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.pngno-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 {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
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 {
border:none;
}
.demo {
display:none;
}
</style>

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

<script src="http://supportivehandsjs.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
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"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
 
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 align="center">Receive all updates via Facebook. Just Click the Like Button Below<p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fitcongress&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:330px;" allowtransparency="true"></iframe>
</center>
</div>
</div>

3. Change the blue highlighted text with your Facebook page username and then save your gadget

4. Save the arrangement and then visit your blog. You will see Facebook Like Box popping-up on it!!!

Note: If the box doesn’t popup, then it means that you have already added the Ajax JQuery Script to your template. To fix it, remove the read highlighted line in above code.

Rehmat Alam A blogger who has fallen in love with coding! Here at SupportiveHands.net, I share things that relate to coding, servers, E-marketing, and other related fields.

Facebook Like Widget for Websites, WordPress and Blogger

The Facebook Like widget, which I have brought for you today is unique and coolest among its kind of widgets and plugins and you...
Rehmat Alam
1 min read

How to Add “Contact Me” Form and Sticky Button…

Google’s Blogger is though providing a brilliant free blog hosting, but some limitations are also there on Blogger. One of these limitations is, Blogger...
Rehmat Alam
2 min read

Attractive Floating Social Media Buttons Widget for Blogger

Are you searching for a social media profiles widget for your blogspot blog? If yes, then my recommended social media widget will surely make...
Rehmat Alam
2 min read

19 Replies to “One Time Facebook Like Popup Box Widget for Blogger”

  1. I am not successful in my blog (www.teluguthesis.com)even after taking all tips in to consideration. What can I do? Can you suggest me Please?

    1. Hey Dr.రామక పాండు రంగ శర్మ, have you added the JQuery code? There are two reasons:
      1. JQuery code is either absant
      or
      2. It is added twice.

      Please check for it, I visited your blog but the popup box isn’t appearing. If you can’t fix it by your own, send the XML file of your template, I’ll add it for you.

  2. Rehmat, this is a useful widget. I have already used your pop out subscription widget and am wondering if I can delay this popup until a few seconds later after the subscription widget pops up?

  3. I’ve also created such a popup box which appears 10 seconds after someone visits the page or blog with animation. Find the tutorial to implement it bellow.

  4. This like box is appearing for the very first time. But will it appear after every 15 days ?

    1. Hi Rehmat,

      Thanks for the reply.
      Your like box is very helpful.
      It will be more helpful to me if it does the following requirements:

      Requirement1 -> Any way for making it appear for every 15 days Requirememt2 -> It should not appear for the people who already liked our blog/website.

      The reason I feel it should appear every 15 days is that the people may not know about the content inside our blog and may not like on the first day itself. But when they get used to our blog/website (which nearly takes at least 5 days for them), it will be good if we can set the like box to appear after few days.

      If possible could you please work on these requirements.

    2. Hey Arun, the box popups again when you clear cookies of your browser. If you don’t clear cookies, then it will never appear again.. Days are not specified.

    3. Yes Arun, your ideas are cool :). I will try to customize it for fulfilling your first requirement, but the second requirement is hard to be achieved 🙁

    4. Thanks for the reply.

      Yes first requirement will be enough I guess.
      Please let me know after you have customized it. ([email protected] is my email id)

      Waiting for your reply 🙂

  5. Hi Rehmat, please i want to lock my main blog page with like button so that visitors can’t access site until they like my blog (not fan page) is that possible? i tried almost all tutorials on the net and nothing works for me 🙁 , all i want is simple pop-up facebook locker! if you can get this for me i would really appreciated 🙂

    thanks in advance

  6. Thank You So Much Rehmat Alam.

    Mein Ne aj tak kisi cheez per comment nahi kiya but aj jab yeh widget dakha tu bhot fit tha q k es per koi link attach nahi tu jo end mein hoti hai bus esi waja sa fantastic work and keep it up my bro.

Leave a Reply

Your email address will not be published. Required fields are marked *