Latest: Unlock ZTE Modems | Adsense Approval Tips | Wordpress Themes 2013 | Change A Blogger Template | Windows 7 Antivirus | Backlinks Generator |

Thursday, 4 July 2013

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:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, 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...

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.




21 comments :

  1. Nice Post ;) I sent you an email.. Read this....

    ReplyDelete
    Replies
    1. Thanks for your comment bro Zeeshan.. I'll reach you via mail

      Delete
  2. Very informative news .. Thank you for sharing Admin. Your all post are very informative and you are great blogger.. Thank you again

    ReplyDelete
    Replies
    1. It's nice having you here bro Aditya. Thanks for commenting..

      Delete
  3. Awesome Post nice Article
    www.locasure.blogspot.com

    ReplyDelete
    Replies
    1. Thanks bro Muhammad for stopping by and joining my blog. Do have a nice weeks ahead.

      Delete
  4. Plz send me the code via email, i can't copi it please. I need it urgently thanks. Reppinphc@gmail.com

    ReplyDelete
  5. Nice one...It really help.. www.ashmarkexclusive.blogspot.com

    ReplyDelete
    Replies
    1. I checked your site and there was no popup

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This like box is much better than what other site are providing..good work bro

    ReplyDelete
  8. It doesn't work for my blog. I replaced all "BlogStable" with my FB username. I also changed Wait=0; to Wait=5;. Nothing happened.. no pop-ups. Please help..

    ReplyDelete
    Replies
    1. same for me, it's not working. URL an page name is in, but no pop up :(

      Delete
  9. Thank you so much for helping me add a fb like box :)

    ReplyDelete
  10. its not working the links of the scripts are broken

    ReplyDelete
  11. hi friend,I am Praveen
    i pasted this code in my blog www.carrertime.in but it not displaying any popup in my blog can u help more briefly
    praveenit4@gmail.com
    and my fb page is www.facebook/carrertime.in
    i pasted only in both field s but it was not working

    ReplyDelete
  12. really nice post........thanks

    ReplyDelete
  13. In some instances, Facebook fans can also be bought.

    ReplyDelete

Copyright @ 2013 BlogStable.com | All Right Reserved | Designed By: Victor Noah| Privacy Policy | Sitemap || Powered By Blogger & NameCheap