List recent Wordpress Blog Posts with javascript

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.

```javascript


```

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.

```javascript

google.load("feeds", "1")

```

Once the ‘feeds’ module is set up to be loaded, create a div that will act as a container for the blog post list.

```html

```

Lastly, with some simple javascript we can dynamically build a list of the feed items.

```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 = " ";
if (!result.error){
var posts=result.feed.entries;
for (var i = 0; i < posts.length; i++) {
list+=" " + posts[i].title + " ";
}
list+=" ";
feedContainer.innerHTML = list;
}
else {
feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
}
});
});

```

Once complete, your page should look similar to the following.

```html






google.load("feeds", "1")





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 = " ";
if (!result.error){
var posts=result.feed.entries;
for (var i = 0; i < posts.length; i++) {
list+=" " + posts[i].title + " ";
}
list+=" ";
feedContainer.innerHTML = list;
}
else {
feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
}
});
});



```

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.