How To Read Blogger XML Feed Using Javascript

Like we have discussed before, all data of blogger are using xml feed. Because, Google is using xml feed as their basic data. To read blogger xml feed we must request that data using GET method. After that, server (in this case is Google) will send blogger xml feed to you. After that, you can read the data using any programming language. But in here, we only use JavaScript. As long as your blog is public, you don’t have to make authentication. Also, there are two ways url to get xml feed,

http://www.example.com/feeds/posts/default

or using

http://www.blogger.com/feeds/blogID/posts/default

Remember, these urls contain 25 posts for maximum. But in practice, the first url is always used by blogger users. Before we discuss how to read xml feed, it will more valuable if we start it with “what inside blogger xml feed?”.  To understand this, please type the address below on your browser

http://www.example.com/feeds/posts/default?redirect=false

Enter, and you will see an xml data on your browser now.

---

Inside blogger xml feed

Generally, blogger xml feed have format as follow

<feed> <id>blog ID</id> <updated>Last update of your blog <category blog”="" of="" term="”label" your=""> <title type="”text”">Your blog title, this depend in your blogger setting, not from your title tag inside head tag</title> <subtitle type="”html”">Your blog description, this depend in your blogger setting, not from your meta description</subtitle> <link href="http://www.example.com/feeds/posts/default" rel="http://schemas.google.com/g/2005#feed" type="application/atom+xml"></link> <link href="http://www.blogger.com/feeds/blogID/posts/default?redirect=false" rel="self" type="application/atom+xml"></link> <link href="http://www.example.com/" rel="alternate" type="text/html"></link> <link href="http://pubsubhubbub.appspot.com/" rel="hub"></link> <link href="http://www.blogger.com/feeds/blogID/posts/default?start-index=26&max-results=25&redirect=false" rel="next" type="application/atom+xml"></link> <author> <name>author name “admin”</name> <uri>url of author profile</uri> <email>email of this blog</email> <gd:image>image of author profile</gd:image> </author> <generator>Blogger</generator> <opensearch:totalresults>total post</opensearch:totalresults> <opensearch:startindex>start post</opensearch:startindex> <opensearch:itemsperpage>last post</opensearch:itemsperpage> <entry> <id>postID</id> <published>date of this post published</published> <updated>last update of this post</updated> <category scheme="http://www.blogger.com/atom/ns#" term="label of this post"> <title type="text">title of this post</title> <content type="”html”">post content</content> <link href="http://www.threelas.com/feeds/postID/comments/default" rel="replies" title="Post Comments" type="application/atom+xml"></link> <link href="http://www.example.com/2012/02/first-post.html#comment-form" rel="replies" title="0 Comments" type="text/html"></link> <link href="http://www.blogger.com/feeds/blogID/posts/default/postID" rel="edit" type="application/atom+xml"></link> <link href="http://www.blogger.com/feeds/blogID/posts/default/postID" rel="self" type="application/atom+xml"></link> <link href="http://www.example.com/2012/02/first-post.html" rel="alternate" title="First Post" type="text/html"></link> <author> <name>author of this post</name> <uri>url of author profile</uri> <email>email of this blog</email> <gd:image>image of author profile</gd:image> </author> <media:thumbnail> //image of this post <thr:total>comment total</thr:total> <georss:featurename>name of post location</georss:featurename> </media:thumbnail></category></entry> </category></updated></feed> </xml-stylesheet></xml> 

Remember, this feed is not always same, but basically, it will look like this. Example, gd:image tag is not always same for user using blogger profile and user using google+ profile. Another example, if you have not active post location, then georss:featurename will not publish on your xml feed. Inside entry tag you will see several link tag with specific url. Only link tag with attribute rel=’alternate’ describe truly url of your post.

---

Read blogger xml feed using JavaScript

It is very easy to read xml feed using javascript. First, you must specific what browser will used. Of course, you want all. And this is the code (this part is needed)

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","thought.xml",false); xmlhttp.send(); xmlRead=xmlhttp.responseXML; 

after that, specific what you want to read of your xml feed. Let say, you want to read content of entry tag. So this is the step (option)

var x=xmlDoc.getElementsByTagName("entry"); document.write(x.length+"<br/>"); for(var i=0;i<=x.length-1;i++) { document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("<br/>"); document.write(x[i].getElementsByTagName("content")[0].childNodes[0].nodeValue); var y = x[i].getElementsByTagName("category"); for(var j=0;j<=y.length-1;j++) { document.write(x[i].getElementsByTagName("category")[j].getAttribute("term")); } document.write("<hr/>"); document.write("<br/>"); document.write("<br/>"); } 

For complete code, see below

<script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","feeds/posts/default",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var x=xmlDoc.getElementsByTagName("entry"); document.write(x.length+"<br/>"); for(var i=0;i<=x.length-1;i++) { document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue); document.write("<br/>"); document.write(x[i].getElementsByTagName("content")[0].childNodes[0].nodeValue); var y = x[i].getElementsByTagName("category"); for(var j=0;j<=y.length-1;j++) { document.write(x[i].getElementsByTagName("category")[j].getAttribute("term")); } document.write("<hr/>"); document.write("<br/>"); document.write("<br/>"); } </script> 

You must put this code in your blog. Remember, this step is not always easy. Sometimes specific browser can read xml feed. But in here, we hope you have a picture how to read xml feed.