How to add facebook popup 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/AVvXsEjbN_B_8SivJkkA6Ew4j3G9D1P68CMKzA3VxN2xvuxVF0bDbaV0piRj2yZHwD88TFG10-whASKz3gEsZioAlkTunXNhQp3XPsNhoxeNM8x_tsZPVI0xSfZio7rKJeNywbStimsCFLD3WII/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/AVvXsEin5mwJmF3NiNnPvMBVSjWPpsTPa4LO2irLUWFDZtXFxwDycsE_MqUq1VCRDnVTMR8uj28cbnHGwWuDwvu_8cHdJPGMfk6fvDvJ4ALYeGQ80Fz01mIlDmwM72QLOR2dFyQ37HpDqdKz3ZM/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/AVvXsEin5mwJmF3NiNnPvMBVSjWPpsTPa4LO2irLUWFDZtXFxwDycsE_MqUq1VCRDnVTMR8uj28cbnHGwWuDwvu_8cHdJPGMfk6fvDvJ4ALYeGQ80Fz01mIlDmwM72QLOR2dFyQ37HpDqdKz3ZM/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/AVvXsEisrVY2-7ncfwMH_cRx5B59op5zxk_i0BsX4q7rAVuPRqyb0HbNaGf4fC-yA_NNgqZ-jXLmjHxuaglT7DIfb_9uwfheN3xPrA-N1dQd-jDp2BXcbwG5u025ygXI9VyBkehLjAAqWGY9_KI/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%2Fpctrickblog&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 pctrickblog with your own facebook page username and save your template. Now, you can see your facebook page popup box when you open your blog.