This post is a test of the Google AJAX Feed API It's pretty much the sample code for a vertical stacked RSS feed display with two Amazon feeds. The only change I made to the style sheet was to assign background colors to elements where the blog's green canvas showed though. It could be made narrower to fit in a sidebar. See how to make your own slick feed control below this example:
Instructions and code
To use the API, you must have a Google account and get your own API key, which is tied to your account and to your web site. Information, instructions and examples are available at Google AJAX API - Google Code. I chose a Vertical Stacked feed control with direct feed URLs, clicked Code Playground to get the foundation code, and edited it to include two Amazon RSS feeds.
The feed control includes three script tags. In the code shown below, I used a placeholder for my API key and Amazon affiliateID, and an underscore for a continuation symbol where there SHOULD NOT BE line breaks:
<script _
src="http://www.google.com/jsapi/?key=[yourAPIKey]" _
type="text/javascript"></script>
<script _
src="http://www.google.com/uds/solutions/ _
dynamicfeed/gfdynamicfeedcontrol.js" _
type="text/javascript"></script>
<script type="text/javascript">
google.load('feeds', '1');function OnLoad() _
{var feeds = [{title: 'Sci-fi - Fantasy',url: _
'http://www.amazon.com/rss/tag/sci-fi/popular? _
tag=yourTagID'},{title: _
'Bestsellers - Books',url: _
'http://www.amazon.com/rss/bestsellers/books? _
tag=yourTagID'}];var options = {stacked : true, horizontal : _
false,numResults : 10,title : "Amazon Popular Sci-fi _
Fantasy, Bestsellers"};new GFdynamicFeedControl(feeds, _
'GFeedDiv', options);}google.setOnLoadCallback(OnLoad);
</script>
To add the code to a blogger template, go to Layout, Page Elements, click Add a Gadget in the header and select HTML/JavaScript from the list of options. (If you have not enabled gadgets in your header, search for "blogger header add gadget" to find instructions.) You can leave the gadget at the top of the header, just below the navbar. You will add a div elsewhere in your template to display the feed control.
Add a link to Google's provided style sheet in the blog template. I put it in the <head> tag, below the <title>. Here is the code, with my overriding CSS:
<style type='text/css'>@import url("http://www.google.com/ _
uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
.gfg-root {width: 98%;}
.gfg-root,.gfg-entry,.gfg-list, _
.gfg-horizontal-root .gfg-title {background: #FFFFFF;}
.gfg-title,.gfg-subtitle,.gfg-subtitle a:link, _
.gfg-subtitle a:visited {background:#7C9F2B; color:#FFFFFF;}
</style>
The feed control displays where you place a div with the id "GFeedDiv". The div is empty except for a span containing the text "Loading..."
<div id="GFeedDiv">
<span style="color:#676767;font-size:11px; margin:10px;
padding:4px;">Loading...</span></div>
To add the code to a post, you can simply paste it in HTML view. To add it to your template, go into Layout, Page Elements, and click Add a Gadget in the section where it should appear.
