I just designed a new Webomatica home page. It has links to various parts of this site (including this blog) as well as featuring the five most recent blog posts and some articles I’ve decided to share via Google Reader.

Anyhow, I thought I would explain how I set up the sharing in Feedburner and Google Reader and what styles I applied to the resulting content, since doing this was a bit opaque.

1. Set up HTML sharing in FeedBurner.

Log in to FeedBurner. Click on your feed, click on the “Publicize” tab. Click on “BuzzBoost: Republish your feed as HTML”. You’ll see an area that contains the HTML code. It’s JavaScript that calls up the feed information from FeedBurner in the HTML page you paste it in. There are some settings below for the number of items to display and how many words from the article content to pull.

2. Google Reader Shared Items

If you use Google Reader, you can click the small “Share” icon at the bottom of any article in Google reader to share it. To get the embed code, click “Shared items” and then the link under “put a clip of your shared items”. You’ll get a pop up window with the embed code. I set mine to color scheme none, five items, and show item sources. Obviously, I wanted to add my own styling.

3. Write some styles

The FeedBurner items are in list form in a div called feedburnerFeedBlock. The headline has a span tag around it called headline.

The Google Reader items, similarly, are in a list contained within a div called reader-publisher-module. The cited source is enclosed in another div called simply s.

4. A plug for the Web Developer Firefox plugin

How did I figure this out? Well, there’s a cool plug-in called Web Developer Toolbar that helps you figure out styles and look at stylesheets quickly. I highly recommend it.

To analyze an element on a page, click Information in the toolbar, and select Display Element Information. Then click on any item on the web page you’re currently viewing in Firefox. In the yellow window that appears is listed the class hierarchy under Ancestors.

You can also look at the stylesheet used by any site once it’s loaded in your web browser by going to CSS > View CSS.

So the end result is a new home page, which I don’t have do barely anything to update: I just keep writing blog posts and occasionally share a few items in Google Reader and that’s it. Sweet.

Categories: Blogs, Google :: Tags: :: Trackback URL
Front Page
Previous Post: The Decline Of Newspapers, The Rise Of The New York Times
Next Post: Mystery Digital Television Channels In The Air: Who Knew?
Related Posts: Google Reader: Sharing Extended To Friends Via GTalk :: Cat News Via Google Reader :: General Webomatica Update :: Spending Less Time In Google Reader ::