Tuesday, October 30, 2012

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>');
        }
    });
});

Lihat Demo

Referensi: Blogger JSON Feed With jQuery Ajax

Labels: , , , , ,

21 Comments:

At Tuesday, October 30, 2012 at 4:23:00 PM GMT+7, Blogger ibnusyuhadap3 said...

Thank you for give link of threelas.com as original posts.

 
At Tuesday, October 30, 2012 at 6:46:00 PM GMT+7, Blogger Taufik Nurrohman said...

Always. This site is purely for storing information that can be accounted for :)

 
At Tuesday, October 30, 2012 at 9:51:00 PM GMT+7, Blogger Unknown said...

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..

 
At Tuesday, October 30, 2012 at 10:06:00 PM GMT+7, Blogger Taufik Nurrohman said...

Kalau file tidak diupload secara langsung tidak akan tampil sebagai thumbnail. Error mungkin muncul dari pengaturan feed blog yang dipotong.

 
At Tuesday, October 30, 2012 at 10:37:00 PM GMT+7, Blogger Unknown said...

"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??

 
At Wednesday, October 31, 2012 at 9:53:00 AM GMT+7, Blogger Taufik Nurrohman said...

Yap. Lebih baik disetting ke Penuh. Script sudah Saya coba dan baik-baik saja.

 
At Tuesday, May 6, 2014 at 7:16:00 PM GMT+7, Blogger Abdelghafour said...

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.

 
At Tuesday, May 6, 2014 at 8:05:00 PM GMT+7, Blogger Taufik Nurrohman said...

What about encodeURIComponent ?

encodeURIComponent('رياضة');

Result:

%D8%B1%D9%8A%D8%A7%D8%B6%D8%A9

 
At Saturday, May 10, 2014 at 7:16:00 PM GMT+7, Blogger Abdelghafour said...

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){}

 
At Saturday, May 10, 2014 at 9:41:00 PM GMT+7, Blogger Taufik Nurrohman said...

var Label = 'رياضة';

$.ajax({
url: window.location.protocol + '//' + window.location.host + '/feeds/posts/default/-/' + encodeURIComponent(Label) + '?alt=json-in-script&max-results=5'

});

 
At Sunday, May 11, 2014 at 1:30:00 AM GMT+7, Blogger Abdelghafour said...

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.

 
At Sunday, May 11, 2014 at 6:29:00 PM GMT+7, Blogger Abdelghafour said...

The forth line should appear like this


$(this).html("" + sp[0] + "" + sp[1] + "" + sp[2] + "");


http://goo.gl/k7tmOs

 
At Wednesday, May 14, 2014 at 10:42:00 AM GMT+7, Blogger Taufik Nurrohman said...

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];

 
At Tuesday, May 26, 2015 at 10:16:00 AM GMT+7, Blogger أسامة بويردن said...

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!

 
At Tuesday, May 26, 2015 at 5:49:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Tuesday, May 26, 2015 at 11:33:00 PM GMT+7, Blogger أسامة بويردن said...

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?

 
At Sunday, May 31, 2015 at 3:44:00 PM GMT+7, Blogger Taufik Nurrohman said...

They usually use document.write to output the generated HTML directly, but now it’s no longer recommended for this reason.

 
At Monday, July 4, 2016 at 6:54:00 PM GMT+7, Blogger Unknown said...

mas kalo mau menampilkan label masing2 posting gimana?

 
At Wednesday, July 6, 2016 at 2:27:00 PM GMT+7, Blogger Taufik Nurrohman said...

/2015/02/json-parser-for-blogger-posts-and-pages.html

 
At Saturday, July 9, 2016 at 11:38:00 PM GMT+7, Blogger Unknown said...

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

 
At Monday, July 11, 2016 at 6:46:00 PM GMT+7, Blogger Taufik Nurrohman said...

Coba kamu cari formulir kontak di blog ini.

 

Post a Comment

<< Home