Facebook is a very good tool to gain traffic for your blog. Every blog should have its facebook fan page. We should also keep trying to get more and more facebook likes on our fan page. The likes will increase the visibility and traffic of your blog also increase.So there are a lots of tips to increase your fan page's likes. Now here I came up with a tool for you all.
It is a widget for your blog.
When anyone will open your blog a popup window will open in the center of their monitor asking to like your facebook fan page.
Now lets see how can we implement it to our blog.
CODE FOR THIS WIDGET
<style>/* ColorBox Core Style: */
#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:
You can modify the following code as per your visual requirement. */
#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/AVvXsEg0wneCT-i25JqkezMGJRolBnXqvCUdkGJJ3gkYhAfXZxkSbCrTtAnohLShl1PtXoaCJI3wcBVCwCjIlu0rKnVtIkT6f8D9407tKG0nns1UjHA68_DlZBgiIsXdGlF8EsKYJc3MMY_fagGO/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hLomaiOyPKaX-DlF1tC_US-x6rRB73sbNNw6KpZrq8EiTT0XWcxpT8N-A_uRgkuF_qPXyT42roswxwdh93OEPE4s5W0Adqj9ovansZ9xeWq2Rwfcb_qtQ90__ALQ0KNCWS_YnpHy2c7G/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wneCT-i25JqkezMGJRolBnXqvCUdkGJJ3gkYhAfXZxkSbCrTtAnohLShl1PtXoaCJI3wcBVCwCjIlu0rKnVtIkT6f8D9407tKG0nns1UjHA68_DlZBgiIsXdGlF8EsKYJc3MMY_fagGO/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wneCT-i25JqkezMGJRolBnXqvCUdkGJJ3gkYhAfXZxkSbCrTtAnohLShl1PtXoaCJI3wcBVCwCjIlu0rKnVtIkT6f8D9407tKG0nns1UjHA68_DlZBgiIsXdGlF8EsKYJc3MMY_fagGO/s1600/controls.png) no-repeat 0 -
32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hLomaiOyPKaX-DlF1tC_US-x6rRB73sbNNw6KpZrq8EiTT0XWcxpT8N-A_uRgkuF_qPXyT42roswxwdh93OEPE4s5W0Adqj9ovansZ9xeWq2Rwfcb_qtQ90__ALQ0KNCWS_YnpHy2c7G/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wneCT-i25JqkezMGJRolBnXqvCUdkGJJ3gkYhAfXZxkSbCrTtAnohLShl1PtXoaCJI3wcBVCwCjIlu0rKnVtIkT6f8D9407tKG0nns1UjHA68_DlZBgiIsXdGlF8EsKYJc3MMY_fagGO/s1600/controls.png) no-repeat -36px
-32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wneCT-i25JqkezMGJRolBnXqvCUdkGJJ3gkYhAfXZxkSbCrTtAnohLShl1PtXoaCJI3wcBVCwCjIlu0rKnVtIkT6f8D9407tKG0nns1UjHA68_DlZBgiIsXdGlF8EsKYJc3MMY_fagGO/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wneCT-i25JqkezMGJRolBnXqvCUdkGJJ3gkYhAfXZxkSbCrTtAnohLShl1PtXoaCJI3wcBVCwCjIlu0rKnVtIkT6f8D9407tKG0nns1UjHA68_DlZBgiIsXdGlF8EsKYJc3MMY_fagGO/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/AVvXsEh8hyphenhypheny5ws6_aOBos1hohF9QCCzyt0qYarjX0xyiJdfBZ_8ZLOVYv_XJGX3MWnr-RZ5gqjzUuKrA_8ITm1osnJmm87kyvM0pM5I7gkMUPnChTc-0TRsk0QScAcg3G-bb_rQP-LsBKvu6DmL2/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYGK-5hXZeZFbqy53CQ7Gc5EMo1znAulhEdj8w2QD70rZbjgTBxMFnWM23NdRInT3g7xm-wF3g7OU8KWLUtY9FaoUii9FttEQjcspQh6uEWa3RPilh3eulLMUjMLKzOQJjK_lFTrWvk2P/s1600/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(http://1.bp.blogspot.com/-
FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/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;}
/*-----------------------------------------------------------------*/
/* Pop Up window of Facebook Likebox For Blogger by All Tech Story
/*-----------------------------------------------------------------*/
#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://yourjavascript.com/11215013191/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"><center>Like Us On Facebook to Receive all of our Updates on your Facebook Timeline <p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com
%2Ftechglaxy&width=300&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" 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://alltechstory.blogspot.com">All Tech Story</a></p>
</div>
</div>
CUSTOMIZING THE WIDGET
- See the blue text
- The first one is the design of the pop window you can modify that if you want
- The second one is the text which will appear above the like box, you can change it according to your wish
- And the third one which is on iframe tag is the id of my facebook fan page (AllTechStory) replace that with your own facebook fan page id
SETTING UP THIS WIDGET TO YOUR BLOG
- Customize and copy the code as said above
- Go to your blog
- Select Layout from the left side menus
- Now click add a gadget from a suitable location
- Paste the code and click on save
- Now Its done you can check your blog
This popup window will only be visible on the first visit of a particular user to your blog. So it won't annoy your users.