Advertisement

header ads

How To Add Facebook PopUp Like Box With Timer For Blogger & Wordpress


Adding facebook pop up widget for blogger
Adding Jquery pop up like box fow websire

How to add facebook pop up like box widget for blogger Blogspot and Wordpress - Today I am going to write a post on how to add facebook pop up like.why to add facebook popup like box. Every blogger who is having a blog or website will be having a Facebook page.If you having the doubt regarding how to create facebook page i will post it soon.So having facebook page is not good but adding it on our blog or website is important to every newbie blogger.By adding facebook pop up like box you can get more facebook page likes and even you can get more traffic to your website repeatedly.So every blogger should know how to add facebook widgets like box for Blogspot and Wordpress.

Why To use Facebook Pop Up Like Box: 

Its is recommended to use Facebook Pop up widget to get more likes to your facebook fan page.Every user who visits your website for some information can like you facebook fan page directly if he/she got the right information.

Adding Popup For Facebook Like Box With Timer

Follow these simple steps given below:

Adding To Blogger:

  1. Go To Blogger > Design > Edit HTML
  2. Back up your template before adding the code
  3. Place the below following code just above </body>
Adding To WordPress:
  1. Go to Dashboard > Appearance > Editor > Header.php
  2. Place the below following code just above </body>

New version(2016) of Facebook jQuery pop up wigdet for Blogger and Wordpress  


Copy The Code Below

<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: 14px !important;    font-weight: normal !important;    padding: 5px !important;    margin: 0 !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://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript">//<![CDATA[ kakinetworkdotcom01username="myA2zTechtrips", kakinetworkdotcom01title="Join us at Facebook!", kakinetworkdotcom01skin="04", kakinetworkdotcom01time="20", kakinetworkdotcom01wait="0", kakinetworkdotcom01lang="en"//]]></script><script type="text/javascript" src="https://abt-3c3f.kxcdn.com/wp-content/uploads/2012/06/popup-with-timer-codez.js"></script><script type="text/javascript">//<![CDATA[ $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});//]]></script>

Make following important changes:

  • Replace this myA2zTechtrips with your Facebook username
  • The timer is set to 20 seconds to change it simply edit timeout: Search for kakinetworkdotcom01time=”20″, and replace “20” with any time you want (it should be in seconds)
  • The widget appears immediately after a visitor enter your blog/site. If you want it to appear after one minute or more then edit kakinetworkdotcom01wait=”0″,
Conclusion:
The above code includes a time counter and instead of likebox it displays a like button that links to your facebook page and an attractive image that also links to your fan page letting your visitors to either join your fan page by clicking the like button or by simply visiting your fan page by clicking the image. I think after reading this article it is now very easy to add facebook pop up like box so install it on your blog and enjoy.Keep visitong the page for awesome blogging tips.Thank you



Post a Comment

0 Comments