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 ;)
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?
How to get thumbnails of YouTube Videos!
I've been working on a video contest project in PHP and it involves user's submitting their videos from a YouTube link. I needed to show just thumbnails of the videos without having to use a full YouTube embed code. I really didn't want to get my hands dirty with any kind of YouTube API though. So with a little bit of searching I found that YouTube creates multiple dynamic thumbnails for all of their videos when they're uploaded.
For example purposes, I will use the incredible, mind-blowing, face-melter music video by DragonForce "Through the Fire and Flames".
The URLs
In order to properly form a URL for the image, first you'll need to grab the video's ID. You get this from the YouTube video's URL.
This DragonForce's URL is http://www.youtube.com/watch?v=0jgrCKhxE1s, so it's YouTube ID is 0jgrCKhxE1s.
Now here are the URLs you have available ...
120x90 image - Choice 1
http://img.youtube.com/vi/[YouTube ID]/1.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/1.jpg
120x90 image - Choice 2
http://img.youtube.com/vi/[YouTube ID]/2.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/2.jpg
120x90 image - Choice 3
http://img.youtube.com/vi/[YouTube ID]/3.jpg
http://img.youtube.com/vi/0jgrCKhxE1sg/3.jpg
120x90 image - Default Choice
http://img.youtube.com/vi/[YouTube ID]/default.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/default.jpg
480x360 image - High Quality (HQ) Choice
(does not need to be an HQ video to have an HQ image)
http://img.youtube.com/vi/[YouTube ID]/hqdefault.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/hqdefault.jpg
480x360 image - HQ Choice 1
http://img.youtube.com/vi/[YouTube ID]/hq1.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/hq1.jpg
480x360 image - HQ Choice 2
http://img.youtube.com/vi/[YouTube ID]/hq2.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/hq2.jpg
480x360 image - HQ Choice 3
http://img.youtube.com/vi/[YouTube ID]/hq3.jpg
http://img.youtube.com/vi/0jgrCKhxE1s/hq3.jpg
If anyone knows any other tricks, please share! :)