Hi There!
I just installed the Facebook pop up widget on my blog and want to share with you how i do that,I try two codes
The first one i like it because show up after 7 second from opening the blog and is very fast,But the bad thing in this one is you can't modification the time and the box will show up one time in 30 day for each visitor.
The second Facebook pop up widget is very low,show up after a 10 to 15 second from opening the blog and loading slowly,but the good thing on it is you can modified in the show up timing,where you can adjust to show up every day and it show up with a good phrase "Receive all updates via Facebook. Just Click the Like Button Below..."
The benefits of installing the Facebook pop up fan box is to increase your Facebook likes for your blog or website.
So how you can do that?Just follow the steps below and you will install it successfully:
The first Facebook pop up widget:
Add Widget to Your Site:
Go to blogger>Template>Edit Html.
Search for </body> and add the below code before the </body>
and save the changes.
This code may be give some errors when you will add it in blogger,so go first to the HTML PARSER and change the good to be familiar with blogger,and add it to your blog.
____________________________________
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhji1IyrtbUoXvTFNuzbZ_T6XH-GdJFkXThLCwp4Vq8_MnY3ZFHotO8uAm9lEuTsQLKpdomVeva5qzzbYjFa_7Kne4A_3qVlREId4la6VYcM_JUwEA5EFicFw8Ns13WyMSq8taGEwP2Agrv/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>
<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/theblogwidgets&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>
<span id="linkit"><a href="http://www.theblogwidgets.com/2013/08/facebook-popup-widget-with-lightbox.html">Facebook Popup Widget</a></span></center>
</div>
</div>
_____________________________________
How to Customize
- Search for href=http://www.facebook.com/theblogwidgets and replace it with your site's facebook page URL.
The second Facebook pop up widget:
This code is good,you don't need to change it by HTML PERSER,Juts Go to Blogger>Template>Edit Html,Search for </body> and add the below code before the </body> and save the changes.
____________________________________
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1)
{
var fifteenDays = 1000*60*60*24*1;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/* ColorBox v1.3.16(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)*/
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DcOuQq7ap3jgrLDA1DoK5oC5E46Pd_21PhdXFNvmKYwXGt6DE02aN1M98BX5iaPRV3yM35vAexnCASJVAeAxZ89-vhUttk4Q67M0bpOwcdqaaF66J0-tLd0HjO3Jm9TOZYM9NjAfSZs/s400/border.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DcOuQq7ap3jgrLDA1DoK5oC5E46Pd_21PhdXFNvmKYwXGt6DE02aN1M98BX5iaPRV3yM35vAexnCASJVAeAxZ89-vhUttk4Q67M0bpOwcdqaaF66J0-tLd0HjO3Jm9TOZYM9NjAfSZs/s400/border.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{
width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL08hTya00-Gh9e8IUUsexlT9Rw035HZlRRMb8WvZA1M3MpQp4gMdee4djqpyMbpJReCIDUov3FEfWmBEWzDwQoseu2WOzj5u916hf7keKcJxw7YS8oF9pJlJo4S2ayegX2x1Vp0nrnbA/s400/loadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkbQtZVJD4xbkBspK0TiOpZ8dtr5ccIgNoRwnH4g8aeIyKLRUX9UdHRSlGoOVIPTcfhe0HbZjaALU5yGG8U6jAUNEkyitV2TISFaLFJWUfYi5e3te8yExOJGVjC9c9v62s1ueJ8YpuzE0/s400/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpklBUSj57IPHavqPTX76-hrNeWZo8kNKx4IEbkzIBP50uM4MYuSO6gmVvJgJsAoxGcIwNojQMVUqCS01CS08XyFWRqcom-YWo7x8h_cs_Fl8HGf8oLt33zl0BU7M3oG-M0Q2LDYpNkqY/s1600/controls.png) 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;
}
</style>
<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="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYourFirstDollarsFromTheInternet
&amp;width=300
&amp;colorscheme=light
&amp;show_faces=true
&amp;order_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>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;">Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.exeideas.com">EXEIdeas</a></p>
</div>
</div>
____________________________________
How to Customize
- Search for YourFirstDollarsFromTheInternet and replace it with your facebook page name or ID.
How to change the show up time:
- Search for var fifteenDays = 1000*60*60*24*30; and change the 30 with any time you want.
That is it,If the post like you share it with your friends :).
