Call Us Toll Free: (866) 217-9701

Custom Atom Blog Reader

Not sure if the title is correct but i built what i am calling a custom Atom Reader.  The reader uses the google feed api to handle the Atom feed created by my blog which is running on Apache Roller.

With my blog finally set up and running correctly i started the ongoing process of tweaking the css used by the blog. The goal for all my web sites is to make every part the site look like it belongs.  I always end up writing custom code because of this. The bulk of my website is plain old html and css, i utilize java for the back-end of some of the widgets such as the request form at the bottom of every page and my blog.

I wanted to tie my blog into my home page so that it would display the most recent blog post written as well as provide links to the last few posts that i have written. If i had written the homepage in JSF and not HTML this would be a breeze but as stated before, JSF was not available for the home page.  To handle posting the blog info to my home page i would have to use either java-script or flash.  I love flash, but its not supported well by the search engines, so i decided to go with a java-script solution. 

I was looking for a nice ajax/jquery solution to do what i wanted but everything i saw had to use some type of php proxy to pull in the blog feed.  I hate php, i think its a huge security risk, i refuse to use it.  What i did find was a cool solution using java-script with the google feed api.

The code that drives it could not be simpler to use.  If you go to the google feed api I linked above you can see the vanilla version of an implementation. My simple java-script implementation looks like:

google.load("feeds", "1"); google.setOnLoadCallback(showFeed); function showFeed() { var feed = new google.feeds.Feed("http://www.getwebinspired.com:8080/blog/GWIBlog/feed/entries/atom"); feed.setNumEntries(4); feed.load(function(result) { if (!result.error) { var container = document.getElementById("headlines"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var li = document.createElement("li"); li.innerHTML = '&amp;amp;lt;h3&amp;amp;gt;&amp;amp;lt;a href=&amp;amp;quot;' + entry.link + '&amp;amp;quot;&amp;amp;gt;' + entry.title + '&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;/h3&amp;amp;gt;';&amp;amp;lt;xmp&amp;amp;gt; li.innerHTML += '&amp;amp;lt;p&amp;amp;gt;' + entry.contentSnippet + '&amp;amp;lt;/p&amp;amp;gt;'; container.appendChild(li); } //my code to get the latest var latestHolder = document.getElementById(&amp;amp;quot;latest&amp;amp;quot;); var tempDiv = document.createElement(&amp;amp;quot;div&amp;amp;quot;); tempDiv.setAttribute('id', 'homePageBlogEntry'); var entry = result.feed.entries[0]; &amp;amp;lt;xmp&amp;amp;gt;tempDiv.innerHTML= '&amp;amp;lt;h1&amp;amp;gt;&amp;amp;lt;a href=&amp;amp;quot;' + entry.link + '&amp;amp;quot;&amp;amp;gt;' + entry.title + '&amp;amp;lt;/a&amp;amp;gt; &amp;amp;lt;/h1&amp;amp;gt;'; tempDiv.innerHTML+= entry.content ; latestHolder.appendChild(tempDiv); } else { } }); }

If you would like to see this implementation of the script just check out my home page by clicking my logo on the top left of this page.   The solution works great, but i have one problem with the google feed api, it's caching system means that new entries will not shop up right away.  It usually takes an hour or 2 for them to show up.  This is not a huge problem but i was tweaking my css styles to display the blog content a certain way on the home page and this caching made it a tad difficult.  Besides the caching, i am really impressed with the google feed api.