Yojimbo Corp. - List recent Wordpress Blog Posts with javascript

List recent Wordpress Blog Posts with javascript

July 10, 2012

Last week we discussed listing recent blog posts in ASP.NET MVC using the SyndicationFeed class. One thing that I do not like about that solution is that it is server side, so this week we will look at getting the same functionality client side using javascript.
After searching a bit for existing solutions, I found that the Google Feed API is ideal for the task. It’s extremely simple to implement and provides the expected functionality.
The first step is to add the api to your page.
[sourcecode language="javascript"]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="http://www.google.com/jsapi"></script>[/sourcecode] Note that jQuery is not required for the api, but it will be used later in this document.
Next, load the Feed API with the google.load method.
[sourcecode language="javascript"]<script type="text/javascript"> google.load("feeds", "1")</script>[/sourcecode] Once the ‘feeds’ module is set up to be loaded, create a div that will act as a container for the blog post list.
[sourcecode language="html"]<div id="feedContainer" ></div>[/sourcecode] Lastly, with some simple javascript we can dynamically build a list of the feed items.
[sourcecode language="javascript"]<script type="text/javascript"> var feedUrl = "http://blog.yojimbocorp.com/feed/"; var feedContainer=document.getElementById("feedContainer"); $(document).ready(function() { var feed = new google.feeds.Feed(feedUrl); feed.setNumEntries(10); feed.load( function(result) { list = "<ul>"; if (!result.error){ var posts=result.feed.entries; for (var i = 0; i < posts.length; i++) { list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>"; } list+="</ul>"; feedContainer.innerHTML = list; } else { feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl; } }); });</script>[/sourcecode]Once complete, your page should look similar to the following.
[sourcecode language="html"]<!DOCTYPE HTML><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript"> google.load("feeds", "1") </script></head><body><div id="feedContainer" ></div><script type="text/javascript"> var feedUrl = "http://blog.yojimbocorp.com/feed/"; var feedContainer=document.getElementById("feedContainer"); $(document).ready(function() { var feed = new google.feeds.Feed(feedUrl); feed.setNumEntries(10); feed.load( function(result) { list = "<ul>"; if (!result.error){ var posts=result.feed.entries; for (var i = 0; i < posts.length; i++) { list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>"; } list+="</ul>"; feedContainer.innerHTML = list; } else { feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl; } }); }); </script></body></html>[/sourcecode]If your page requires additional information about each post (description, author, categories, etc), be sure to look into using feed.setResultFormat and google.feeds.Feed.JSON_FORMAT.