Code.
As if your social media sharing bar isn't completely full enough already, Google decided in their infinite wisdom to also add theirs to the mix. Let's for once get a little ahead of the marketing boys and girls and teach ourselves a bit about it, so that we can all have something to add when the inevitable "We should add this to our site" discussion / case / email comes up.
Okay, I'm being pessimistic, it does sound like it could be useful in time. Let's look at this video below for some more information:
Add it to your site
Actually adding the Google +1 button to your site is as easy as it gets. All you have to do is copy and paste the below code into your site or the template files of your theme if you run a CMS (Like Drupal or Wordpress to name but a few).
<!-- Place this tag in your head or just before your close body tag --><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone></g:plusone>
Upload it to your live site, and wham, just sit back and wait for your +1 fame to come rolling in.
Remember that you only add the javascript code once, even if you want to run multiple instances of the <g:plusone> code! It's clever like that.
Top Tip
I see that Addthis.com has already added this to their service. If you use Addthis (you should, it's a really cool service) then you can just update your addthis code to show the new Google +1 button. Or just add this line to your existing addthis code:
<a class="addthis_button_google_plusone"></a>
But wait, there's more!
There are some level of configuration options available to you, the intrepid website owner / webmaster / designer / developer. Let's take a moment to go through them a bit.
Sizing
You can choose between some size and layout options and ultimately choose the one that fits your site the best (Remember to think about all the other social sharing buttons you already have. The aim is to make it fit that.)
- Standard
- Small (Just add size="small" like: <g:plusone size="small">)
- Medium (Just add size="medium" like: <g:plusone size="medium">)
- Tall (Just add size="medium" like: <g:plusone size="medium">)
Multiple instances
You can do that too. Let's say you want to add a Google +1 button inside each of your blog teasers for example. The Code works, like mentioned above, in the way that you only need the javascript line once per page. So in each listing you just add the <g:plusone></g:plusone> code!
Oh, but what about the urls though? Google won't know all by itself that you are pointing that specific +1 button to the url that the blog teaser points to. So we need to add one more thing:
That's the same syntax you use within the dead standard <a> tag, so it should be kinda familiar to you!
So our code unit will look like this:
<!-- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.example.com/blog/special-article/I-am-cool" size="small"></g:plusone>
That's pretty straightforward right? It really is!
A few things to know
Before you go all wild and stuff, just be sure to take note of some info that could be important to you.
- +1 button is available in 40 languages, but the annotations are only available in English at the moment. I'm sure this will change in time, but for now that's it.
- +1 is a PUBLIC action. Don't put it on pages that are behind paywalls, user restricted pages or anywhere you don't want the general internet population to go.
- Google +1 is not Google Buzz. You can use both, either one or neither. It really is up to you and they kind of content you have.
- At this time, Google +1 is not available to the mobile web, but users may see the button if they browse your site on their mobile device
- In Google's search results you will only see the button if you are actually logged in, although all users will see the button if you add it on your own site
- There are a few things you need to consider with regards to traffic, indexing etc, so go ahead and read through the Google FAQ page on +1: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=1140194
Before we go
Remember to let sanity prevail. Content should still be more prevalent that the millions of social sharing buttons you have to share that content. Keep that in mind! I really hope this was usefull to you! My very first tutorial-type post!
Add new comment