My personal note. (CMIIW is one of my gods). This is written in 2011, hence it might or might not work with latest update (if any).
This is the very basic and simplest example to access Google+ activities via its API, using HTML, JQuery and simple API key authentication.
All client side scripts. There is no server side scripts is being involved.
The only weakness of the codes is: I need to hide my API key somewhere in the server's inaccessible folder.
But it can be overcame when I use the code in real application, by deploying the HTML file into a web server.
Since it's contained in a HTML file, it can be utilized in non-native mobile application, such as HTML5 app runnable in mobile devices. I also imagine blog (Blogger, Wordpress) sidebar-plugin and browser's add-ons.
API Key JS container
API Key constant is written in a separate JavaScript file for portability. Remember that in real app I need to hide this constant from clients.
Here is my "myKey.js" file:
/*
* How to get your API KEY?
* (1) Open https://code.google.com/apis/console/
* If it's asked, create a project.
* (2) Click on Services from left menu.
* (3) Scroll down, then activate Google+ API
* (4) Click on API Access from left menu.
* (5) Find your API Key under "Simple API Access"
*/
var my_GPLUS_ID = "YOUR_GOOGLE_PLUS_ID";
var my_API_KEY = "YOUR_GOOGLE_API_KEY";
Replace
YOUR_GOOGLE_PLUS_ID with someone's Google+ ID.
Replace
YOUR_GOOGLE_API_KEY with API key from here.
Simple HTML file:
Now the simple HTML file, with the JQuery scripts. Save the code in a text file, then save it as HTML file, such as "gplus.htm".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Google+ Activities</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="myKey.js"></script>
<script>
function json2obj(data) {
return $.evalJSON(data);
}
$(function() {
$( "#tabs" ).tabs();
});
$(document).ready(function() {
$("#gp_acts_btn_start").click(function() {
$("#gp_wait1").html('<img src="loading.gif" />');
var pageToken = "";
var url = "https://www.googleapis.com/plus/v1/people/"+my_GPLUS_ID+"/activities/public?alt=json&maxResults=10&key="+my_API_KEY;
$.ajax({
type:"GET",
url:url,
dataType:"jsonp",
success:function(res) {
var html = [res.title + '<hr>'];
$.each(res.items, function(key, val) {
var dt_updated = "unknown";
if (val.updated) {
a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(val.updated);
if (a) {
dt_updated = '' + a[1] + '-' + a[2] + '-' + a[3] + ' ' + a[4] + ':' + a[5];
}
}
html.push(
'ID <a href="' + val.url + '" target="_blank">' + val.id + '</a>' + '<br />' +
'<b>"' + val.title + '"</b>' + '<br />' +
'Updated ' + dt_updated +
'<hr>'
);
});
$("#gp_acts").html(html.join(''));
},
error:function(jqXHR,txt,err) {
$("#gp_acts").html("ERROR: " + txt);
},
beforeSend:function() {
$("#gp_wait1").show();
},
complete:function() {
$("#gp_wait1").hide();
}
});
});
});
</script>
</head>
<body>
<div class="demo">
<form>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Activities</a></li>
<li><a href="#tabs-2">About</a></li>
</ul>
<div id="tabs-1">
<p>Your Google+ activities:</p>
<button type="button" id="gp_acts_btn_start">Start</button>
<div id="gp_wait1" style="display:none;"></div>
<div id="gp_acts"></div>
</div>
<div id="tabs-2">
<p>Very basic simple HTML+JQuery code to access Google+ activities.<br/>
Pure client-side, no server-sided scripts being involved.<br/>
Authentication is done by simple API key.<br/><br/>
Get your google_api_key from here: <a href="https://code.google.com/apis/console/?api=plus" target="_blank">https://code.google.com/apis/console/?api=plus</a><br/>
</p>
</div>
</div>
</form>
</div><!-- End demo -->
<div class="demo-description">
<p>Codes by <a href="https://plus.google.com/u/0/116355576801964691507" target="_blank">+Soesilo Wijono</a></p>
</div>
</body>
</html>
Progress image
This is a progress animated GIF image "loading.gif". Right click and "Save as.." it in the same folder as HTML file.
Make sure that all "myKey.js", "gplus.htm" and image files are in the same folder.
Invoke the HTML file via browser's address bar. I get this,
Click Start button to get activities. Remember that it only grabs 10 first public activities.
It shows only 3 out of first 10 public activities, because most of my posts is limited to certain circle.
Google+ API now does not support the limited activities, yet. Hope the API will be enhanced soon.
Note:
I can add a paging feature, by adding a "Next page" link. See Google+ API developer's website for reference on how to do it.
CSS style is as it is, and I need to enrich the GUI by using JQuery UI, for user friendly app.
I can also use OAuth for authentication instead of API key. This will let users to give their permission before accessing their Google+ data. Though it will make the code become complicated.
END-of-note/soesilo-wijono
