Di postingan sebelumnya saya telah share tips menampilkan recent post ini, nah, sekarang saya memiliki cara lain untuk menampilkan recent post dari website atau blog yang anda kehendaki dan tentunya tidak mengurangi performa loading situs anda.
Memang dibandingkan dengan metode recent post lain seperti via google reader, feedburner buzzboost, atau yang lainnya, metode ini masih tergolong lebih berat namun keuntungannya adalah feed-feed yang dimasukkan bisa lebih up to date dan anda tidak perlu lagi add feed di google reader atau feedburner untuk bisa menampilkan recent post, sehingga lebih praktis.
Recent post kali ini tetap mengandalkan API dari google, namun dengan menambahkan sedikit hack saya membuatnya bisa lebih update (hampir real time).
Berikut script recent post beserta cara pemasangannya:
Script bagian 1.
Script ini tidak perlu anda edit lagi, cukup ditempatkan tepat dibawah tag <body> pada template.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//<![CDATA[
var gfeedfetcher_loading_image="http://i.imgur.com/xDR3p.gif";google.load("feeds","1");function gfeedfetcher(b,a,c){this.linktarget=c||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+b+'"></div>');this.feedcontainer=document.getElementById(b);this.itemcontainer="<li>"} gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined")this.sortstring=a};gfeedfetcher.prototype.setentrycontainer=function(b){this.itemcontainer="<"+b.toLowerCase()+">"}; gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Memuat feed';for(var b=this,a=0;a<this.feedurls.length;a++){var c=new google.feeds.Feed(this.feedurls[a]),d=this.feedlimit<=this.feedurls.length?1:Math.floor(this.feedlimit/this.feedurls.length);this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&a==this.feedurls.length-1&&(d+=this.feedlimit%this.feedurls.length);c.setNumEntries(d); c.load(function(a){return function(c){b._fetch_data_as_array(c,a)}}(this.feedlabels[a]))}};gfeedfetcher._formatdate=function(b,a){var c=new Date(b);a.indexOf("datetime")!=-1?c.toLocaleString():a.indexOf("date")!=-1?c.toLocaleDateString():a.indexOf("time")!=-1&&c.toLocaleTimeString();return""}; gfeedfetcher._sortarray=function(b,a){a=a=="label"?"ddlabel":a;if(a=="title"||a=="ddlabel")b.sort(function(b,c){var e=b[a].toLowerCase(),f=c[a].toLowerCase();return e<f?-1:e>f?1:0});else try{b.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})}catch(c){}}; gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var c=!b.error?b.feed.entries:"";c==""&&alert("Google Feed API Error: "+b.error.message);for(var d=0;d<c.length;d++)b.feed.entries[d].ddlabel=a;this.feeds=this.feeds.concat(c);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;this.feedsfetched==this.feedurls.length&&this._displayresult(this.feeds)}; gfeedfetcher.prototype._displayresult=function(b){var a=this.itemcontainer=="<li>"?"<ul>\n":"";gfeedfetcher._sortarray(b,this.sortstring);for(var c=0;c<b.length;c++){var d='<a href="'+b[c].link+'" target="'+this.linktarget+'">'+b[c].title+"</a>",g=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ",e=gfeedfetcher._formatdate(b[c].publishedDate,this.showoptions),f=/description/i.test(this.showoptions)?"<br />"+b[c].content:/snippet/i.test(this.showoptions)? "<br />"+b[c].contentSnippet:"";a+=this.itemcontainer+d+" "+g+" "+e+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}a+=this.itemcontainer=="<li>"?"</ul>":"";this.feedcontainer.innerHTML=a};
var unik = Math.floor(Math.random() * 100);
//]]>
</script>
Script bagian 2.
Taruh di tempat dimana recent post ini akan ditampilkan.
<script type="text/javascript">
var artikel=new gfeedfetcher("IDpostingan", "namaclass", "_blank");
artikel.addFeed("Feed blog", "http://blog-tutorial-menarik.blogspot.com/feeds/posts/default#"+unik);
artikel.setentrycontainer("li");
artikel.filterfeed(5, "date");
artikel.init();
</script>
Keterangan:
- jika anda ingin menampilkan lebih dari 1 recent post, maka IDpostingan dan var artikel tidak boleh sama dengan recent post yang lain.
- Ubah feed blog ini dengan feed situs yang anda inginkan.
- angka 5 untuk mengatur jumlah postingan terbaru yang tampil, di urut berdasarkan tanggal posting.
- untuk menggabungkan beberapa feed menjadi 1 recent post, anda cukup menambahkan fungsi addFeed() lagi, contohnya:
artikel.addFeed("Feed blog", "http://blog-tutorial-menarik.blogspot.com/feeds/posts/default#"+unik);
artikel.addFeed("Feed blog", "http://blog1.com/feeds/posts/default#"+unik);
artikel.addFeed("Feed blog", "http://blog2.com/feeds/posts/default#"+unik);
isi dari 3 feed diatas akan digabung dan di sorting berdasarkan tanggal publish.
Script diatas saya tambahakn angka random dibelakang URL feed, hal ini bertujuan untuk menghindari caching server sehingga recent post lebih terupdate.
Selamat mencoba.. :D
Memang dibandingkan dengan metode recent post lain seperti via google reader, feedburner buzzboost, atau yang lainnya, metode ini masih tergolong lebih berat namun keuntungannya adalah feed-feed yang dimasukkan bisa lebih up to date dan anda tidak perlu lagi add feed di google reader atau feedburner untuk bisa menampilkan recent post, sehingga lebih praktis.
Recent post kali ini tetap mengandalkan API dari google, namun dengan menambahkan sedikit hack saya membuatnya bisa lebih update (hampir real time).
Berikut script recent post beserta cara pemasangannya:
Script bagian 1.
Script ini tidak perlu anda edit lagi, cukup ditempatkan tepat dibawah tag <body> pada template.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//<![CDATA[
var gfeedfetcher_loading_image="http://i.imgur.com/xDR3p.gif";google.load("feeds","1");function gfeedfetcher(b,a,c){this.linktarget=c||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+b+'"></div>');this.feedcontainer=document.getElementById(b);this.itemcontainer="<li>"} gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined")this.sortstring=a};gfeedfetcher.prototype.setentrycontainer=function(b){this.itemcontainer="<"+b.toLowerCase()+">"}; gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Memuat feed';for(var b=this,a=0;a<this.feedurls.length;a++){var c=new google.feeds.Feed(this.feedurls[a]),d=this.feedlimit<=this.feedurls.length?1:Math.floor(this.feedlimit/this.feedurls.length);this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&a==this.feedurls.length-1&&(d+=this.feedlimit%this.feedurls.length);c.setNumEntries(d); c.load(function(a){return function(c){b._fetch_data_as_array(c,a)}}(this.feedlabels[a]))}};gfeedfetcher._formatdate=function(b,a){var c=new Date(b);a.indexOf("datetime")!=-1?c.toLocaleString():a.indexOf("date")!=-1?c.toLocaleDateString():a.indexOf("time")!=-1&&c.toLocaleTimeString();return""}; gfeedfetcher._sortarray=function(b,a){a=a=="label"?"ddlabel":a;if(a=="title"||a=="ddlabel")b.sort(function(b,c){var e=b[a].toLowerCase(),f=c[a].toLowerCase();return e<f?-1:e>f?1:0});else try{b.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})}catch(c){}}; gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var c=!b.error?b.feed.entries:"";c==""&&alert("Google Feed API Error: "+b.error.message);for(var d=0;d<c.length;d++)b.feed.entries[d].ddlabel=a;this.feeds=this.feeds.concat(c);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;this.feedsfetched==this.feedurls.length&&this._displayresult(this.feeds)}; gfeedfetcher.prototype._displayresult=function(b){var a=this.itemcontainer=="<li>"?"<ul>\n":"";gfeedfetcher._sortarray(b,this.sortstring);for(var c=0;c<b.length;c++){var d='<a href="'+b[c].link+'" target="'+this.linktarget+'">'+b[c].title+"</a>",g=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ",e=gfeedfetcher._formatdate(b[c].publishedDate,this.showoptions),f=/description/i.test(this.showoptions)?"<br />"+b[c].content:/snippet/i.test(this.showoptions)? "<br />"+b[c].contentSnippet:"";a+=this.itemcontainer+d+" "+g+" "+e+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}a+=this.itemcontainer=="<li>"?"</ul>":"";this.feedcontainer.innerHTML=a};
var unik = Math.floor(Math.random() * 100);
//]]>
</script>
Script bagian 2.
Taruh di tempat dimana recent post ini akan ditampilkan.
<script type="text/javascript">
var artikel=new gfeedfetcher("IDpostingan", "namaclass", "_blank");
artikel.addFeed("Feed blog", "http://blog-tutorial-menarik.blogspot.com/feeds/posts/default#"+unik);
artikel.setentrycontainer("li");
artikel.filterfeed(5, "date");
artikel.init();
</script>
Keterangan:
- jika anda ingin menampilkan lebih dari 1 recent post, maka IDpostingan dan var artikel tidak boleh sama dengan recent post yang lain.
- Ubah feed blog ini dengan feed situs yang anda inginkan.
- angka 5 untuk mengatur jumlah postingan terbaru yang tampil, di urut berdasarkan tanggal posting.
- untuk menggabungkan beberapa feed menjadi 1 recent post, anda cukup menambahkan fungsi addFeed() lagi, contohnya:
artikel.addFeed("Feed blog", "http://blog-tutorial-menarik.blogspot.com/feeds/posts/default#"+unik);
artikel.addFeed("Feed blog", "http://blog1.com/feeds/posts/default#"+unik);
artikel.addFeed("Feed blog", "http://blog2.com/feeds/posts/default#"+unik);
isi dari 3 feed diatas akan digabung dan di sorting berdasarkan tanggal publish.
Script diatas saya tambahakn angka random dibelakang URL feed, hal ini bertujuan untuk menghindari caching server sehingga recent post lebih terupdate.
Selamat mencoba.. :D
