Fast forward to today and with the rise and rise of twitter and facebook, while organic Google traffic is for many sites still the main or a very large source of traffic, there are also social alternatives that can bring a great deal of traffic.

At the end of March Google announced the +1 button, a button similar to twitter’s tweet button and Facebook’s like button. Only a few months later Larry Page announced on the Google Q2 earnings call that users are already clicking the +1 buttons 2.3 billion times a day.

The +1 button is in itself an interesting proposition, being a sort of meta social network even before the release of the google plus social network proper.
It draws on your social graph from Gmail and Talk contacts, Reader and Buzz followings and of course now Google+ circles. Drawing from that graph, it shows next to search results your contacts have “+1′d”.

While Facebook and Twitter shares can deliver a viral (but usually) short term traffic boost, +1 can create a long-lasting increase in traffic to the +1′d page (by way of increased click through rate from the SERP).
Google’s result pages have been getting busier over the last couple of years, but +1′s and the experimental authorship initiative – ^[1] will create a competitively advantageous highlighting effect to certain results.

This is of course without mentioning the potential for Google using the +1 data in its search ranking algorithms. Google has already been using Facebook like and share data and presumably until the end of the twitter data deal it was/is using tweet data as ‘social proof’ too. The folks over at SEOmoz have carried some excellent testing to determine just how much of an influence this data has on rankings.

Luckily for you, the Google+1 button is also one of the easiest buttons to add to your pages. While Facebook requires you to add various XML namespaces and open graph tags (including specifying the page URL) to your document head, the Google+1 button crawls this data automatically.

As an experiment, I’ve just finished adding the +1 button in a prominent area on Arsenal News, a well established site relevant to this article only in that it currently gets a significant proportion of its visitors from twitter. I’m going to be adding the button to most (if not all) of my sites soon, but I will watch this one in particular with interest, to see if the addition changes the traffic mix at all.

[1] – And I’ll be adding the rel=author tag to my google+ wordpress plugin in one of the next updates. back to post

the google+ cards widget

The plugin adds a widget to your wordpress install that will display your ‘googleCard’ in your blog’s sidebar.

Download
Github

Installation

1. Download googlecards.zip and unzip
2. Upload the unzipped googlecards folder to the `/wp-content/plugins/` directory
3. Activate the plugin through the ‘Plugins’ menu in WordPress
4. Go to the ‘Widgets’ menu in WordPress and add the widget to your sidebar.
5. Choose a title for the widget and input your google+ id. (You can find your google+ id by going to your profile, it is the 21 digit number e.g. plus.google.com/YOUR_ID_IS_HERE).

If you like this plugin, please give it a rating and review on the WordPress Plugin directory

How to show the widget in a template

If you don’t have a widgetized sidebar or you would just like to display the widget somewhere in your template, you can do so by adding the following php snippet to your template where you want the googleCard to appear :

<!--?php 	$instance = array( 					'title' =--> 'Follow me on Google+', // your widget title
					'plus_id' => '111270891764039363851', // your google+ id
					'credit' => 1
					);
	$args = array('before_title' => '</pre>
<h3 class="widget-title">', 'after_title' => '</h3>
<pre>
');
	$gc = new GoogleCardsWidget();
	$gc->widget($args,$instance);
?>

Note : You will need version 0.4.3 or later for this snippet to work, and it is only needed if you don’t want to use the standard widget.

Changelog

0.4.7
Fixes the class names once again after a google+ change.

0.4.6
Fixes profile image and circle count fetching again. Pretty much same deal as last time.

0.4.5
Fixes profile image and circle count fetching problems. (Google changed the layout of user profiles which broke the scraper in the plugin).

0.4.4
Added option to add rel=”author” to google plus profile links, and the option to open the links in a new window / tab.

0.4.3
Added contribution from Joe Vaughan for using the WordPress 3.0 widget API so widget can be used in multiple sidebars. Thanks Joe, chapeau. Also added the option to disable the developer credit if you’re a really mean sort of person and removed the example Google+ ID. (note to wordpress.org – I am not Larry Page. Unfortunately. This message sent from my $45million luxury yacht)

0.4.2
Forever alone – fix for bug when no one has the google+ account in a circle.

0.4.1
Test for safe_mode and open_basedir. Fixes curl_setopt() bug.

0.4
Added file_get_contents as a backup for curl and use the transients API if we cant use a cache file. Tell curl not to verify https. Some minor css stuff.

0.3.1
Some css fixes for people with big names and small sidebars.

0.3
Fix for lowercase names in wordpress plugin directory

0.2
Fixed some caching and css problems

0.1
Initial release

FAQ

If you get ‘Couldn’t get data from Google+’ when running the plugin, before asking for help please turn on PHP error reporting and see if your error matches something in the FAQ.

1. I get the error “Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in plugins/googlecards/googleCardClass.php on line 25“.
This is a problem with your PHP setup. You are almost certainly running PHP4. The plugin requires PHP5. WordPress requires PHP5 after version 3.2 too. Talk to your host about using PHP5.

2. I get the error “Warning: file_get_contents() [function.file-get-contents]: Filename cannot be empty in /*****/*****/public_html/blog/wp-content/plugins/googlecards/googleCardClass.php on line 181“.
You probably have something other than your Google+ id in the Google+ id box. Make sure you just put in the numbers from the url of your Google+ profile and nothing else.

3. I get the error “Warning: file_get_contents(http://plus.google.com/*******… [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden“.
This is a HTTP 403 error from Google+, it means they have banned your server’s IP from making requests to their servers. This usually isn’t anything to do with the plugin (it makes very few calls to Google’s servers) and it is more likely that you are on shared hosting, and someone else who shares your IP has been scraping Google.

4. I get the error “file_get_contents(http://plus.google.com/… [function.file-get-contents]: failed to open stream: Unable to find the socket transport “ssl” – did you forget to enable it when you configured PHP?“.
Because Google+ is HTTPS, you need to get your host to enable openssl and configure it for PHP.

5. I get the error “Warning: file_get_contents() [function.file-get-contents]: URL file-access is disabled in the server configuration in /var/www/web1281/html/wordpress/wp-content/plugins/googlecards/googleCardClass.php on line 181“.
AND/OR I get the error “Warning: file_get_contents(http://plus.google.com/1082378… [function.file-get-contents]: failed to open stream: no suitable wrapper could be found in /var/www/web1281/html/wordpress/wp-content/plugins/googlecards/googleCardClass.php on line 181“.
The plugin requires either CURL or file_get_contents() to be enabled on your server.If your host gives you access to your php.ini then you can change the ‘allow_url_fopen’ setting to ’1′ which will fix your problem. Otherwise speak to your host and ask them to enable CURL or allow_url_fopen for you.

Updated 9/7/2011 : I’ve just uploaded a new version of the plugin to the wordpress directory (version 0.3.1). This hopefully fixes alot of the styling problems people with big names and small sidebars were having.
I’m also no-longer hosting the plugin here as you can get it from the official wordpress plugin directory now.
For people still having problems fetching data from google+, I hope to have that completely fixed in a later update but try using version 0.3.1 if you are using an earlier version.

Updated 11/7/2011 : I’ve just released a major update to the plugin, if you were having problems fetching google plus data please update your plugin to version 0.4 immediately. The new version no longer requires a file for caching (but will use it if it’s there) and adds a backup method for getting data from google+ that hopefully should fix most of the ‘Couldn’t get data from google+’ errors.
Update 2: Updated to 0.4.1 – I added a test to see if safe_mode is or open_basedir is set in php.ini – If they are google+ cards now avoids using curl to stop the Warning: curl_setopt() [function.curl-setopt]: CURLOPT_FOLLOWLOCATION cannot be activated when in safe_mode or an open_basedir is set in /wp-content/plugins/googlecards/googleCardClass.php error.
Update 3 : Version 0.4.2 – codenamed forever alone fixes a bug where the google+ card would not show if no-one had you in a circle.

Updated 14/7/2011 : I’ve just released version 0.4.3 of the google+ cards plugin. This should probably be considered a major update as it uses the WordPress 3.0 widget functions instead of the legacy ones, thanks to Joe Vaughan for the github contribution. This version therefore allows you to use the googleCards widget in multiple widgetised sidebars on your blog.
I had to remove the default Google+ ID by WordPress.org’s request and I have also included an option for you to disable crediting me in the widget if you’re cruel and heartless
One more thing! Because of the new way of hooking into wordpress widgets, when you upgrade to this version you will need to re-add the widget and put your Google+ id in again. Sorry, won’t happen again.

Updated 04/8/2011 : I’ve just pushed out version 0.4.5 of the googleCards plugin. This was a bit of a forced update as Google changed the structure of user profile pages on Google+, which broke the scraping function of the plugin. The new version should fix circle counts and user images not showing. You will need to either delete your cache file after updating or clear the wordpress transient cache. Otherwise wait a (default) maximum of 4 hours and it should start working again. Please don’t complain in the comments until you have either cleared the cache or waited 4 hours after updating, thanks!

Updated 01/02/2012 : Google+ changed the class names wrapping user pictures and follow counts so I’ve updated the plugin once more to 0.4.7. Please remember to clear your cache (plus_cards.txt) as before, or wait $cache_hours (default 4 hours) to see your profile data working again (also clear your sitewide cache if you have it and it is caching this too).

Demo
Files

(top) unformatted (bottom) google+ card

The googleCard scraper class currently outputs the target user’s name, profile image, google+ url and the number of people who have them in circles (are following their posts).

The full php code for the google+ scraper is available at github, so if you know what you’re doing you can just skip the blurb and download it from there.

Include the class

The first thing you need to do is grab the googleCard code from github.

This snippet is the bare-bones needed to use the class. It includes the class and sets an id to scrape.

The id in this example is for Larry Page, all you need to do to make it grab your details instead of his is to change $plus_id to equal your google+ id. You can find your google+ id by going to your profile, it is the 21 digit integer after plus.google.com

// put your google+ id here :
$plus_id = '106189723444098348646';

// include our scraper class
include_once('googleCard.php');

// initiate an instance of our scraper class
$plus = new googleCard($plus_id);

// do the scrape
$data = $plus->googleCard();

The googleCard class has some simple file caching built in.
If you would like to use caching you can just set :

$plus->cache_data = 0;

in between initialising the class and calling the googleCard(); method.
The cache uses a file at ‘cache/plus_cards.txt’ by default, you can change this easily in the googleCard class. If you decide to use caching, make sure you create the cache folder and give the web server permission to write to it.

Sample implementation

The implementation below uses the class to output the data in two ways.

The basic implementation just echoes out the user’s name, the amount of people following them and their google+ profile image.

The second implementation formats the data and creates a card that looks similar to the one seen when hovering over a user’s name on google+. It also allows you to click through to the user’s profile.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Google+ cards</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<?php
// put your google+ id here :
$plus_id = '106189723444098348646';

// include our scraper class
include_once('googleCard.php');

// initiate an instance of our scraper class
$plus = new googleCard($plus_id);

// enable caching (off by default)
$plus->cache_data = 0;

// do the scrape
$data = $plus->googleCard();

// if we have data, show the output
if (isset($data) && !empty($data['name']) && !empty($data['count']) && !empty($data['img']))
{
	echo $data['name'] . ' is followed by ' . $data['count'] . ' people <br />';
	echo '<img src="' . $data['img'] . '" width="80" height="80" />';
	echo '<br /><br />';
	?>
	<div id="plus_card">
		<div id="plus_card_image">
			<a href="<?php echo $data['url']; ?>">
				<?php echo '<img src="' . $data['img'] . '" width="80" height="80" />'; ?>
			</a>
		</div>
		<div id="plus_card_name">
			<a href="<?php echo $data['url']; ?>"><?php echo $data['name'] ?></a>
		</div>
		<span id="plus_card_add">
			<a href="<?php echo $data['url']; ?>">Add to circles</a>
		</span>
		<div id="plus_card_count">
			<p>In <?php echo $data['count']; ?> people's circles</p>
		</div>
	</div>
<?php
}
// else show an error
else
{
	echo 'Couldn\'t get data from google+';
}
?>

CSS

Finally, here’s the CSS I created to style the above into the look of a hovercard :

body {
	background: #ccc;
	font: 13px arial, sans-serif;
}
a {
	color: #3366CC;
	text-decoration: none;
	font-weight: bold;
}
#plus_card {
	width: 200px;
	min-width: 200px;
	max-width: 290px;
	height: 116px;
	position: relative;
	background: #fff;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #888;
}
#plus_card_image, #plus_card_name, #plus_card_add { float: left;}
#plus_card_image {
	width: 80px;
	height: 80px;
	padding: 8px;
}
#plus_card_name {
	font-size: 15px;
	color: #3366CC;
	padding: 8px 8px 8px 0;
}
#plus_card_add {
	background: #ddd;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='EAEAEA');
	background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to(#EAEAEA));
	background: -moz-linear-gradient(top,  #F6F6F6,  #E9E9E9);
	padding: 6px 8px;
	border: 1px solid #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}
#plus_card_add a {
	color: #666;
	font-size: 12px;
}
#plus_card_count {
	width: 100%;
	position: absolute;
	bottom: 0;
    height: 20px;
    background: #eee;
}
#plus_card_count p {
	padding-left: 8px;
	margin: 3px 0 0;
	font-size: 12px;
	color: #444;
}

Well that’s all for today, I’ll probably try to throw this all into a wordpress plugin at some point, but for now I hope you enjoyed this google+ api-less hack and that it can be of some use to someone.

Updated: As promised, I created a wordpress plugin from this code.

A developer called Kosso has created a streaming video hack for Google+.

Kosso’s hack is called Plusbar and takes the form of a bookmarklet. Plusbar currently adds streaming media from Amazing Radio, DFH Radio, Grooveshark, BBC News and TWiT into a box above your Google+ stream.

Definitely an interesting hack and of some utility. Check it out!

There’s not a lot to choose between the two shorteners other than your personal preference so take your pick or use both if you’re feeling smug and want to tease your plus-less friends or something.

A new service, Google Plus Nick has launched, allowing users to choose a Google plus nickname which they use their gplus.to domain to shorten. So you could choose, for example gplus.to/plusdevs.

At the time of this post, the service already has 37.636 users signed up. I’m sure some users will find the service useful for now, but the app could become useless overnight if Google releases a similar service from within Google+.

Interestingly enough, at the time of writing Mark Zuckerberg is the most ‘circled’ user on Google+ with 29,543 followers, ahead of Larry Page who has a paltry 19,878 followers.

Edited : It looks like Boris might have added some sort of built in scraper; users can now use a form to add their Google+ and have follower counts collected by the service.

Given that the site is yet to fully launch and core changes to the site are still probable, we’re certainly not saying this was a bad idea. However for the future, Google will know that creating a platform for developers to build on is a necessity for creating stickiness and building user participation in their new social venture.
Obvious examples of where social networking APIs have helped the social networks are the huge success of casual social gaming on Facebook, and the boost to the early proliferation of Twitter enabled by 3rd party developers creating clients for a broad spectrum of user devices.

For now, Google has uploaded a form where prospective future developers can sign up to be notified of updates on the platform.

My favourite part of the form is the introduction :

To stay updated as the Google+ project develops and get a heads up when we have more details to share about Google+ developer opportunities, sign up here. Your email will be added to a Google group. In addition, we’d love to gather more information about you.

You don’t say

I decided I’d create this blog to help keep track of happenings and new releases in the Google+ ecosystem, to share thoughts on the platform and code snippets for interacting with Google+.
It might be a little bare around here until Google releases and API but only time will tell what developers will come up with once Google opens up the platform.

I hope you’re as excited as me about the prospects for Google+.