Saturday, June 2, 2007

Custom display of feeds in blogs

It's trivial if you want to display a particular feed (RSS/Atom etc) on your website. You download some server code for it, if your server doesn't support it already.

Without server side code, as in our blogs, we are limited to the use of client side javascript (and java for example), which wasn't that simple until very recently.

Google and Yahoo are racing against time to launch their services. For Google it's the tag sharing feature in Google Reader and for Yahoo it's the Pipes. Firstly, even for a single feed, you need somebody to convert the feed format in XML into JSON for you so you can use javascript to display it. Both services can do it nicely.

Of course blogger supports to display feeds directly with the feed page elements. And you can simply generate a clip in Google Reader to put in in your blog. However, you have little control over the style and content. You can do a lot of things using Pipes without programing but as of now it's very slow and unreliable.

This is an example display, you can put it here, at the side bars or almost anywhere.



You'll need 3 piece of codes. The first piece of javascript is shared (only one copy needed), which is listed in the previous post. You should put it in one of the first page elements.

The 2nd piece of html code should be placed where you want to display the feeds, one for each display with unique ID's:

<div id="testfeed"></div>

Without styles, the display will normally blend in with the default styles. Since the feed is appended to the division, you can put something in the division first such as titles.

The 3rd piece is the javascript codes to fetch the feed contents:

<script src="http://www.google.com/reader/public/javascript/user/
09908229015642209841/label/test?n=3
&callback=(new WriteFeed('testfeed')).write"></script>

(There should be no space or breaks within the quoted string.) The URL before the question mark contains your Google ID and the name of the shared label in your Google Reader. You can find it out from Reader by looking at the public page of the shared tag, and then click on the feed icon to view the URL at the address bar. In the URL, you need to change the word atom to javascript, as in ...public/javascript/user... above. You can put this code anywhere after or inside the div tags above, and after the 1st piece of javascript code. But since the order of rendering in Blogger is the posts, then the sidebars, you have to put the 3rd piece of code in the sidebar too, after the 1st piece.

The parameter n=3 is to limit the number of items to display. There are other parameters in the GData API, but not all are applicable here.

You can customize any of the follow parameters like this:

<script>
var block = new WriteFeed('testfeed');
block.title = 128;
block.source = 100;
block.summary = 256;
block.from = "<br/>";
block.unique = false;
block.max = 1000;
block.except = "a source url";
block.front = "your front page";
</script>

<script src="http://www.google.com/reader/public/javascript/user/
09908229015642209841/label/test?n=3
&callback=block.write"></script>

These parameters are optional. If you don't specify, the default will be used.

title : limits the length of the title, 0 to omit
source : limits the length of the source URL, 0 to omit
summary : limits the length of the summary, 0 to omit
from : the characters or html tags between the title and source
unique : only one title and summary is taken from each source
max : the maximum number of items allowed. If unique=false, max = n by default
except : a source url to include always, even if the number of items is max+1
front : typically set to your front page, so the feed only shows up on your front page, current there's transition effects.

No comments: