JSON Blogger dengan AJAX jQuery
HTML
<div id="result">Loading...</div>
jQuery
// $.ajax({url:feedUrl,type:'get',dataType:'jsonp',success:function(json){ … }});
$(function() {
$.ajax({
url: 'http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script',
type: 'get',
dataType: 'jsonp',
success: function(data) {
var link, title, skeleton = '',
content = data.feed.entry;
if (content !== undefined) {
skeleton = "<ol>";
for (var i = 0; i < content.length; i++) {
title = content[i].title.$t;
for (var j = 0; j < content[i].link.length; j++) {
if (content[i].link[j].rel == "alternate") {
link = content[i].link[j].href;
break;
}
}
skeleton += '<li><a href="' + link + '">' + title + '</a></li>';
}
skeleton += '</ol>';
$('#result').html(skeleton);
} else {
$('#result').html('<span>No result!</span>');
}
},
error: function() {
$('#result').html('<strong>Error loading feed!</strong>');
}
});
});
Referensi: Blogger JSON Feed With jQuery Ajax
21 Komentar
ibnusyuhadap3
Thank you for give link of threelas.com as original posts.
Taufik Nurrohman
Always. This site is purely for storing information that can be accounted for :)
Unknown
Mas mau nanya nih seputar JSON Blogger..
klo misalnya ada post yang gambarnya disimpan bukan diblogspot/picasa misalnya pada photobucket, apa gambarnya bisa dipanggil lewat JSON feed??
karena saya ada script Random post kayak gini..
klo di blog yang saya pake berjalan dengan sukses..
tapi kadang ada blog yang error klo pake script ini..
apa masalahnya yah mas..
tolong dibantu.. :)
Terima kasih sebelumnya..
Taufik Nurrohman
Kalau file tidak diupload secara langsung tidak akan tampil sebagai thumbnail. Error mungkin muncul dari pengaturan feed blog yang dipotong.
Unknown
"pengaturan feed blog yang dipotong" apa maksudnya mas??
apa yang dibagian setting --> site feednya??
yang full,until jump break, short..
apa yang itu mas??
apa sudah benar script random post diatas mas??
ato masih ada kodenya yang salah??
Taufik Nurrohman
Yap. Lebih baik disetting ke Penuh. Script sudah Saya coba dan baik-baik saja.
Abdelghafour
Thank you for you tutorial.
$.ajax({url:""+window.location.protocol+"//"+window.location.host+"/feeds/posts/default/-/"+Label+"?alt=json-in-script&max-results=5",type:'get',dataType:"jsonp",success:function(data){}
I changed the code to gave the ability to user to choose the label that he wanted to get posts from, The code work great if the user choose an English label (Ex : Sport), But the problem is when the user choose an Arabic label (Ex : رياضة) the code worked in all browser except IE (I have IE 9).
Do you have any idea about this issue.
Thank you again.
Taufik Nurrohman
What about
encodeURIComponent
?Result:
Abdelghafour
I use it like that but it didn't work.
$.ajax({url:""+window.location.protocol+"//"+window.location.host+"/feeds/posts/default/-/"+encodeURIComponent ('Label')+"?alt=json-in-script&max-results=5",type:'get',dataType:"jsonp",success:function(data){}
Taufik Nurrohman
Abdelghafour
it worked if I add the label manually but when I get label like this it didn't work.
The user enter code like this 5/one/أخبار
5 : posts number.
one : posts style.
أخبار : The label.
Abdelghafour
The forth line should appear like this
http://goo.gl/k7tmOs
Taufik Nurrohman
Do you have any working example? JSFiddle, JSBin, etc?
Why don’t you just use this:
أسامة بويردن
Hi, Thanks for this tutorial but please can you tell me how to use ajax json to get the thumbnail from blogger posts? I try this but it's doesn't working at all :(
For Example :
var thumb = data.feed.entry[i].media$thumbnail.url;
htmlcode +='<img src="'+thumb+'"/>';
Can you tell me what is the problem here, Cheers!
Taufik Nurrohman
The feed data is now connected to
content[i]
notdata.feed.entry[i]
so:Demo: http://jsfiddle.net/tovic/QLnmW/26
أسامة بويردن
Thank you so much is working fine now :-bd
Demo : http://jsfiddle.net/uikithemes/qpy3thwz/
Some templates have recent posts by add only recentposts on HTML/JAVASCRIPT widget without add
<div id="recentposts"></div>
How i can do that?Taufik Nurrohman
They usually use
document.write
to output the generated HTML directly, but now it’s no longer recommended for this reason.Unknown
mas kalo mau menampilkan label masing2 posting gimana?
Taufik Nurrohman
→ /2015/02/json-parser-for-blogger-posts-and-pages.html
Unknown
okey punya sipp nih mas udah bisa sekarang. makasih mas taufik bantuannya. oh iya boleh gak mas saya minta emailnya? kalo mau nanya kode biar mudah
Taufik Nurrohman
Coba kamu cari formulir kontak di blog ini.