Kadang mungkin kita memerlukan widget untuk fitur tertentu, akan tetap widget tersebut tidak disediakan oleh Blogger ataupun para widget developer (platform Blogger). Pihak Blogger sendiri sudah menyediakan API untuk mengatasi ini, jadi kita bisa membuat widget kita sendiri dengan membaca feed blog menggunakan JSON dan JavaScript.
Berikut adalah kode-kode Blogger JSON Feed API tersebut:
| Objek | Deskripsi | Contoh |
|---|---|---|
| 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 | Danlogs |
| json.feed.subtitle.$t | Show description of a blog | Dan's Weblog |
| json.feed.author[] | Array of blog authors | Danang Probo Sayekti, Matt Cutts |
| json.feed.author[i].name.$t | Show the i-th blog author name | Danang Pobo Sayekti |
| json.feed.author[i].uri.$t | Show the i-th profile author uri | https://x.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:x.com,1999:blog-8.post-123 |
| 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 | Berikut adalah berbagai macam ... |
| json.feed.entry[i].content.$t | Show post content | Berikut adalah berbagai macam Blogger JSON Feed API ... |
| 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.danlogs.com/2013/07/blogger-api.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://profiles.google.com/123456789 |
| json.feed.entry[i].author[x].gd$image.src | Image uri of the x-th author profile on the i-th post | //lh4.x.com/photo.jpg |
| json.feed.entry[i].media$thumbnail.url | Show image on the i-th post | http://3.bp.x.com/danlogs.jpg |
| json.feed.entry[i].thr$total.$t | Show total threaded comments | 7 |
Berikut adalah contoh implementasi dari kode di atas:
Misal saya memerlukan 5 postingan terakhir berdasarkan label tertentu, label yang ingin ditampilkan adalah "Blogger". Saya mengambil title serta summary dari postingan-postingan tersebut.
<script type="text/javascript">
function mycallback(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="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><p>' + postSummary + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.danlogs.com/feeds/posts/summary/-/Blogger?max-results=5&alt=json-in-script&callback=mycallback"></script>
Catatan: perlu kita pahami kalau json.feed.entry[i].summary.$t hanya akan tersedia jika URL feed yang kita ambil menggunakan http://www.danlogs.com/feeds/posts/summary dan bukan http://www.danlogs.com/feeds/posts/default
Sekarang bagaimana kita bisa membuat widget recent post tanpa disortir oleh label tertentu? widget ini juga hanya menampilkan 90 karakter pada summary. berikut contoh codenya:
<script type="text/javascript">
function mycallback(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 postAuthor = json.feed.entry[i].author[0].name.$t;
var postSummary = json.feed.entry[i].summary.$t;
var entryShort = postSummary.substring(0, 90);
var entryEnd = entryShort.lastIndexOf(" ");
var postContent = entryShort.substring(0, entryEnd) + '...';
var item = '<div class="wrapper"><h3><a href=' + postUrl + '>' + postTitle + '</h3></a><span>'+ postAuthor + '</span><p>' + postContent + '</p></div>';
document.write(item);
}
}
</script>
<script src="http://www.danlogs.com/feeds/posts/summary?orderby=published&max-results=5&alt=json-in-script&callback=mycallback"></script>
