Hi Guys,
For a new project of mine there were couple of requirements which gave birth to a couple of useful jQuery code snippets or in other words plugins.
One of them is called jcPlusBtn.js
This is a little jQuery code that you can use as a plugin that will page Google Plus button on any HTML element, callbacks are supported.
Lets get started
The jQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
/* * Google +1 Button jQuery Plugin * Copyright 2013, Jaspreet Chahal * Free to use under the MIT license * http://www.opensource.org/licenses/mit-license.php */ jQuery.fn.jcPlusBtn = function( settings ) { settings = jQuery.extend( { href: window.location, size: "standard", // small | medium | tall | standard annotation: "inline", // inline | bubble | none callback: function(){}, async:true, html5:true, width:300 // if not HTML5 then specify width }, settings ) var jcPlusOneButtn = ''; if(settings.html5) { jcPlusOneButtn = '<div class="g-plusone" data-size="'+settings.size+'" data-annotation="'+settings.annotation+'" data-callback="'+settings.callback+'" data-href="'+settings.href+'">'; } else { jcPlusOneButtn = '</g:plusone>'; } // Render +1 Button on target DOM element(s) return this.each(function() { jQuery(this).html( jcPlusOneButtn ); var standardGooglePlusScript = document.createElement("script"); standardGooglePlusScript.type = "text/javascript"; standardGooglePlusScript.async = settings.async; standardGooglePlusScript.id = "_googleplusbtn_jcgp"; standardGooglePlusScript.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(standardGooglePlusScript, s); }) }; |
The Markup
What we need is pretty much a DIV or any other container element to place our Google Plus button.
|
1 2 |
<div id="myDiv"></div> <div id="myDiv2"></div> |
Options
|
1 2 3 4 5 6 7 8 9 |
{ href: window.location.href, // URL to plus one size: "standard", // size of Google plus buttin, possible values: small | medium | tall | standard annotation: "inline", // annotaion type: inline | bubble | none callback: function(){}, // this function must be in Global scope, async:true, // true if action needs to be asynchronous html5:true, // if generated code needs to be HTML5 compliant width:300 // if not HTML5 then specify width } |
Usage
This plugins is rather easy to use and an example of this is shown below
|
1 2 3 4 |
jQuery(document).ready(function(){ jQuery("#myDiv,#myDiv2").jcPlusBtn({annotation:'bubble', href:"http://jaspreetchahal.org/"}); }) |
Its that simple actually.
Demo
Nothing is complete without a demo. See this plugin in action here
http://jaspreetchahal.org/examples/jquery-examples/likes/googleplusone.html
Donate
If you like this Plugin, please consider donating
You can choose your own amount. Developing this plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work.
If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to
help support future updates and development.
Main uses of Donations
- Web Hosting Fees
- Cable Internet Fees
- Time/Value Reimbursement
- Motivation for Continuous Improvements
License
This plugin is available under MIT license You can read it here
http://opensource.org/licenses/mit-license.php
Download
Code is hosted on Google Code and you can find it here
https://code.google.com/p/jcplusbtn/
There were couple of more things that I would have liked to do with the callbacks, but I have left it to you to handle the callback properly.
I hope that this helps, Don’t forget to donate if it does 🙂
Cheers,
Leave a Reply