So, now that the Google +1 button seems to be taking off, I've been wondering if it was possible to include them in our beloved opensource projects hosted on GoogleCode.
I found a way to include it on my project ACRA (Application Crash Reports for Android) and thought it would be interesting to share the result of my 1 hour battle with the Gadgets API.
The solution is quite simple actually, but not exactly straightforward:
- Create somewhere in your svn repository a folder where you will upload two files (I chose to put them in /wiki/gadget):
- plusone.xml - with the following content:
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Google +1" />
<Content type="url" href="http://yourproject.googlecode.com/svn/wiki/gadget/plusone.html" />
</Module>
- plusone.html - with the following content:
<html>
<head>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
</head>
<body>
<g:plusone href="http://yourproject.googlecode.com"></g:plusone>
</body>
</html>
- When putting plusone.html in SVN, you have to set the property svn:mime-type to text/html or your file will be considered as raw text and the content will not be rendered.
- In your project's main page, include the following tag where you want to place your +1 button:
<wiki:gadget url="http://yourproject.googlecode.com/svn/wiki/gadget/plusone.xml" width="120" height="50" border="0"/>
That's all.
You see, that wasn't that hard. But now you just have to copy paste this instead of spending some time reading the Google Gadgets API documentation, failing when trying to include the html code in the gadget xml file, etc.
Bye.
Edit: adding a Twitter button is as easy as the +1 button... just add the following code under the g:plusone tag:
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://yourproject.googlecode.com" data-text="The message you want to be tweeted" data-count="horizontal" data-via="YourTwitterAccount">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
You'll have to adjust the gadget width, too. Adding size="medium" to the g:plusone element will give you a consistent size for the 2 buttons.
Edit: adding a Twitter button is as easy as the +1 button... just add the following code under the g:plusone tag:
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://yourproject.googlecode.com" data-text="The message you want to be tweeted" data-count="horizontal" data-via="YourTwitterAccount">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
You'll have to adjust the gadget width, too. Adding size="medium" to the g:plusone element will give you a consistent size for the 2 buttons.
No comments:
Post a Comment