Developer

Using Google+ API on your website

The first round of Google+ APIs released allow read-only access to public data only, but even with that small amount of access, we can build a contact page and activity feed for your website.

With the current focus of the publicly available APIs for Google+ being so narrow, it's no surprise that creating a port of existing Facebook applications is a long way off. And while technically the use of OAuth 2.0 is good, the user experience of approving these applications with Google is not as seamless as that involved with Facebook.

For those reasons above, in this article we are restricting the use of the API to fetching public data from the user's profile.

To get started with Google+ APIs, it's a good idea to head over to the downloads section of the API documentation and download the client library and starter project of the language of your choice. We chose the PHP libraries for this example.

You next need to grab the OAuth details to plug into your application at Google's API console.

At this point, add your OAuth credentials into the Google+ starter project that you downloaded earlier and watch as it authenticates your new application and returns your activity feed.

Having our application authenticated now is handy, since the page we build will be tied to a single Google+ profile and there will not be the facility to re-authenticate.

Now it's finally time to get into the source and see what is really happening. By adding these lines to the end of the sample file, we can see where all the information gold is hidden and the structure that we will be dealing with:

<?php

print_r($me);

print_r($activities);

?>

To show the information we need to power a contact page, we simply need to include the information we want from the $me object.

Below is a quick and dirty page that gives us some basic user information and shows a list of sites the user has added to Google+:

<h2>My dets</h2>

<img src="<?php echo $me['image']['url'];?>?sz=82" alt="" />

Who I am: <?php echo $me['displayName'] ?>

<em><?php echo $me['aboutMe'] ?></em>

Gender: <?php echo $me['gender'] ?>

Where to find me online:

<ul>

<?php foreach($me['urls'] as $u) {

if(isset($u['type']) && $u['type'] == 'json') //Skip json feed

continue;

$type="";

if(strpos($u['value'], 'twitter')){

$type="Twitter :";

} else if(strpos($u['type'], 'profile') !== false){

$type="Google+ :";

}

?>

<li><?php echo $type?><a href="<?php echo $u['value'] ?>"><?php echo $u['value'] ?></a></li>

<?php

} //foreach ?>

</ul>

The current code is fine and dandy if all we want to do is show our own details to ourselves --- remember that we have had to authenticate to see these details, as visitors to the page will not be able to view these details without signing into Google+ as you, which is not the best solution.

In our output of the $me object, there is an id element. Take that element value and put it in place of the "me" string when fetching $activities and $me objects, which will stop the page calling details on the authenticated user. Also take all the code involved with debugging and authentication away, as we have already approved our app to our profile, so there is no need to re-authenticate.

Once that is done we are left with:

<?php

require_once 'google-api-php-client/src/apiClient.php';

require_once 'google-api-php-client/src/contrib/apiPlusService.php';

$me_id = ENTER_YOUR_ID_HERE;

$client = new apiClient();

$client--->setApplicationName("My Contact Page");

$client->setClientId('965396629977@developer.gserviceaccount.com');

$client->setClientSecret('CBVEdfgeqDWTc-Ibvoho0QH9');

$client->setRedirectUri('http://localhost/googleplus/index.php');

$client->setDeveloperKey('AIzaSyBKbJMRwmC1N-kLPe6_GUJzmzGOQ2q1L6Y');

$plus = new apiPlusService($client);

$me = $plus->people->get($me_id);

$activities = $plus->activities->listActivities($me_id, 'public', array('maxResults' => 6));

?>

<h2>My dets</h2>

<img src="<?php echo $me['image']['url'];?>?sz=82" alt="" />

Who I am: <?php echo $me['displayName'] ?>

<em><?php echo $me['aboutMe'] ?></em>

Gender: <?php echo $me['gender'] ?>

Where to find me online:

<ul>

<?php foreach($me['urls'] as $u) {

if(isset($u['type']) && $u['type'] == 'json')

continue;

$type="";

if(strpos($u['value'], 'twitter')){

$type="Twitter :";

} else if(strpos($u['type'], 'profile') !== false){

$type="Google+ :";

}

?>

<li><?php echo $type?><a href="<?php echo $u['value'] ?>"><?php echo $u['value'] ?></a></li>

<?php

} //foreach ?>

</ul>

If we examine the structure of the activities feed, we see that there is far more information contained in it than the sample application shows. Let's quickly improve it by outputting an image attached to each post, if it exists.

My latest posts:

<ul>

<?php

foreach($activities['items'] as $activity) {

$url = filter_var($activity['url'], FILTER_VALIDATE_URL);

$title = filter_var($activity['title'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

$content = filter_var($activity['object']['content'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

$image = "";

if(isset($activity['object']['attachments'])){

foreach($activity['object']['attachments'] as $att){

if(isset($att['image']['url'])) {

$src = $att['image']['url'];

$image = "<img style="float:left" src="$src" alt="" />

}

}

}

echo "<li style='clear:both'><a href='$url'>$image</a><a href='$url'>$content</;a></li>";

}

?>

Voila. We are outputting a latest post feed that could be useful in the right column of a personal website and have also pulled out our contact details from Google+ to show on a contact page.

The important thing to remember is that Google is only returning public information --- anything that you wish to expose on your contact page must also be exposed on Google+.

About

Some would say that it is a long way from software engineering to journalism, others would correctly argue that it is a mere 10 metres according to the floor plan.During his first five years with CBS Interactive, Chris started his journalistic advent...

0 comments

Editor's Picks