Learn More

Friday, February 10, 2012

Basic Blogger JSON Feed Api

blogger logo
We have discussed before about how to read blogger xml feed using JavaScript. That way is not always work on several browsers, especially Internet Explorer. It must someone that expert to make it works on all browsers. Fortunately, JSON feed is available by blogger, this feed is more easy than before. Although when this post is published for the first time, JSON feed is readable only. Actually, JSON feed is an xml feed that has changed to JSON format. Because data feed of blogger is an xml. To get this JSON feed you just add parameter “alt=json” or “alt=json-in-script” in your data feed. Watch the example below

http://www.example.com/feeds/posts/default?alt=json

or

http://www.example.com/feeds/posts/default?alt=json-in-script

The second url is more demand. Remember, this url is only show 25 posts for maximum. So if you want more, you need add parameter “max-results=NUMBER_POST”. As practice, access your blog JSON feed on your browser, so that it will look like follow
Code
From the code above, we can take several conclusions

ObjectDescriptionExample
json.feed.id.$tShow blog IDtag:blogger.com,1999:blog-85047
json.feed.updated.$tLast update of a blog2012-02-08T18:21:57.051+07:00
json.feed.category[]Categories / label array of a blog
json.feed.category[i].termShow the i-th categoryBlogger and widget
json.feed.title.$tShow blog nameThreelas
json.feed.subtitle.$tShow description of a blogThreelas is a good site in the world
json.feed.author[]Array of blog authorsPutri Arisnawati, Ibnu Syuhada
json.feed.author[i].name.$tShow the i-th blog author namePutri Arisnawati
json.feed.author[i].uri.$tShow the i-th profile author urihttps://profiles.google.com/116848xxx
json.feed.openSearch$totalResults.$tShow total posts222
json.feed.entry[]Posts array of a blog
json.feed.entry[i].id.$tShow the i-th post IDtag:blogger.com,1999:blog-8508.post-578455349
json.feed.entry[i].title.$tShow the i-th post titleBasic Blogger JSON Feed API
json.feed.entry[i].published.$tShow time published of the i-th post2012-02-07T12:56:00.000+07:00
json.feed.entry[i].updated.$tShow when the i-th post is updated2012-02-07T12:56:47.089+07:00
json.feed.entry[i].category[]Show array of post categories
json.feed.entry[i].category[j].termShow the j-th category of the i-th postBlogger Api
json.feed.entry[i].content.$tShow post contentThis post is explain about using JSON feed ...
json.feed.entry[i].link[]Links array of a post
json.feed.entry[i].link[j].hrefShow the j-th link of the i-th posthttp://www.example.com/2012/02/does.html
json.feed.entry[i].author[]Array of post authors
json.feed.entry[i].author[j].name.$tName of the j-th authro on the i-th postPutri Arisnawati
json.feed.entry[i].author[j].uri.$tShow uri author profilehttps://profiles.google.com/116848xxx
json.feed.entry[i].author[j].gd$image.srcImage uri of the j-th author profile on the i-th post//lh4.googleusercontent.com/photo.jpg
json.feed.entry[i].media$thumbnail.urlShow image on the i-th posthttp://3.bp.blogspot.com/Allen+Mills.jpg
json.feed.entry[i].thr$total.$tShow total threaded comments5



Retrieve a list of posts

To do this, you must read our previous post. That is only link tag with attribute “rel=alternate” will show the right url of your post. So, stat your code with the following code



Next step, choose what parameters you want to retrieve. See the example below

 

To see the result, you must use callback function. See complete code below

 

Easy, isn’t it? Each free widget from us is always using JSON feed. Now, you start making a widget.

  1. easy bagi yg bisa..kekekekekkk
    semoga bs ngerti aaaahhhh :D

    ReplyDelete
    Replies
    1. Semua tergantung dari keseriusan kita. Kami memberikan jalan bagi anda pengguna blogger yang ingin meningkatkan kemampuan bloggingnya di blogger.

      Delete
  2. Mungkin yang Saya tidak mengerti ada di json.feed.entry[i].author[j].media$thumbnail.url Sudah Saya tambahkan di variabel tapi tetap tidak bekerja:

    var thumb = json.feed.entry[i].author[j].media$thumbnail.url;
    ...
    document.write(thumb);


    Beberapa widget recent post thumbnail Saya lihat tidak memanggilnya secara langsung tetapi mencari tag <img> dari konten feed Saya rasa. Saya baru belajar JSON:

    ...
    img[o] = imgr[j];
    s = r;
    a = s.indexOf("<img");
    b = s.indexOf('src="', a);
    c = s.indexOf('"', b + 5);
    d = s.substr(b + 5, c - b - 5);
    if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
    img[o] = d
    }
    ...

    ReplyDelete
    Replies
    1. Mas Taufik, maafkan kami baru membalas, kami baru liburan akhir minggu. Sebelumnya terima kasih anda telah bertanya ini, bila tidak kami tidak akan menyadari telah melakukan salah ketik. yang benar adalah json.feed.entry[i].media$thumbnail.url bukan json.feed.entry[i].author[j].media$thumbnail.url, object ini berfungsi untuk mendapatkan url dari image pada sebuah posting. Cara memanggil melalui tag image tentu adalah sebuah mungkin tetapi itu akan menyebabkan widget berjalan lebih lambat. Namun dengan json.feed.entry[i].media$thumbnail.url widget akan berjalan lebih cepat. Inilah kunci rahasia dalam membuat widget recent post ataupun popular posts. Namun, anda juga perlu tahu, untuk menampilkan gambar, anda tetap harus menggunakan img tag. Apapun caranya.

      Apakah anda ingin widget multi label recent post with thumbnail? silahkan datang ke Multi Label Recent Post With Thumbnail

      Delete
    2. Wah iya sudah jadi. Ini referensi yang bagus, kapan-kapan mungkin akan saya pecah-pecah supaya lebih detail cuma mungkin masih merasa belum yakin saja :(o)

      Delete
    3. ya, Saya lupa kalau itu untuk mengambil data URL saja:

      document.write('<img src="' + thumb + '" alt="thumbnail" />');

      Delete
    4. Terima kasih, kami mencoba yang terbaik, kami yakin teman-teman blogger yang lain jauh lebih baik dari kami.

      Delete
  3. visit this link http://codebeautify.org/

    ReplyDelete
  4. please help me. this code is get thumbnail from JSON FEED API from blogger:

    if ("media$thumbnail" in entry[i]) {

    postimg = entry[i].media$thumbnail.url;

    } else {

    postimg = pBlank;

    }



    but i wan to get an image not thumbnail. cause on my blog thumbnail cant display well.
    thx for supporting soon

    ReplyDelete