Recently, I have shared a facebook widget i.e., "Adding Facebook Likebox in Blogger with Timer". But the that facebook widget doesn't contain any images or faces of those facebook fans who likes your page. In order to answer that question. I made another research and thank God! because I've made it.The codes that I'm going to share in this tutorial were from MBT and do some modifications in order to deliver it more nicely at my best.
Features of this facebook widget:
Step 1. Go To Blogger Dashboard > Lay-out > Add an HTML/Javascript Gadget
Step 2. In the blank page, paste the code below
1.Replace https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl with your facebook fan page URL .
2. If you don't want this pop up load for every refresh then you can replace the red highlighted False to true and set your desired days to load it on your blog by changing the above *30 to your desired days.
Happy Blogging Friends and Love Thy Neighbours!
- This stunning facebook pop up like widget will help you to increase your blogs facebook likes and also gives a professional look to your blog.
- It has a transparent look and a quick closable button which loads real fast.
- It has timer facility which you can control the visibility of the number of pop up for your readers (show pop up for your readers at your desired days).
Steps to Add Facebook Like Box Pop Up widget in your Blog
Step 1. Go To Blogger Dashboard > Lay-out > Add an HTML/Javascript Gadget
Step 2. In the blank page, paste the code below
<style>Step 3. Save template and refresh your page to see your "Facebook Pop-up Like Box Widget"
/*
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPoeXgVlEGXuOBNVJGQ1UdotdYf2IiaRLFdM-NMypIO7BuFGstqjy9XOOZDemM6OxV52D0X5EdrvlKBQU10k2hwRGifbYwRVx5UYW7YDuexQUP7EckPWdiqpR8qcy7iZIBTjz-nWcbGI/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPoeXgVlEGXuOBNVJGQ1UdotdYf2IiaRLFdM-NMypIO7BuFGstqjy9XOOZDemM6OxV52D0X5EdrvlKBQU10k2hwRGifbYwRVx5UYW7YDuexQUP7EckPWdiqpR8qcy7iZIBTjz-nWcbGI/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/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/AVvXsEgctKUQX0lytX8l9e0FsOiiLjw-LNbFX290SWQ5zDhQNHUK7X_7dg5WarOB5eQ9uvogFAgxcEsegZBaiwbdYUN7xw5e2jczjutze1Ebn4E6HziBs7wxiOVjiyDrmnmbTgR-nWdHTqrv0bI/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif9Zq1OVfEiiP_0N8UZsKLczngn-Ko6KYPp_2-RY34ExEV6YCl0-4PQhUcvr19RcP34_2LMEvLkpQGuCSL_V1MbGFZNClz7u_gPD1lLgVZbWdKLCQ4hyphenhyphen-ARhcd5Bi_p6BQj5bq-Ujr1gs/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/AVvXsEhTbtNhMLEMjBqdiGrmjUdXzuPtxT1lTUekEJJwQ_SyFGh-rS6lL2EKEj2FsOVVprmHlSHzlaq29pJ_-_rVKy8R8av5CACoIgCx-NjOSkUgEdZWww2aNoBTDeIxx5QqWWJICAQ7NG7q7AY/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;}
/*-----------------------------------------------------------------------------------*/
/* 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: #F66303;
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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://downloads.mybloggertricks.com/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 class="box-title">Receive updates via Facebook. PLEASE Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
Customization:
1.Replace https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl with your facebook fan page URL .
2. If you don't want this pop up load for every refresh then you can replace the red highlighted False to true and set your desired days to load it on your blog by changing the above *30 to your desired days.
Happy Blogging Friends and Love Thy Neighbours!
