Mecha versi 2.6.4 sudah dirilis!

JSON Blogger dengan AJAX jQuery

Tabel Konten
  1. HTML 
  2. 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

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

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

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 ?

encodeURIComponent('رياضة');

Result:

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

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

var Label = 'رياضة';
$.ajax({
url: window.location.protocol + '//' + window.location.host + '/feeds/posts/default/-/' + encodeURIComponent(Label) + '?alt=json-in-script&max-results=5'
…
});

Abdelghafour

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.

Abdelghafour

The forth line should appear like this


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

http://goo.gl/k7tmOs

Taufik Nurrohman

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

أسامة بويردن

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

أسامة بويردن

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.

Komentar telah ditutup.