US
NG
GH
Sticky Google Plus Badge For Websites/Blogs
- Ebenezer Obasi
- September 8, 2013
- (0 Comments)
The ‘Sticky’ Google+ Badge lets you place a unique Google+ Badge to your website that stick to the top of your screen when it reaches it. (If you want to learn how you can stick any widget to the top of the page when it reaches it, kindly follow the tutorial here. Meanwhile you can follow the tutorial here to add sticky tooltip widgets to your website).
This widget uses the Asynchronous version of JavaScript and a little bit of css. So you don’t need to bother about website load-time as the effects in that regard is completely minimal.
Demo
Just incase you didn’t notice, we rolled out this demo page on Wednesday to help us develop more widget (incase of testing mods and widget) and to provide a clearer preview for our widgets and custom modification. To participate in this development, kindly request for invitation via our contact page.
Using Google+ Badge
Installing Sticky Google+ Badge
If you are using a CMS for your website, kindly add a new Custom text/HTML or HTML/JavaScript widget and paste the entire code below into your new widget, make the necessary changes and save your widget.
<!-- Place this tag where you want the widget to render. -->
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#scroller");
if(st > ot) {
s.css({
position: "fixed",
top: "0px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}</script>
<div id="sidebar" style="z-index:99;">
<div id="scroller-anchor">
</div>
<div id="scroller" style="margin-top:10px; z-index:99; position:relative;">
<div class="g-page" data-href="//plus.google.com/106554340003638873619" data-rel="publisher">
</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/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
<!-- GooglePlus Badge by www.eobasi.com Ends -->
Necessary Changes
- Change 106554340003638873619 to your Googl+ page, profile or community id.
- To use Googl+ Badge without sticky features, kindly use the code below.
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="//plus.google.com/106554340003638873619" data-rel="publisher">
</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/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Make sure to bookmark this page for future reference and remember to share these tips with your friends.
Recieve Free Email Updates!
Related Posts
