My friends were asking me about Google+ Add to Circles Popup Widget with Lightbox Effect including one-time popup for a single user in n number of days. I did not found such widget on the web through a google search. So I planned to create and share with your friends. I am using GUI of “Facebook Likebox Extended using Colorbox jQuery Lightbox “, that I have published a few days ago. I have managed widget GUI with the help of “Colorbox – A jQuery Lightbox” by Jack Moore. I am here launching Google+ Add to Circles widget with white and black lightbox effect. You can choose any of these as per your blog design or choice. This widget’s customization in really simple. No tech expertise is necessary, just read and follow this article carefully. This widget is designed and optimized with HTML5 so your site/blog performance will not be compromised anyhow.
Google+ Add to Circles Popup Widget with Lightbox Effect – WHITE
If you want this Widget, copy this Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//yourjavascript.com/34011553541/jquery-colorbox-min.js"></script>
<script>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
}
jQuery(".open_popup").colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
});
</script>
<div style="display:none">
<div id="tpbox" style="background:#fff;position:scroll;z-index:99999999">
<div style="text-align:center;padding-top:15px">
<h3>
Subscribe us via Google+</h3>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+TechPrevue" data-source="blogger:blog:followers" data-width="350"><a href="https://www.techprevue.com">.</a></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</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/6qCzGf) no-repeat}#cboxTopCenter{height:25px;background:url(//goo.gl/6qCzGf) repeat-x 0 -50px}#cboxTopRight{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat -25px 0}#cboxBottomLeft{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat 0 -25px}#cboxBottomCenter{height:25px;background:url(//goo.gl/6qCzGf) repeat-x 0 -75px}#cboxBottomRight{width:25px;height:25px;background:url(//goo.gl/6qCzGf) no-repeat -25px -25px}#cboxMiddleLeft{width:25px;background:url(//goo.gl/95jNER) repeat-y}#cboxMiddleRight{width:25px;background:url(//goo.gl/95jNER) 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/X52iQ2) 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>
Google+ Add to Circles Popup Widget with Lightbox Effect – BLACK
If you want this Widget, copy this Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//yourjavascript.com/34011553541/jquery-colorbox-min.js"></script>
<script>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
}
jQuery(".open_popup").colorbox({width:"440px", height:"500px", inline:true, href:"#tpbox"});
});
</script>
<div style="display:none">
<div id="tpbox" style="background:#fff;position:scroll;z-index:99999999">
<div style="text-align:center;padding-top:15px">
<h3>
Subscribe us via Google+</h3>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/+TechPrevue" data-source="blogger:blog:followers" data-width="350"><a href="https://www.techprevue.com">.</a></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</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/fJUeaf) 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/Zogv65) 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/Zogv65) 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/Zogv65) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background:bottom center}
</style>
Customize Google+ Add to Circles Popup Widget with Lightbox effect
Above in both of the widget codes, you have to change the following values –
1. var fifteenDays = 1000*60*60*24*15;:: No. of Days when Popup widget will appear to the same person::
A number of days when Google+ Add to Circles Popup Widget cookie will expire and this will be visible to re-visited readers. The default value is 15 days, you may set this value to 1, 2, 3, 4, 5,… n. i.e. 7 Days, 15 Days, etc.
2. +TechPrevue:: It is Google+ profile ID::
Change this value with your Google+ profile 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 Google+ Add to Circles Widget with Lightbox effect.
बहुत सुन्दर प्रस्तुति…!
—
आपकी इस प्रविष्टि् की चर्चा आज रविवार (16-03-2014) को “रंगों के पर्व होली की हार्दिक शुभकामनाएँ” (चर्चा मंच-1553) charchamanch_blogspot_in पर भी है!
—
सूचना देने का उद्देश्य है कि यदि किसी रचनाकार की प्रविष्टि का लिंक किसी स्थान पर लगाया जाये तो उसकी सूचना देना व्यवस्थापक का नैतिक कर्तव्य होता है।
—
रंगों के पर्व होली की हार्दिक शुभकामनाओं के साथ।
सादर…!
डॉ.रूपचन्द्र शास्त्री ‘मयंक’
Thanks Manyank Ji
Thank you for the code. How would you add this to a wordpress blog? Would it go in the head, footer, or some other way? I’m using a genesis theme with a child theme on it.
Hi Kelley
You can save code in a Text Widget, It will work. Only if you are using Google+ Button. Otherwise addition code will be required.
<!– Place this tag after the last widget tag. –>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = ‘https://apis.google.com/js/platform.js’;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Regards
Thank you. I added both those codes to graywolfsurvival dot com/
First question though: it appears to show up every time I go to the page and not wait 30 days. Do you know why?
Second question: how do I have it delay for xxx seconds before it pops up so people can decide to add me after they’ve had a chance to read my site for a bit instead of it being the very first thing they see? If I go to a site and the first thing I see is a popup, I’m most likely going to close the tab. If I really want the info, I’ll close the popup and read but then the moment is gone. I’d like them to read for a couple minutes and then ask them.
Third question: I see that it pops up even if I’m already added to a circle. Is there a way to have it not pop up if I’m already in a circle?
Sir we have fixed the bug of popup every time…
You have to copy the code again to use it.
Note: xxx Seconds and already added to circle options are not available in this release.
Regards
That seems to fix the popup from happening every time. Thank you.
Please let us know when you can put in a delay. It is not nearly as useful without it because the first time a person comes to a website, they will not usually agree to follow or sign up until they’ve at least had a chance to look around.
This is much more important than figuring out if they’re already following.
I completely agree with you. Asap we work on it and let you know.
Regards