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.
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='TipsBDTricks' //]]> </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: 'https://www.facebook.com/pages/Tips-BD-Tricks/518996174822827, closeable: true }); }); //]]> </script> <div id='fbtpdiv'/> |
5. Make some customization by replacing TipsBDTricks your Facebook page username.
6. Replaching your page id https://www.facebook.com/pages/Tips-BD-Tricks/518996174822827
7. 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;.
0 comments:
Post a Comment