Sticky Google Plus Badge For Websites/Blogs

Sticky Google Plus Badge For Websites/Blogs

The Google+ Badge is the most reliable way to reach a wider audience and get more followers for your Google+ page, profile or community. Although the Google+ Followers widget is quite amazing but you cannot ignore the uniqueness of the ‘Sticky’ Google+ Badge widget.

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

This image is a good preview of the Google+ Badge but lacks the sticky function. To view a complete demonstration on how this widget works, kindly visit the demo page.

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

The ‘Sticky’ Google+ Badge in our demo page uses our official Google+ page. But you can as well use your profile page or your community id.

Installing Sticky Google+ Badge

To install ‘Sticky’ Google Plus widget to your website, kindly paste the code below anywhere you want the badge to render.

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!

Leave a Reply