In my previous post, I mentioned the necessary all feed URL details and their parameters, but it is not enough to get data. You've just located the data, but you need to fetch and display it as a plain text. So to do it we will use Javascript and use JSON as output (using alt parameter). For data I'm going to fetch recent post of Blogger. Have a look.
The following is JSON path for Blogger data:
Object
Description
Example
json.feed.id.$t
Show blog ID
tag:blogger.com,1999:blog-12345
json.feed.updated.$t
Last update of a blog
2013-07-08T18:21:57.051+07:00
json.feed.category[]
Categories / label array of a blog
json.feed.category[i].term
Show the i-th category
Blogger
json.feed.title.$t
Show blog name
Blogger Ever
json.feed.subtitle.$t
Show description of a blog
The developers blog
json.feed.author[]
Array of blog authors
Mohammad Hamza, Abdul Mueed
json.feed.author[i].name.$t
Show the i-th blog author name
Mohammad Hamza
json.feed.author[i].uri.$t
Show the i-th profile author uri
https://profiles.google.com/123456789
json.feed.openSearch$totalResults.$t
Show total posts
777
json.feed.entry[]
Posts array of a blog
json.feed.entry[i].id.$t
Show the i-th post ID
tag:blogger.com,1999:blog-8508.post-12345678
json.feed.entry[i].title.$t
Show the i-th post title
Blogger JSON Feed API
json.feed.entry[i].published.$t
Show time published of the i-th post
2013-07-07T12:56:00.000+07:00
json.feed.entry[i].updated.$t
Show when the i-th post is updated
2013-07-07T12:56:47.089+07:00
json.feed.entry[i].category[]
Show array of post categories
json.feed.entry[i].category[x].term
Show the x-th category of the i-th post
Blogger API
json.feed.entry[i].summary.$t
Show post summary
Maybe sometimes we need a widget ...
json.feed.entry[i].content.$t
Show post content
Maybe sometimes we need a widget for certain features, but the widgets are not available ...
json.feed.entry[i].link[]
Links array of a post
json.feed.entry[i].link[x].href
Show the x-th link of the i-th post
http://www.bloggerever.com/2013/blogger.html
json.feed.entry[i].author[]
Array of post authors
json.feed.entry[i].author[x].name.$t
Name of the x-th author on the i-th post
Danang Probo Sayekti
json.feed.entry[i].author[x].uri.$t
Show uri author profile
https://plus.google.com/+bloggerever
json.feed.entry[i].author[x].gd$image.src
Image uri of the x-th author profile on the i-th post
//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.url
Show image on the i-th post
http://3.bp.blogspot.com/logo.jpg
json.feed.entry[i].thr$total.$t
Show total threaded comments
7
Following code will extract out your recent post. Replace the highlighted link with your blog link.
<script type="text/javascript">
function recentPost(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
var postUrl = json.feed.entry[i].link[j].href;
break;
}
}
var postTitle = json.feed.entry[i].title.$t;
var postSummary = json.feed.entry[i].summary.$t;
var item = '<div class="item"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.bloggerever.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=recentPost"></script>
Stay tuned to have different recent post widget, InshaAllah in next post I'm going to share recent post in a jQuery animated ticker.