CodeBlink.com

29May/103

Make your own Google Buzz feed widget with HTML and JavaScript

The Google Buzz API was released in Labs recently and I felt like distracting myself with some fun. In a matter of 2 hours I had my own little Buzz feed widget going. Here's the code I'm currently testing with:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<h2>My Buzz Feed</h2>
<ul id="content"></ul>
<script type="text/javascript">
function handleResponse(response) {
for (var i = 0; i < response.data.items.length; i++) {
var item = response.data.items[i];

if (item.verbs=='post') {
var verbed = 'posted';
} else if (item.verbs=='share') {
var verbed = 'shared';
} else {
var verbed = item.verbs;
}

document.getElementById("content").innerHTML += '<li>';
if (item.actor.profileUrl) document.getElementById("content").innerHTML += '<a href="' + item.actor.profileUrl + '"><img src=' + item.actor.thumbnailUrl + ' border="0" height="20" width="20" alt="Jason Rundell profile picture" /></a>';
document.getElementById("content").innerHTML += '<img src="http://www.codeblink.com/images/buzz.png" height="20" width="20" alt="Buzz icon" /> On ' + item.updated.substring(0,10) + ', I ' + verbed + ':<br />';
if (item.object.content) document.getElementById("content").innerHTML += item.object.content;
if (item.object.attachments && item.object.attachments[0].links.preview) document.getElementById("content").innerHTML += '<br /><img src=' + item.object.attachments[0].links.preview[0].href + ' alt="' + item.object.attachments[0].type + '" />';
}
}
</script>
<script src="https://www.googleapis.com/buzz/v1/activities/jasonrundell/@public?alt=json&callback=handleResponse"></script>

View the working demo HERE.

Just make sure to change '/jasonrundell/' on line 23 with '/[your buzz name]' and you'll have a widget that will display your public Buzzes on any page.

Aside from the several object properties I'm using in this example widget, there are many more available to you to use and manipulate. Let me know what you come up with ;)

1 save

Tagged as: api, buzzes, google, html entities, innerhtml, java script, javascript, little buzz, object content, response data, verbs, widget 3 Comments

20May/100

Copy and Paste Development with Google Web Elements

I half watched and half listened to the the Day 1 keynote videos of Google I/O today and among the plethora of new and exciting features discussed was Google Web Elements.

Most of us have already used the copy and paste embed code for Google Maps and YouTube, but I think we should start paying more f attention to the other web elements listed currently on the Google web elements site. How can we best utlize them? The Checkout and Wave (now that Wave is public) elements look especially interesting to me.

Do you have projects that could use some Googleizing?