Plugin for Sharing on Google+ from any website

This is a guest post from Alex Moss. He is Co-Founder and Technical Director at 3 Door Digital, and develops WordPress plugins. He found a way to share to Google+ from an external site, similar to the tweet button, and wanted to share it with SoS readers. The post has been updated after the launch of Alex’ plugin.

The Problem

Since Google+ launched, I have been asked a few times about whether there is some WordPress plugin or code to allow people to share a URL to Google+ from outside Google+ itself, in the same way a tweet, like or +1 button behaves. In short, there wasn’t one. I don’t understand why, because as an SEO I’d want to make sure this was available immediately or at least used the +1 button somehow to add functionality to share the +1′d URL within Google+ for all/your circles to see. There is one now however!

The Solutions

There are different ways of approaching this: using a WordPress Plugin or using a piece of code.

The Plugin

Alex has made a plugin to do this, which you can download here or in the WordPress Plugin Directory.

Installation:

- Download the plugin direct from the Plugin Page at WordPress.
- Upload the whole plugin folder to your /wp-content/plugins/ folder.
- Go to the Plugins page and activate the plugin
- Insert the shortcode!

Using the shortcode

You can also use the Google +1 button as a shorrtcode. Simply enter the following shortcode within a page, post or text widget. Here’s an example:

[ google1 ]

The ‘old’ Solution: code

When Alex originally wrote this post he used the method described below, which now is outdated. We however for future development purposes (you might just get an idea out of it) decided to keep the explanation up:

At the moment there’s still nothing official available that will let you do this, however, I realised that I could use the share URL from the mobile site and manipulate it to behave how I want.

Step 1: Get a Good “share” button image

I modified the wide +1 button and changed the text to “share”. I made both the grey and blue versions of it below:

Step 2: Grab the Code

Here’s some sample code:

<a href="https://m.google.com/app/plus/x/?v=compose&content=INSERT_MESSAGE_HERE_WITH_URL_IF_YOU_WANT" onclick="window.open('https://m.google.com/app/plus/x/?v=compose&content=INSERT_MESSAGE_HERE_WITH_URL_IF_YOU_WANT','gplusshare','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;"><img src="http://path.to/plus.png" alt="Share on Google+" width="55" height="22" /></a>

The URL linked to contains the parameter content. This parameter will automatically generate as the post when the widow opens. I have also added 2 things into the <A> tag:

rel=”nofollow”
The JS window.open() function to open the window as a pop in the center of the screen. To find a tidier version of the center of the screen JS, click here.

Here’s a working example of the button, sharing this article. Note that this will open a new window but will ignore the window.open() command:

Optional Step 2.5: Insert into WordPress

WordPress is awesome, but you knew that already. WordPress here will be your friend by choosing all the 3 parameters automatically. I can edit the code slightly from Step 2 and I end up with this:

<a href="https://m.google.com/app/plus/x/?v=compose&content=<?php the_title(); ?> - <?php the_permalink(); ?>" onclick="window.open('https://m.google.com/app/plus/x/?v=compose&content=<?php the_title(); ?> - <?php the_permalink(); ?>','gplusshare','width=450,height=300,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-150)+'');return false;"><img src="http://path.to/plus.png" width="55" height="22" alt="Share <?php the_title(); ?> on Google+" title="Share <?php the_title(); ?> on Google+"></a>

NOTE: Insert this within your theme directly, not a post or page. For some reason I have noticed that WordPress removes the window.open command when inserted within a post/page.

The Limitations:

There are 3 limitations to this:

The popup doesn’t look pretty, but that can be designed around if you want. I just white labelled it for you
You can’t choose individuals to share with, but you can choose all circles and the general public.
The shared URL doesn’t get optimised/embedded into the post as you would when sharing a URL the traditional way.