How to add facebook popup like box widget in blogger

Facebook popup like box is a handy widget which increases your facebook page likes and helps in building large number of audience. Using facebook popup like box is a good practice but you must keep it in mind that your facebook popup like box must not appear every time when a visitor opens any page. So you must use cookies to set the appearance of facebook popup like box at a fixed time interval. Now let us see how to add this popup like box in your blogger blog.

• Login to your blogger account and go to Template > Edit HTML
• Now, find the code </head> and just before </head>, copy and paste the following code:

<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*5; 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>

Note: In the above code, 5 is the number of days after which the popup box will appear again to the visitor. You may change it with any value between 1 to 7.

• Now search for the code </b:skin> and just before </b:skin> copy and paste the following CSS code:

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkGCr_XGCVOL0Chln3_QQbR861mtSflAHcCSOjr_kFAbzwDEMKB2P6pVygThgsWFv9EeVGtSNFm2ul8oAqL6hhqZi72FxS2aDjlulP1jQF2vEHyjNlXLr3SGnDCSm3A_GBfKLGQVqhpkY/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXMvF_oEMvfVWegcKH6g_T5FwnxgLbX2Z-nq_P4BfX6Xs4up8gMDKmpMNMj_VsVOiWpaD1VekFnofzk4hvb6__IZf8WygWyZJSGMPcOBx3nq7j1BLFMp6yKex2OFYl3LFhyphenhyphenpWiU6tZG4/s1600/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrXMvF_oEMvfVWegcKH6g_T5FwnxgLbX2Z-nq_P4BfX6Xs4up8gMDKmpMNMj_VsVOiWpaD1VekFnofzk4hvb6__IZf8WygWyZJSGMPcOBx3nq7j1BLFMp6yKex2OFYl3LFhyphenhyphenpWiU6tZG4/s1600/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1UIa1bT4ArY1wOodmULII24linCe6X60PSfSGsgHgyh35wbYwgjq0WMz-B635IwqOM0PedCFmrGGLSrcIMvNPcEeJ5hAKT5gaNmPvdM5Cvw8FLdnXwhBiHazZ39wkr5piRoRX06YTjI/s1600/controls1.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

• Now, let's move towards the last step. Find </body> in your template code and just before </body>, copy and paste the following code:

<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%2Fpctricksguru&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>

• Now, replace pctricksguru with your own facebook page username and save your template. Now, you can see your facebook page popup box when you open your blog.

Alternate method to add popup like box in blogger: 

If you are lazy in doing coding work, then you can follow the alternate method. Just go to your blogger Layout section and add a new widget. Now copy and paste the following code:

<style type='text/css'>
#pctricksguru {position:fixed !important;position:absolute;top:200px;left:40%;margin:0px 0px 0px -182px;width:300px;height:auto;padding:16px;background:#FEFEFE;font:normal Dosis, Georgia, Serif;color:#111;border:2px solid #333;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#pctricksguru a.bsclose {position:absolute;top:-10px;right:-10px;background:#fff;font:bold 16px Arial, Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#000000;border:2px solid #333;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:25px;cursor:pointer;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>
<script type='text/javascript'>
$(window).bind("load", function() {// Animate Top$('#pctricksguru').animate({top:"50px"}, 1000);$('a.bsclose').click(function() {$(this).parent().fadeOut();return false;});});</script>
<div id='pctricksguru'>
<!-- Widget by www.pctricksguru.com Start -->
<div align='center'>
<b>
<a class="pctricksguru">Like Our Facebook Page </a>
</b>
</div>
<div align='center'>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpctricksguru&amp;width=295&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:295px; height:258px;" allowtransparency="true">
</iframe>
</div>
<!-- Widget by www.pctricksguru.com End -->
<a class='bsclose' href=''>&times;</a><center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">Computer Tips and Tricks</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.pctricksguru.com">Get this Widget on your Blog</a></center></div>

Note: Replace pctricksguru from the above code with your own facebook page username.
Keep visiting this blog for more tips and tricks. Have fun...!!