Unofficial news and tips about Google

March 19, 2007

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 publicGo 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 codeClick 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.

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

3. Customize the callback functionYou'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:

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.

Great post! Unfortunately, it's just slightly above my user level. I think there are a lot of folks who've jumped on board the Google Reader bandwagon since this was posted who would benefit from a slightly more detailed process of how to do this.

Particularly confusing for me is step 3 (customizing the callback function). How and where do I make these customizations?

This is a great tutorial and I've implemented such a custom feed on my website.

However, I've run into a problem and I am hoping someone might be able to assist.

Specifically, some of the feeds that are part of my news feed are custom feeds that I made through the Feed43 service (www.feed43.com) from sites that do not have an RSS feed of their own...pretty nifty if you ask me. (Don't worry, I've obtained the requisite permission to use these feeds on my site).

The problem is that these Feed43 feeds, every so often, fail temporarily. They "reload" every hour (for a paid account), but sometimes, upon reload, there's some sort of an error, and instead of displaying new stories, I receive an error message viewable within Google Reader as "ERROR: One of search patterns is too heavy or malformed. See help for more information." This is a Feed43 error message, and goes away upon the next automatic reload of the feed.

Where does the above script and customization come in? When this happens and one of the feeds displays an error, no stories are displayed on the feed on my website, using the above code. However, if I log in to my Google Reader account and remove the "broken" feed from my news feed temporarily, the news feed pops back up again on my website.

It's a big pain in the ass to keep checking my site to see if the feed is appearing, and to have to log in to Google every so often to make the necessary adjustments when the whole point of the feed is for it to update itself.

Is there any sort of tweak in the code for the script above that might enable it to bypass such errors and continue displaying news? Has anyone else experienced anything like this? Does what I'm saying even make any sense? Any help would be appreciated!

where do you put the "function buildContent (blog) { ..." thing? I pasted it in my blog. no effect, I tried to paste it my XML (I mean the template), it wouldn't even allow me to save ... what do I do?

Also, I tried to create a googlepage like you, it's no longer available, they say they are stopping googlepage and launching a new google website by year end?

just above '/head' but this is just impossible to do so in the blogger template, it wouldn't even save. The error message is: -

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.XML error message: The content of elements must consist of well-formed character data or markup.

Any way to re-code the script just so it can be save as part of the Blogger template?

Hi - If you were going to take your sample Web page and make it into something like a copy/paste widget, how would that look? Does it still need a head and body or can you just have the two functions inline and paste those two functions in something like Bloggers sidebar?

Awesome post! Thanks. I was wondering, though, how to exact and display the thumbnails for the entries? I have a Google Reader clip that aggregates video channels on youTube and want to display the thumbnail with the description. Thanks!

1. I'm trying to get the date to show up correctly and tried using the code quoted above: "javascript:new Date(item.published * 1000);" but it does not work. The date still appears as "1240337797," for example. What am I doing wrong? Where does the above code need to be added in the function? Does any other code need to be added? Is there a mistake in the code?

2. Is it possible to have more than one such function on the same webpage? I tried inserting two such functions, for two separate Google Reader feeds (that I want to keep separate and not combine into one feed) and made sure to change the "div id." However, each time, only one of the two feeds would appear. How can I get both functions to work on the same page?

@Media.net.gr:Regarding the second question, you need to make three changes in the code if you want to use multiple instances: use a new ID for the container div, update the ID in the buildContent function, change the name of the buildContent function and update the function used as a callback parameter.

Thanks for the help! I was able to get both the date and the multiple instances working.

I do have one final question which I forgot to ask previously: is there any way to get images from the articles in the RSS feed to display? I was looking at Google Reader's code and couldn't figure out how this might be possible.

Exactly what I was looking for but am having problems implementing. When I generate the code from the Shared Items page I get the following code (had to abridge it to get it to post.) I added the other style sheet and buildContent javascript but am unsure there to put the buildContent after the callback. Tried several things but keep getting that IE is unable to open the page. IE can open the page when I just use the Reader template......src="http://www.google.com/reader/public/javascript/user/07276076272217119171/state/com.google/broadcast?n=10&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22RWJF-LFP%5C's%20shared%20items%22%2Cs%3A%22false%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC">

Wow!Impressed with this. Copied and pasted the source code made a couple of changes and it works! COnsidering I'm reallynovice when it comes to doing stuff like that I would say a big thank you and well done for such clarity!

3 questions:1. How do I display the whole content of a post(not just the few first lines)2. How do I display images from a post?(is it possible?)3. how do I limit the amount of posts on the page?

Sorry you've probbaly mentioned this above but It'd be realyl helpful if you could give me the exact code thatr needs changing to achive this.

You can see my first attempt here! http://www.saronti.com/Family_Fun/Mums_Gossip2.html

To customize the number of posts replace n=5 with n=10 or any other value.

If you want to display the entire content of the posts, use the Atom feed of the public page: open the page and you'll find a link in the sidebar to the Atom feed. A simple way to show the content of a feed is to use Google's Feed API.

oh that was so helpful thank you so much! Exactly what I need and exactly my level! I'll use this for displaying full posts and your useful little code for customising clips where I only need a few lines. Thanks so much!

I have following code generated by google:http://www.google.com/reader/ui/publisher-en.jshttp://www.google.com/reader/public/javascript/user/11861600188605123221/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22Solar%20Energy%22%2Cs%3A%22false%22%2Cn%3A%22true%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"

I don't think there's an option to limit the number of posts, but you can manually remove some posts before displaying them. If you use Blogger, add the Blog List gadget and import your favorite feeds from Google Reader.

This is a great post. I'm almost there myself now, but I've hit a snag. The code for buildContent does not validate, and my host (squarespace.com) rejects the code if it will not validate. The line that won't go through is:

for (var i = 0; i < blog.items.length; i++) {

And it seems to hang up about "< b" (seeming not like the "is less than" syntax).

Hi guys. Sorry for going back to this issue, but I got your script working great, except for I cannot get the presumably existent "annotations.content" object. All other objects work fine, but I cannot get this one (I got "undefined" as value). Misspelled? Name changed? Any help will be appreciated, thanks in advance. Pablo

Alex, thank you very much for this tutorial which I stumbled across yesterday. I used it as a starting point to make a script to fetch, format and display several different feed groups using one version of the function. I used a window.ContainerID variable that is set to the name of the output container div before each call. Stuffed it all in one Drupal box and it works great and is easy to expand/maintain. Thanks again!

(P.S. If any Drupal users would like the code visit my blog and use the contact form to let me know. This completely replaces the Drupal aggregator module for me. It reduces a lot of cron and database overhead and it's easier to maintain.)

type="text/javascript" src="http://www.google.com/reader/public/javascript/user/XXXXXXXXXXXXXX/label/Comments?n=5&callback=GRC_p(%7Bc%3A%22-%22%2Ct%3A%22%22%2Cs%3A%22true%22%2Cn%3A%22true%22%2Cb%3A%22false%22%7D)%3Bnew%20GRC"***************************************this is the code

i need this type of output http://googolsystem.appspot.com/files/reader-clips.html

Hello. It seems that with the recent (unnecessary) changes made by Google to Google Reader, my feed is no longer working. It was located on www.media.net.gr and www.media.net.gr/news.php. Is there any way to restore it with the changes that have taken place?