Pages

Monday, November 2, 2015

Facebook PopUp Like Button with Timer On Blogger

Most bloggers use social networking sites like facebook to get more traffic to their blog. This is done either with facebook fan pages or groups depending on the number of fans. One of the ways you can increase your fans is to use a facebook popup like button or box that has a timer. This will be the first thing your readers will see as they visit your blog



.

The facebook like button unlike the facebook likebox that displays a box with the faces of the fans from the page, uses a button which your blog readers can click like your facebook page directly from your blog. You can also set the timer on this widget before it closes and your blog readers can also close it manually. 

Also read: How to Add “Link To This Post” Widget Below Blogger Post
                   Static Facebook Popup Like Box Widget For Blogger 
                   Auto Scrolling Recent Post Widget For Blogger

How to Add Facebook PopUp Like Button with Timer On Blogger


1. Go To Blogger dashboard

2. Select template, backup it up before proceeding. Select Edit HTML

3. Click inside the template, using ctrl+f search for </body> Copy the code below and Paste 'above' </body> either on the second or third </body> body tag depending on which might work on your blog.



<!-- informationtutorial15.blogspot.com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='PAGE-NAME'
//]]>
</script>
<style>
#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:

9px;margin:0pt;padding:0pt;color:#900000;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 8*/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:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !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:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
}
#fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !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 type='text/javascript' src='https://sites.google.com/site/mmktricks/jquery.js'></script>
<script type='text/javascript' src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script type='text/javascript' src='https://sites.google.com/site/mmktricks/fbpopup.js'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 20,
wait: 0,
url: 'http://www.facebook.com/USERNAME',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'></div>
<!-- informationtutorial15.blogspot.com Likebox Pro FBFan Code End -->

Also Read: Most Commented Posts Widget For Blogger With Thumbnails
                   Recommended Post Slide Out Widget For Blogger

4. Before saving your blogger template, edit the code above by replacing USER-NAME with your facebook page username. You can also edit the timer, but it should not make your readers wait too long before viewing your blog content. Save the template.