Add Facebook Popup Like Box To Blogger
I received a mail from my dedicated reader asking me how to add a Facebook popup like box to blogger blog. So, for the benefit of other readers i decided to share it here for everyone searching for how to add a Facebook popup like box to blogger blogs. Adding a Facebook popup like box to your blog really plays a handsome role in your blogging career. Facebook is the major social networking site that help bloggers and webmasters to build a large audience around their blogs, it also help in boosting blog readership and thus, drive more traffic to your blog. If you have the Facebook popup like box installed on your blog, you'll noticed that your Facebook fan page likes would be increasing on daily basis, thus increasing your blog's traffic.
Preamble: Though the primary aim of having these widget in your blog is to increase your Facebook fan page likes which would in-turn drive you massive traffic. So there's intense need of adding this widget to your blog. Also note that these widget could sometimes annoy your visitors, so therefore they can choose whether or not to like your Facebook page by easily navigating to the close button just by the top-right corner of the popup box.
Add Facebook Popup Like Box To Blogger
1. Go to Blogger => Template => Edit HTML
2. Click anywhere inside the template editor
3. Press Ctrl + F and search for </body>
4. Copy the code below and paste in right before the </body> tag.
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='BlogStable'
//]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://mybloggertricks.googlecode.com/files/mbtlikebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/BlogStable',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>
5. Make some customization by replacing BlogStable with your Facebook page username.
6. You can also make this changes, though it's (Optional) =>Wait=0; these turn on the popup box immediately a visitor enters your blog; So you can tweak it to appear after 5 seconds by replacing Wait=0; to Wait=5;.
Feedback!
Comment! These was today's tutorial on adding a Facebook popup box for blogger blog. What do think about these widget, can it actually increase our Facebook likes and send us traffic as well? Your thought is always welcome. Don't hesitate leaving a comment.
Query? Do you experienced any difficulties adding the Facebook popup box to your blog? You're not alone, just leave your query below through comment and we'll get back to you as soon as time allows.
Subscribe! We don't want you to miss any of our future updates, it could be useful to you. So do well to subscribe below. All our future updates would be delivered directly to your email inbox.
Share It! This is also very important to make our work go viral. Don't just read and work away, try sharing these tutorials with your social networking friends. You can make use of our social sharing buttons below. Thanks. Happy blogging dudes...
Categories:
FACEBOOK TRICKS,
WIDGETS
.gif)
.gif)
.jpg)
.jpg)
.jpg)
0 comments:
Post a Comment