Home Facebook Facebook Like Box Pop Up Widget – Extended Version

Facebook Like Box Pop Up Widget – Extended Version

1 96

facebook likebox Facebook Like Box Pop Up Widget   Extended VersionMost of our readers want to use Facebook Likebox with Lightbox effect including one time popup for single user in n number of days. There are Number of such widget available on the web. We are providing same thing but with new GUI. I hope this interface you’ll like most. I have managed widget GUI with the help of ‘Colorbox – A jQuery Lightbox’ by Jack Moore. I am here launching Facebook Likebox Extended with white and black lightbox effect. You can choose any of these as per your blog design or choice. This widget’s customization is really simple. No tech knowledge will be necessary, just read this article carefully. This widget is designed and optimized with HTML5 so your site/blog performance will not be compromised anyhow.

Facebook Likebox Extended with White Lightbox Effect

facebook likebox colorbox light 274x300 Facebook Like Box Pop Up Widget   Extended Version

<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Facebook Likebox using jQuery Lightbox - Extended v1.0
Source Url: http://www.techprevue.com/facebook-like-box-pop-up-widget-extended-version/
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
jQuery Colorbox Credit: http://www.jacklmoore.com/colorbox/
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="//sites.google.com/site/techprevue/home/jquery.colorbox.min.js"></script>
<link rel="stylesheet" href="//sites.google.com/site/techprevue/home/colorbox.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"430px", height:"470px", inline:true, href:"#tP"});
}
});
</script>
<div style="display:none">
<div id="tP" style="background:#fff;position:scroll;z-index:99999999">
<div style="text-align:center;padding-top:15px">
<h2 class="tP">Subscribe all latest updates via Facebook</h2>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&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=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:342px; height:300px;" allowtransparency="true"></iframe>
<p style="font-size:xx-small"><a href="http://www.techprevue.com/2013/05/facebook-likebox-using-jquery-lightbox.html">Facebook Likebox using jQuery Lightbox v1.0 Extended by Tech Prevue</a></p>
<!-- DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA. -->
</div></div></div>
<style>
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%;background:#fff}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative;background:#fff;overflow:hidden}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px}#cboxTitle{margin:0;position:absolute;bottom:0;left:0;text-align:center;width:100%;color:#999}#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;background:#fff}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#colorbox{outline:0}#cboxTopLeft{width:25px;height:25px;background:url(//goo.gl/FZnJE) no-repeat}#cboxTopCenter{height:25px;background:url(//goo.gl/FZnJE) repeat-x 0 -50px}#cboxTopRight{width:25px;height:25px;background:url(//goo.gl/FZnJE) no-repeat -25px 0}#cboxBottomLeft{width:25px;height:25px;background:url(//goo.gl/FZnJE) no-repeat 0 -25px}#cboxBottomCenter{height:25px;background:url(//goo.gl/FZnJE) repeat-x 0 -75px}#cboxBottomRight{width:25px;height:25px;background:url(//goo.gl/FZnJE) no-repeat -25px -25px}#cboxMiddleLeft{width:25px;background:url(//goo.gl/bhmpc) repeat-y}#cboxMiddleRight{width:25px;background:url(//goo.gl/bhmpc) repeat-y -25px 0}#cboxError{padding:50px;border:1px solid #ccc}#cboxCurrent{position:absolute;bottom:0;left:100px;color:#999}#cboxLoadingOverlay{background:url(//goo.gl/o98PY) no-repeat 5px 5px #fff}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;bottom:0;right:42px;color:#444}#cboxPrevious{position:absolute;bottom:0;left:0;color:#444}#cboxNext{position:absolute;bottom:0;left:63px;color:#444}#cboxClose{position:absolute;bottom:0;right:0;display:block;color:#444}.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)}
</style>

Facebook Likebox Extended with Black Lightbox Effect

facebook likebox colorbox dark 292x300 Facebook Like Box Pop Up Widget   Extended Version

<!--
DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA.
Facebook Likebox using jQuery Lightbox - Extended v1.0
Source Url: http://www.techprevue.com/facebook-like-box-pop-up-widget-extended-version/
This widget is distributed under cc license - BY-NC-ND INT. No-derivatives Allowed.
jQuery Colorbox Credit: http://www.jacklmoore.com/colorbox/
Please keep intact this copyright notice if you are using or distributing this widget on your website/site/blog.
-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="//sites.google.com/site/techprevue/home/jquery.colorbox.min.js"></script>
<link rel="stylesheet" href="//sites.google.com/site/techprevue/home/colorbox-dark.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", height:"430px", inline:true, href:"#tP"});
}
});
</script>
<div style="display:none">
<div id="tP" style="background:#fff;position:scroll;z-index:99999999;">
<div style="text-align:center;padding-top:15px">
<h2 class="tP">Subscribe all latest updates via Facebook</h2>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftechprevue&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=" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:342px; height:300px;" allowtransparency="true"></iframe>
<p style="font-size:xx-small"><a href="http://www.techprevue.com/2013/05/facebook-likebox-using-jquery-lightbox.html">Facebook Likebox using jQuery Lightbox v1.0 Extended by Tech Prevue</a></p>
<!-- DO NOT REMOVE OR MODIFY THIS CODE BEYOND PERMISSIONS. RESPECT DESIGNER, RESPECT DMCA. -->
</div></div></div>
<style>
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%;background:#000}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative;margin-top:20px;background:#000}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch;border:5px solid #000;background:#fff}#cboxTitle{margin:0;position:absolute;top:-20px;left:0;color:#ccc}#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;background:#fff}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#colorbox{outline:0}#cboxError{padding:50px;border:1px solid #ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(//goo.gl/YBXu4) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:none}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(//goo.gl/2te5t) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(//goo.gl/2te5t) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(//goo.gl/2te5t) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background:bottom center}
</style>

Customize Facebook Likebox – Extended

Above in both of the widget codes you have to change following values -

1. 30 (Highlighted in Green Color) ::
Number of days when Facebook Likebox cookie will expire and this will be visible to re-visited readers. Default value is 30 days, you may set this value to 1, 2, 3, 4, 5,… n. i.e. 7 Days, 15 Days, etc.

2. techprevue (Highlighted in Orange Color) ::
Change this value with your Facebook page ID to work this widget for you.

Adding this widget to Blogger

Go to Dashboard › Select blog › Layout › Add a Gadget › Add HTML/JavaScript Gadget › Paste any widget code › Save Gadget › Done

Now you’re done. Enjoy Extended Facebook Likebox.

© Tech Prévue Labs · तकनीक दृष्टा – http://www.techprevue.com

Please share your views with us...

Loading Disqus Comments ...

1 COMMENT

Leave a Reply

four × = twenty four