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.
6 comments:
Hi Araby, I'm a newbie to blogger and website. I came across one of your messages on the Amazon Associates Discussion Board.
I love you blog site! It's so refreshing and wish I could get my blog Layout to be like yours. How did you change it around?
The tips on the Google Dynamic Feed Control , Can that be done for any of Amazon products and are the ranking live? I have been looking this up manually via their Product Links Wiget process only.
Not very sure what the jargon "GFeedDiv" means and the API for the Google code you have put up too. The Google code script display above - it that what is executing in real-time?
I used a template from blogger in draft, at draft.blogger.com. You can specify the blog width and placement of sidebars.
Go to the Google API link and Code Playground to get detailed instructions and use the wizard to try out and export code for your feed control
Put the Google style sheet link in your blogger template head tag. Add the script code block to a Blogger Gadget in Layout, Page Elements, Header area. Make sure you change showaddelement from no to yes in the header section of your template, and change maxwidgets to a higher number.
For info about Amazon rss feeds, go to amazon.com and click Help. Type RSS in the box to find the page that explains.
To display the feed control, you create a div with an id that makes sense to you and put the id in your script, near the end where it makes a new Google feed control. Mine has an id of GFeedDiv, but yours could be something else.
The feed control will refresh at intervals so it does not hammer amazon's server. Amazon updates its bestseller feeds hourly.
How di you get this Template from Blogger in draft ? I am not sure how you alter the Blog width and placement of sidebars. You used WordPress to do this Greeneteapot? What is a div ? It just some jargon for ID?
Go to draft.blogger.com and log in. From your Dashboard, go to Layout to see a new option for Designer Templates. If you plan to use blogger in draft often, check the box on the Dashboard to make it your default Dashboard.
When you choose and configure a new Blogger Designer Template, you will have options to set the overall template width and the sidebar width.
No, I did not use WordPress for this blog. It's just the new Blogger template at work.
A div is the most basic HTML block element. A div is not "just some jargon for ID" although you may add an ID attribute to a div. Like other block elements it is preceded and followed by a line break and has, by default, a width of 100% (of its parent element). Other block elements are paragraphs, headers, forms, lists, and so on. Inline elements, such as spans, are not preceded and followed by line breaks, nor do they take up all available width. To learn more about HTML, visit the free tutorials at www.w3schools.com.
Araby, Thanks again for you reply for a newbie at HTML hence you will get silly questions from me for sure. I check the Blogger site ( I when to the main Goggle Blogger site as I did not know the Draft Blogger existed !) The Dashboard I got to but I didn't see the option to use a Draft Dashboard. BTW what is a Dashboard ... jargon for the main HTML page ? So I did not get near to the Blogger Designer Template you're referring to Araby. Sorry... I got only Ready made Template done by the Goggle Blogger staff to choose from. The www.w3schools.com is bonza site for me as I've already gone through 4 chapters already and will continue with it thing I learn the lot on HTML and then may be XHTML but first priority is the basic HTML tag codes and terminology too.
When you go to draft.blogger.com and log in, there is a checkbox at top right, in the banner, for "Make blogger in draft my default dashboard.", if you want to do that.
Otherwise, after logging in, click Layout. There will be a new link, Template Designer, in the row of links that starts with Page Elements. Click Template Designer to select and preview the new templates.
Post a Comment