How To Add Facebook Popup Like Box To Your Blogger/Website

The pop -up as the box is not designed to make your blog the advantages it seems, the widget designed to be more like Facebook . This box also has a close button on the upper right corner . The visitor can close the widget by clicking the close button. Players really annoying popup when visitors appear again and again, but help you in developing your blog and , when used properly . Facebook is a great source of traffic you can submit your blog a good flow of traffic when you have enough fans on your Facebook page . To expand its network and increase Facebook fans of your Facebook page , I brought an elegant popup widget OneTime Facebook Like for your blogger blog listed only once , so you will increase your Facebook fans without irritating dramatically his visitor. Facebook popup widget to store a cookie on the visitor's browser . When readers visit your blog first time Facebook like box is displayed on the player as the visitor navigates to another page or visit later as the picture never appears again if readers do not their browser cookies.

Live Preview

How to install this widget to your blogger/website
Before changing any template is best to keep a backup .. So first backup your template.

1. Go to your Blogger Dashboard Template Editing HTML >>>>

2. Find this code in your template.

</head>

3. Then,  paste the following code before/above </head>

=================================Start Coding==========================================

<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>

=================================End Coding==========================================

Setting this value will affect cookie soda. I have given the Likebox appear once for the visitor and Likebox reappear after 1 week. If you want to display visitors Likebox after 1 day and then set 7-1. if the value is set to 1, then you can annoy your regular readers.

4. Now Search for </b:skin>.  Press ctrl+F in your html area, hit enter.

=================================Start Coding==========================================

/* 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/AVvXsEgD1WpAYABqgz7PsWxaowvAX2QNEr1MlcZ0azRSWaqmq0kLk3RXU-JEfpnLyR05bBNoZ2SBRN9Rsee6RuPgQUW-7jGn9KOFJqPFQ37z6f6FcT191AI9WuxiUEQYC2MnrcdUX7kG6TMuavdp/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixpLpWWQkKs1C8NXxW24vC0mW3C0bi16H_kCdPa-VXBWyFDV3aOHTvIPa7x9wrGAW4CEy1DQCl2qLvOWUCAJwS1vN1qpVt6ZXKg75yB1eINWGx09yiCDivyqbXupe_n9XWcjsZaRttJ7fB/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }

=================================End Coding==========================================

6. Save the template and you are penultimate step! Visit her blog to see it working perfectly.
7. Now finally finding this code.

</body>

8. Now paste the following code before closing </body> tag.

=================================Start Coding==========================================

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

=================================End Coding==========================================

Replace mygalaxytricks your Facebook fan page username. Save the template and you're all done. .!

Visit their blogs and see it appear great! Remember the popup is displayed only once. To see it again, you must first remove the cookie from the browser and refresh the page to see it reappear.
I just hope I can find this tutorial easy and exciting though. Please let me know if you need any help. I just hope that you can make strong growth in Facebook fans. We wish you success and peace friends. Stay updated by subscribing to our news feed or email our Facebook page.