Monkey Raptor

Monday, August 26, 2013

Displaying Feeds Using Google Feed API - Dynamic Feed Control UI (Vertical)

This is Feed API from Google.


A glimpse about Google Feed API:

With the Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript, so you can easily mash up feeds with your content... Google Feed API

I'm gonna show you the Dynamic Feed Control UI. It's a neat predefined UI for Feed API, and it's already available for tinkering on Google Code Playground (using JavaScript). We can override the styling, and placing other parameter(s) to customize the layout and the feed(s) shown.
For this post, I'm using the vertical layout, and using news feed from BBC : Technology - Sports Front Page - Science and Environment.


See the Google Dynamic Feed UI
Loading feeds...

As you can see on the demo, the UI looks minimalist and SLEEK. You can hover on the feed list ► the navigation arrow will follow the mouse cursor and the top headline will change.

Have a look at my overriding CSS, the basic API loading, and script parameters below :

I think this will be fun to be tinkered even more. Add more parameters, add your own function(s), alter (and add) more CSS properties, etc.

If you want to tinker the Dynamic Feed Control UI, you can go to Google Code Playground below. Or probably build your own Feed API interface from scratch. That would be so super neat. You can study the variables (classes) and the examples for different coding languages at the Feed API documentation.


Reference Links

The original example codes from Google Code Playground is licensed under Apache 2.0 License.

If you use that for a single (independent) page, you should include the HTML5 <!DOCTYPE html> declaration or (strict) XHTML doctype declaration before the <head> to make sure the UI will work on any browser. Quick reference at W3 Documentation.

Displaying Feeds Using Google Feed API - Dynamic Feed Control UI (Vertical)
https://monkeyraptor.johanpaul.net/2013/08/displaying-feeds-using-google-feed-api.html?m=0

No comments

Post a Comment

Tell me what you think...