How to Add Facebook PopUp LightBox Widget to Blogger

Adding a facebook pop up is seen in many blogs on your way in internet. This is going to be massive thing to get traffic to your blog. Getting likes to your facebook fan page is so important, because the person who likes the page get the updates, so indirectly the traffic. You might have seen many facebook pop up for blogger article in many blogs. But this tutorial is quite different as the title itself shows that facebook pop up for blogger with lightbox effect. If that’s the thing, I know you want to check this.
NOTE :
Before getting into the tutorial, I would like to say that this works in the first visit of your site only.
Previous Post : Facebook Like Widget For Blogger With Ribbon Effect Must Read

add facebook_light_box_popup_for_blogger

  1. Login into blogger.com
  2. Select your blog if you have many
  3. Then migrate to Layout –> Click on “Add A Gadget
  4. You get a windows open then find for HTML / JAVASCRIPT and click “+” button
  5. Then copy the below code and paste it there and make your editing.
  6. Also note you need not to mention any name of the widget.
  7. Then click on save.
  8. You may now visit your blog and have fun.

 

<style>
/*** Facebook Light Box Script By www.bloggerbulk.com ***/
#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;
}
</style>
<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(100).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/bloggerbulk&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false’

style=’border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;’></iframe>

</div></div>

 

How to add this Facebook PopUp Widget Box to WordPress?

If you are looking to add this facebook widget to your wordpress site, then copy all the code above and migrate to Appearance >> Widgets >> and drag a Text Widget to your sidebar area.
Now name it and paste this code in message box and click on Save. Make sure you have edited links in this code. 🙂
HAPPY BLOGGING

If you have any problems in adding this facebook widget to your wordpress site/blogger site let me know by comments. I will help you.

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Comments

    • says

      Hi Priya,
      Surely this facebook pop widget would give more likes to your fan page. This has a special feature like first time pop only. So no repeated time pop us.

      Keep visiting and thanks for commenting 🙂

Leave a Reply to Tharun Cancel reply