Add Facebook Popup Widget To Blogger

A pretty good way to increase your website Traffic is to generate traffic using Social network, One of best option is Facebook, Insert / Add Facebook pop up like box or widget to your website, its a Jquery widget and these days very popular among blogger gadgets.

By default the like box pops up after 10 seconds, but you can customize these seconds according to your requirement.

 This is How it looks like

Facebook popup widget

HOW TO ADD FACEBOOK LIKE BOX ?

Add The Below Code in your blogger template

Also Read – How to Start a Blog

Add Widget

Facebook-popup-widget

Check –  Check 200 Ways to earn money online

Copy the Below Javascript into the Content Box

Facebook-popup-widget

Also Read – Advanced Social Widget

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<pre></pre>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/TechnoratanIndia&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<a href="http://technoratan.net/blogger-tips/add-facebook-popup-widget-to-blogger">Facebook Popup Widget</a></center>
</div>
</div> 

Also See- HTML/Javascript as Plain Text in Blogger Post like above box

Customize Your Facebook popup Widget

Replace facebook.com/technoratanindia with your Facebook username

 

  • If you want the Popup to appear every time the User Reloads  or access the website

Find and Delete the below code from the above script

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
  • If you want to change the delay time of the Facebook popup widget:
search for “delay” in the code and change its value, currently you’ll find something like this
.delay(10000)

The popup will load after 10 secs, similarly if your want to load it after 20 secs, change the value to 20000, for 30 secs – 30000 and so on.

  • If you want to limit the popup only for homepage, you can wrap it like below example
<b:if cond='data:page.type == "index"'>
Paste your popup script here
</b:if>

Enjoy the increase in likes now.

Comments

  1. says

    Sweet blog! I found it while searching on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get
    there! Many thanks

  2. Cute Madiha says

    Thanks admin its really a good and hardworking job currently doing you are. This help me a lot to get more likes on my Facebook page, Thanks again. Visit http://www.filmaxtv.com 4 watch UK, USA Worldwide HD Tv channels online Free :)

  3. KENYA TIMES DAILY (@KENYATIMES) says

    MUch gratitude for this facebook popup like box for blogger i really liked you post and added facebook popup likebox for blogger to my blog ..www.kenyatimesdaily.com

  4. IsiEasy says

    Hello. The widget is very good but when I start the website again.. the blogger isn’t there. Why? How can I repeat the blogger?

  5. MadameAprokoBlog (@MadameAproko) says

    Wow, Thanks alot man. I’ve been trying others for hours without success but it worked on my first attempt with yours. thanks again

    • says

      Hello There, I’ve checked your website, as i can see you have already switched to some other widget. I am sorry that widget i provided couldn’t do it for you.

  6. says

    after adding in html without title…. t looks cheap as it will be easily seen while browsing my site,,,,,,,,white protion there……also not pop upping while browsing it through mobile

    • says

      It does, if its not popping up in mobile, them may be its not compatible with your template or any script is blocking it to run with your template. you may give it a try …. and to add in the template, add it rite before

      </head>

      tag of your template

    • says

      Its not popping up because you have enabled mobile site by blogger. Go to Templates, click on the Settings gear icon and disable it, then you’ll get it on mobile as well.

  7. Ashok says

    What change is needed to ensure that the Facebook Like popup does NOT show for those FB users who have already LIKED the website?

    Secondly, what change is to be needed to ensure that the popup shows up after every one day (I think in the above line of code highlighted to be removed, figure 7 in the cookie function refers to 7 days, so can I change it to 1)?

    • says

      Hello Ashok, Well I am working on the string that would enable the feature and there might be no popup if the user has already liked the page. Secondly I would like to assure this, that you may change 7 to 1. The Facebook popup will appear once a day. Have a great week ahead.

Share your Experience