Add Facebook Pop Like Box With Timer In Blogger

Having a problem on how to advertise your online business. Facebook is the answer as it is the largest social networking  site. And as  blogger you want also to spread your content because no matter how quality is your content is but it is not being talked by people around the globe, you are just like wearing new and beautiful dress but just sleep in your bed.

As of the moment (when I wrote this article) it is the no. 1 in Alexa Rank having a 963,574,340 (data taken  from web-site.org) . In connnection with this,  FACEBOOK has provided the facility in shape of many widgets and boxes through which the webmasters and bloggers can easily advertise their blog or website and circulate it on the FACEBOOK. And now, in this tutorial I am going to share with you the “FACEBOOK POPUP LIKE BOX WITH TIMER”, which you can easily install in your Blogger Blog and attract more visitors and build a better fan following on the Facebook. The codes that I'm going to share with  you are highly customizable.

Live Demo

Add Facebook Pop Like Box With Timer In Blogger

Step 1. Log in to your Blogger Dashboard.

Step 2. Go to Template (have a back-up of your template for your reference).

Step 3. Click “EDIT HTML”.

Step 4. Inside “HTML EDITOR”, press “CTRL+F” and find  tag </body>.

Step 5. Copy &paste the following code below just above/before  tag </body>.

<!-- Facebook Popup Like Box With Timer Starts by Bloggingtipsandtrix.blogspot.com -->

<script type='text/javascript'>
//<![CDATA[
    KNFBFansPRO='pages/Bloggingtipsandtrix/533310753378603?ref=hl'
 //]]>
</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: 13px !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='https://googledrive.com/host/0B9e7eeKnhqEVUFBGNGVKRkdHV3M' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://googledrive.com/host/0B9e7eeKnhqEVM3ppcFdvWkZPUEE' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                      
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>
<!-- Facebook Popup Like Box With Timer ends by Bloggingtipsandtrix.blogspot.com -->

Customization:

• Change the red highlighted texts with your facebook username or facebook fan page.
• If you want to hide your facebook fan page name because it is odd to look especially if it contains many numbers, simply delete the 13px   in font size in the above code and change it to zero (0).
• Set the  time-out  (in seconds) by replacing 30 with your own.
• This widget will  reappear after few minutes. Simply change the  (0) with 1, 2, or any time you want.

 In my case my complete facebook fan page is https://www.facebook.com/pages/Bloggingtipsandtrix/533310753378603?ref=hl

Step 6. Click Preview to see the initial effect then hit the Save button.
As a token of this article please like my facebook fan page. Thank You!
Peace and more blessings to your family.
Enjoy!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook