Customize Google Reader's Clips

Google Reader lets you tag blogs and blog posts and share those items with your friends. You get a feed, a web page and a widget you can add to your site.

If you use Google Reader's code, you'll only be able to show the titles of the most recent items and a link to the source. Fortunately, Google Reader has a JSON API, so you can use the callback parameter to create a JavaScript function that adds more features.

1. Make a tag public
Go to Settings/Tags and click on the broadcasting icon next to the tag you want to make public. You can also customize the clips for shared items, which are already public.

2. Get the code
Click on "add a clip to your site", choose the "None" color scheme, select the number of items you want to display and copy the code.

The code will look like this:

<script type="text/javascript" src="http://www.google.com/reader/ui/publisher-en.js"></script>
<script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/13577231804381328821/label/ex-googlers?n=5&callback=CODE"></script>

You can drop the first script element, because it's not necessary. The second script element will be customized below.

3. Customize the callback function
You'll notice that the second script calls an URL that has a "callback" parameter. You need to place the name of a JavaScript function with a single parameter - a Google Reader object that has more fields. The most important field is "items", an array that has the following structure:

"items": [
{
"title": "Blog title",
"published": 1173471960,
"updated": 1173481776,
"alternate": {
"href": "http://blogname.blogspot.com/2007/03/test.html",
"type": "text/html"
},
"content": "The first words from the post...",
"annotations": [
{
"content": "\"This is a very interesting post.\"",
"author": "Daniel",
"userId": "13377231804381328721",
"profileId": "125880905881548216826"
}
],
"author": "Dan Bush",
"origin": {
"streamId": "user/13377231804381328721/source/com.google/link",
"title": "Dan's Blog",
"htmlUrl": "http://blogname.blogspot.com"
}
},
....
]

A simple example of a callback function is buildContent, which requires a div element that has the ID "container", where it will place your clip:

function buildContent (blog) {
if (!blog || !blog.items) return;
var container=document.getElementById("container");
var code="";
for (var i = 0; i < blog.items.length; i++) {
var item = blog.items[i];
code=code + "<a href='"+item.alternate.href+"'>"+ item.title+ "</a><div>"+ item.content+"</div><br />";
}
container.innerHTML=code;
}

You'll need to change the callback parameter in the code obtained from Google Reader.

http://www.google.com/reader/public/javascript/
user/[id]/label/labelname?n=5&callback=buildContent

It's easy to customize your content by using CSS because you build the text displayed in your site. To show only the posts from a blog, subscribe to the blog in Google Reader and add it to a new folder.

Here's a very basic page that uses this code.