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 : <head> <style type="text/css"> /*Original CSS*/ @import url("https://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css"); /*Overriding CSS*/ /*This is the entire container style*/ #content1 a {background:none;text-decoration:none;} .gfg-root {border-radius:20px;} /*Feed UI Title*/ .gfg-root .gfg-title {font:bold 3em calibri;color:darkred;} .gfg-root .gfg-entry {height:100%;} /*Top animator title*/ .gfg-root .gfg-entry .gf-result .gf-title, .gfg-root .gfg-entry .gf-result .gf-title a {font:bold 1.5em helvetica;color:black;} /*Top animator snippet*/ .gfg-root .gfg-entry .gf-result .gf-snippet { margin:20px 0 0 0; font:normal 1.5em verdana; padding-bottom:0; } /*Feed title container*/ .gfg-root > .gfg-subtitle {font:normal 1.5em helvetica;padding:10px 5px} /*Feed title link font*/ .gfg-root > .gfg-subtitle > a {color:#000;} /*List (link) font*/ .gfg-listentry a {font-family:calibri;color:#222;font-size:16px;} </style>  <script src='https://www.google.com/jsapi' type='text/javascript'></script>  <script src='https://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type="text/javascript"></script> </head> <body>  <div id='feedContent'></div>   <script> //Load the Google Feeds API (version 1) google.load('feeds', '1'); //Feeds function function OnLoad() { var feeds = [ { title: 'Technology', url: 'http://feeds.bbci.co.uk/news/video_and_audio/technology/rss.xml' }, { title: 'Sports', url: 'http://newsrss.bbc.co.uk/rss/sportonline_uk_edition/front_page/rss.xml' }, { title: 'Science and Environment', url: 'http://feeds.bbci.co.uk/news/video_and_audio/science_and_environment/rss.xml' } ]; var option = { //This is the option for every feed list stacked : true, vertical : true, horizontal : false, numResults : 5, //This is the title of the headline title : "BBC News" }; //Render the UI element new GFdynamicFeedControl(feeds, 'feedContent', option); //Alter this to customize the UI's width document.getElementById('feedContent').style.width = '720px'; } google.setOnLoadCallback(OnLoad); </script> </body>

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.

Monkey Raptor

Monkey Raptor

Monday, August 26, 2013

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

No comments

Post a Comment