How To Get +1 Button For Your Website
Google’s CEO Larry Page just announced 10 Million Google+ users this evening. I’d guess most of those are tech savvy early adopters, click- and share-happy social networkers. With Google+ buzzing (pun intended) even before its official launch, you probably thought about adding a Google +1 button to your website. It could send a quickly growing traffic stream to your site.
It’s the same like adding a Facebook share button or a twitter button to your site. A Google +1 button allows people to share your website with the social circles on Google+.
It comes in 4 different sizes: small, medium, standard, and tall.
In this post I’m giving you the simple code to copy and paste to have your own Google +1 button on your site within minutes.
Here’s how to get the +1 button for your web site, it’s easy to do. You need only 2 things:
1. In your web page’s source code you need to link to some Google JavaScript code that will integrate the button’s features into your site. That’s just 1 line of code, and it’s the same for all pages and for all button variations. It looks like this:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
Where to put it?
Technically correct you could put it into the head section of your page, for example right before the closing head tag.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script></head>
Or you could put it close to the end, right before the closing body tag.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
2. Next you need to put the actual button into your web page. You can chose to use a standard button without adding any properties. The basic code is unbelievably short:<g:plusone></g:plusone>Yes, that’s all you need to make the +1 button show up anywhere in your page
Add a +1 button, the quick & dirty way.
By ‘quick & dirty’ I mean: not worrying where to put the JavaScript. Just put it all together with the button itself.
In your web site’s source code find the spot where you want the button to show. Then enter the following code into your site.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone></g:plusone>
It will look like this:
How to customize your Google +1 button
If you want more control, you can chose one of the 4 sizes shown above, and you can chose NOT to display the share count. Here’s the code ready to copy and paste:
Small button with count:
<g:plusone size="small"></g:plusone>
Medium button with count:
<g:plusone size="medium"></g:plusone>
Standard button with count:
<g:plusone size="standard"></g:plusone>
Tall button with count (it’s not available without):
<g:plusone size="tall"></g:plusone>
Small button without count:
<g:plusone size="small" count="false"></g:plusone>
Medium button without count:
<g:plusone size="medium" count="false"></g:plusone>
Standard button without count:
<g:plusone size="standard" count="false"></g:plusone>
In this post I wanted to give you a super fast and easy way to get the +1 button for your site, and I’m sure it’s enough for 95% of all web masters. For the geeks: besides ‘size’ and ‘count’ there are more parameters you can use. The complete documentation for the button can be found here:
https://code.google.com/apis/+1button
By the way: all those buttons above are working, feel free to click and share this post.