How to add a Facebook popup like box to your blog

Facebook is the main source
of traffic for most of the site and blogs. Facebook has a good
collection of tools and features that helps us in promoting our blogs and websites .
And in this post, we will learn how to
add a Facebook popup like box to blogger blogs along with a timer using 
jquery. When ever a visitor visits your blog or website,a Facebook like
box will popup at your visitor`s screen.That will help you in increasing the like of your facebook page

Facebook popup like widget stores a
cookie in your visitor`s browser and appears only once without annoying
the visitor.Facebook like box does not popup again if the visitor opens
another page or any other post in your website.You can also save the
number of days after which the Facebook like box popups to your
vsistors.

 

Steps to add Facebook popup like box to your blog/website:

1.Go to your Blogger dashboard->Template,
2.Backup your Template.{warning keep backup of your temple whenever you edit it}
3.Now select Edit html and search for  </head>
4.And paste the following code above  </head>  section.

————————————————————————————————————–
<script
src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’></script><script
src=’http://yourjavascript.com/69231961363/jquery-colorbox-min.js’
type=’text/javascript’/>
<script type=’text/javascript’>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;400px&quot;,
height:&quot;430px&quot;, inline:true,
href:&quot;#facebook-popup&quot;});
}});</script>

————————————————————————————————————————–
5.where 7
is the number of days after which Facebook like box appears again .You can change it to your desired value.if you can this value to 3 then the like box will appear after every 3 days so in my opinion you should put this value to 7 .

6.Now search for  </b:skin>  and click on black arrow to expand 
the code and paste the following code  </b:skin>

—————————————————————————————————————————
 /* Colorbox Core Style: The
following CSS is consistent between example themes and should not be
altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position: absolute;
top: 0; left: 0; z-index: 9999; overflow: hidden; } #cboxOverlay {
position: fixed; width: 100%; height: 100%; } #cboxMiddleLeft,
#cboxBottomLeft { clear: left; } #cboxContent { position: relative; }
#cboxLoadedContent { overflow: auto; -webkit-overflow-scrolling: touch; }
#cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; }
.cboxPhoto { float: left; margin: auto; border: 0; display: block;
max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width:
100%; height: 100%; display: block; border: 0; } #colorbox,
#cboxContent, #cboxLoadedContent { box-sizing: content-box;
-moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User
Style: Change the following styles to modify the appearance of
Colorbox. They are ordered and tabbed in a way that represents the
nesting of the generated HTML. */ #cboxOverlay { background: #000; }
#colorbox { outline: 0; } #cboxContent { margin-top: 20px; background:
#000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px;
border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid
#123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle {
position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent {
position: absolute; top: -20px; right: 0px; color: #ccc; }
#cboxLoadingGraphic { background:
url(http://2.bp.blogspot.com/-jcn46y_t6D0/Uc8cG9q6ExI/AAAAAAAAC1k/K63u_2VkemM/s32/loading.gif)
no-repeat center center; } /* these elements are buttons, and may need
to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0;
padding: 0; margin: 0; overflow: visible; width: auto; background: none;
} /* avoid outlines on :active (mouseclick), but preserve outlines on
:focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active,
#cboxSlideshow:active, #cboxClose:active { outline: none; }
#cboxSlideshow { position: absolute; top: -20px; right: 90px; color:
#fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px;
margin-top: -32px; background:
url(https://sites.google.com/site/techprevue/home/controls.png)
no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; }
#cboxPrevious:hover { background-position: bottom left; } #cboxNext {
position: absolute; top: 50%; right: 5px; margin-top: -32px; background:
url(https://sites.google.com/site/techprevue/home/controls.png)
no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; }
#cboxNext:hover { background-position: bottom right; } #cboxClose {
position: absolute; top: 5px; right: 5px; display: block; background:
url(http://4.bp.blogspot.com/-wQsw3MW4DK4/Uc7_hhV5UzI/AAAAAAAAC1U/Uskeu5jhHbo/s130/controls.png)
no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; }
#cboxClose:hover { background-position: bottom center; } 
—————————————————————————————————————


7.Now Search for </body> and paste the following code before </body> tag.

—————————————————————————————————————————-
<div style=’display:none’>
<div id=’facebook-popup’ style=’background:#fff;position:scroll;z-index:99999;’>
<div
style=’text-align:center;padding-top:15px’> <h3
style=’font-family: &apos;Source Sans Pro&apos;, Sans Serif;
Font-size: 18px; font-weight: 300px; ‘>Receive All Free Updates Via
Facebook.</h3>
<iframe allowtransparency=’true’
frameborder=’0′ scrolling=’no’
src=’//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fgammerson&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=’

style=’border:none; overflow:hidden; width:342px; height:300px;’/>

  </div>
  </div>
  </div> 
—————————————————————————————————————————–

8.Replace gammerson with your Facebook page username.
9.Save your template and you and you are  done.

Plz inform me if I missed anything.
Thank You…:) 

 Related Posts:

1. How to Unsubscribe all at once (gmail/yahoo)

2.Google Dorks [Must see] 

3. Crack software And run it for liftime

4.Top 10 Vbscript Codings To Play Prank With Friends 

5. Top Windows 7 Tips and Tricks DOn’t MiSS It