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
Labels: Blogger, JavaScript, jQuery, JSON, Lanjutan, Potongan
21 Comments:
Thank you for give link of threelas.com as original posts.
By ibnusyuhadap3, at Tuesday, October 30, 2012 at 4:23:00 PM GMT+7
Always. This site is purely for storing information that can be accounted for :)
By Taufik Nurrohman, at Tuesday, October 30, 2012 at 6:46:00 PM GMT+7
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..
<script type="text/javascript">
//<![CDATA[
var randarray = new Array();
var l = 0;
var flag;
var numofpost = 9;
var rd_monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
function randomposts(r){var h=parseInt(r.feed.openSearch$totalResults.$t,10);for(i=0;i<numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*h);for(j in randarray){if(l==randarray[j]){flag=1}}if(flag==0&&l!=0){randarray[i++]=l}}document.write('<ul id="randompostx">');for(n in randarray){var c=randarray[n];var m=r.feed.entry[c-1];var b=m.author[0].name.$t,q=m.published.$t.substring(0,10),s=q.substring(0,4),g=q.substring(5,7),o=q.substring(8,10),f=m.thr$total.$t,e;if("media$thumbnail" in m){e=m.media$thumbnail.url}else{e="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif"}for(k=0;k<m.link.length;k++){if(m.link[k].rel=="alternate"){var a=m.link[k].href,d=m.title.$t;break}}document.write('<li class="isobrick" >');document.write('<a href="'+a+'"><div class="overlayx"></div><img src="'+e+'"/></a>');document.write('<a href="'+a+'"><h5>'+d+"</h5></a>");document.write('<div class="inforp"><span class="dt">'+o+" "+rd_monthNames[parseInt(g,10)-1]+" "+s+'</span><span class="auty">'+b+'</span><span class="jkmt">'+f+'</span></div>');document.write('</li>')}document.write('</ul>')};
//]]>
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
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..
By Unknown, at Tuesday, October 30, 2012 at 9:51:00 PM GMT+7
Kalau file tidak diupload secara langsung tidak akan tampil sebagai thumbnail. Error mungkin muncul dari pengaturan feed blog yang dipotong.
By Taufik Nurrohman, at Tuesday, October 30, 2012 at 10:06:00 PM GMT+7
"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??
By Unknown, at Tuesday, October 30, 2012 at 10:37:00 PM GMT+7
Yap. Lebih baik disetting ke Penuh. Script sudah Saya coba dan baik-baik saja.
By Taufik Nurrohman, at Wednesday, October 31, 2012 at 9:53:00 AM GMT+7
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.
By Abdelghafour, at Tuesday, May 6, 2014 at 7:16:00 PM GMT+7
What about encodeURIComponent ?
encodeURIComponent('رياضة');
Result:
%D8%B1%D9%8A%D8%A7%D8%B6%D8%A9
By Taufik Nurrohman, at Tuesday, May 6, 2014 at 8:05:00 PM GMT+7
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){}
By Abdelghafour, at Saturday, May 10, 2014 at 7:16:00 PM GMT+7
var Label = 'رياضة';
$.ajax({
url: window.location.protocol + '//' + window.location.host + '/feeds/posts/default/-/' + encodeURIComponent(Label) + '?alt=json-in-script&max-results=5'
…
});
By Taufik Nurrohman, at Saturday, May 10, 2014 at 9:41:00 PM GMT+7
it worked if I add the label manually but when I get label like this it didn't work.
$('#home-layout .widget-content').each(function () {
var c = $(this).html(),
sp = c.split('/');
$(this).html("" + sp[0] + "" + sp[1] + "" + sp[2] + "");
var spc = $(this).text();
var pn = $(this).find("strong").eq(0).text(),
ps = $(this).find("strong").eq(1).text(),
pl = $(this).find("strong").eq(2).text();
if(ps.match(/list/i))
{
var label = pl;
$.ajax({url:""+window.location.protocol+"//"+window.location.host+"/feeds/posts/default/-/"+encodeURIComponent(label)+"?alt=json-in-script&max-results="+pn+"",type:'get',dataType:"jsonp",success:function(b){}
}
});
The user enter code like this 5/one/أخبار
5 : posts number.
one : posts style.
أخبار : The label.
By Abdelghafour, at Sunday, May 11, 2014 at 1:30:00 AM GMT+7
The forth line should appear like this
$(this).html("" + sp[0] + "" + sp[1] + "" + sp[2] + "");
http://goo.gl/k7tmOs
By Abdelghafour, at Sunday, May 11, 2014 at 6:29:00 PM GMT+7
Do you have any working example? JSFiddle, JSBin, etc?
Why don’t you just use this:
var pn = sp[0],
ps = sp[1],
pl = sp[2];
By Taufik Nurrohman, at Wednesday, May 14, 2014 at 10:42:00 AM GMT+7
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!
By أسامة بويردن, at Tuesday, May 26, 2015 at 10:16:00 AM GMT+7
The feed data is now connected to content[i] not data.feed.entry[i] so:
var thumb = 'media$thumbnail' in content[i] ? '<img src="' + content[i].media$thumbnail.url + '">' : "";
Demo: http://jsfiddle.net/tovic/QLnmW/26
By Taufik Nurrohman, at Tuesday, May 26, 2015 at 5:49:00 PM GMT+7
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?
By أسامة بويردن, at Tuesday, May 26, 2015 at 11:33:00 PM GMT+7
They usually use document.write to output the generated HTML directly, but now it’s no longer recommended for this reason.
By Taufik Nurrohman, at Sunday, May 31, 2015 at 3:44:00 PM GMT+7
mas kalo mau menampilkan label masing2 posting gimana?
By Unknown, at Monday, July 4, 2016 at 6:54:00 PM GMT+7
→ /2015/02/json-parser-for-blogger-posts-and-pages.html
By Taufik Nurrohman, at Wednesday, July 6, 2016 at 2:27:00 PM GMT+7
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
By Unknown, at Saturday, July 9, 2016 at 11:38:00 PM GMT+7
Coba kamu cari formulir kontak di blog ini.
By Taufik Nurrohman, at Monday, July 11, 2016 at 6:46:00 PM GMT+7
Post a Comment
<< Home