Menampilkan RSS feed dari situs lain (misalnya : CNN atau Digg) sendiri merupakan cara yang baik untuk menampilkan konten yang selalu diperbarui secara otomatis. Namun, bagi pengembang web pemula, pengaturan ini dapat menjadi sesuatu yang membingungkan, yang membutuhkan baik pengetahuan dari Anda dan kemampuan server Anda untuk meng-host file remote. Google Ajax Feed API mampu melakukan semua itu, berdasarkan pada dasarnya memungkinkan webmaster untuk menampilkan RSS feed di situsnya dengan menggunakan beberapa kode JavaScript. Ini host RSS feed yang diinginkan di servernya untuk Anda, cachenya, dan mengembalikan data baik JSON atau format XML bagi Anda untuk memanfaatkan. Semua yang tersisa adalah bagi Anda untuk menggunakan beberapa JavaScript untuk mengurai data ini dan output pada halaman Anda.
Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana memanfaatkan Google Ajax Feed API untuk mengambil RSS feed dan menampilkannya di situs Anda. Berikut adalah beberapa contoh:
Setup 3 menit
Karena Google Ajax Feed API mengurus pekerjaan yang paling melelahkan untuk fetching Anda-dan hosting RSS feed untuk menampilkan yang diinginkan, tugas Anda adalah hanya untuk belajar bagaimana menggunakan JavaScript untuk mengakses dan menampilkan informasi tersebut. Terlepas dari apa yang Anda coba lakukan dengan data yang dihasilkan, proses inti adalah sama. Mari saya jelaskan dalam 3 langkah sederhana:
Langkah 1: Dapatkan sendiri API key (gratis) Google Anda langsung, dengan pergi ke halaman pendaftaran Gogle Api disini, dan memasukkan domain situs Anda. Sebuah kunci yang-super-duper panjang yang dihasilkan yang akan bekerja hanya untuk domain tersebut. Berikut langkah mendapatkan Key Custom Search API :
Langkah 2: Masukkan script berikut di bagian HEAD halaman Anda, yang referensi pertama Google Code API (wajib), kemudian versi 1 (saat ini versi terbaru) dari Ajax Umpan API:
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>
<script type="text/javascript">
google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
</script>
</head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>
<script type="text/javascript">
google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
</script>
</head>
Langkah 3: Sekarang bahwa Anda memiliki akses ke Google Ajax Pakan API pada halaman Anda, semua yang tersisa adalah dengan menggunakan JavaScript untuk memuat diinginkan RSS feed, kemudian mengambil dan menampilkan hasil dengan cara yang diinginkan. Sebagai contoh:
<div id="feeddiv"></div>
<script type="text/javascript">
var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://www.bing.com/search?q=kumpulan tips dan triks&format=rss"
var feedlimit=5
var rssoutput="<b>Berita Terbaru Dari Bing:</b><br /><ul>"
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl) //Google Feed API method
feedpointer.setNumEntries(feedlimit) //Google Feed API method
feedpointer.load(displayfeed) //Google Feed API method
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
rssoutput+="</ul>"
feedcontainer.innerHTML=rssoutput
}
else
alert("Error fetching feeds!")
}
window.onload=function(){
rssfeedsetup()
}
</script>
<script type="text/javascript">
var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://www.bing.com/search?q=kumpulan tips dan triks&format=rss"
var feedlimit=5
var rssoutput="<b>Berita Terbaru Dari Bing:</b><br /><ul>"
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl) //Google Feed API method
feedpointer.setNumEntries(feedlimit) //Google Feed API method
feedpointer.load(displayfeed) //Google Feed API method
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
rssoutput+="</ul>"
feedcontainer.innerHTML=rssoutput
}
else
alert("Error fetching feeds!")
}
window.onload=function(){
rssfeedsetup()
}
</script>
Output:
Class Object | Description |
google.feeds.Feed(url) | Google Feed object class yang menerima RSS feed tunggal berdasarkan "URL" parameter.ontoh:var myfeed=new google.feeds.Feed("http://digg.com/rss/index.xml") |
| Method | Description |
|---|---|
Feed.load(callbackfunction) | Mendownload feed ditentukan selama inisialisasi kelas feed Ajax, dan setelah itu selesai (ada penundaan), memanggil yang diinginkan callbackfunctionreference. Fungsi pemanggilan kembali menggunakan parameter (ie: result) yang berisi isi feed. Secara default, konten dikembalikan dalam format JSON (versus XML).Contoh:var myfeed=new google.feeds.Feed("http://www.bing.com/search?q=kumpulan tips dan triks&format=rss") Untuk referensi Anda, parameter tunggal myfeed.load(formatmsgs) function formatmsgs(result){ var rssContent="" if (!result.error){//if no error fetching RSS feed var thefeeds=result.feed.entries //get feed contents (JSON array) for (var i=0; i<thefeeds.length; i++) rssContent+="<a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a><br />" document.getElementById("adiv").innerHTML=rssContent } else //if error fetching feed, alert human readable error message alert(result.error.message) } result berisi struktur data sebagai berikut:
|
Feed.setNumEntries(int) | Optional. Mengatur jumlah entri untuk mengambil. Secara default, 4 entri yang diambil. |
Feed.setResultFormat(format) | Optional. Mengembalikan hasil ke salah satu format berikut:
 Structure Format JSON :Dalam format JSON, feed itu sendiri dikembalikan sebagai array JavaScript dengan struktur berikut:
callbackfunction, kode di bawah mengakses item pertama dalam RSS feed, di mana result.feed referensi pakan sendiri:var item1=result.feed.entries[0] //access first feed item alert(item1.title) //title of first item alert(item1.content) //body of first item alert(item1.publishedDate) //date of first item XML Format StructureDalam format XML, xmlDocument atribut dikembalikan yang berisi penuh diurai XML Document simpul untuk pakan. Anda dapat mengakses dokumen menggunakan metode DOM standar seperti getElementsByTagName). |
includeHistoricalEntries() | Secara default, ketika feed dimuat, sistem mengembalikan salinan cache dari pakan tertentu yang 100% sinkron dengan isi pakan pada waktu itu cache. Dengan memanggil metode ini, Anda dapat menginstruksikan sistem untuk mengembalikan entri sejarah tambahan yang mungkin dalam cache. |
google.feeds.Feed() documentation.Meletakkan segala sesuatu dalam konteks, contoh berikut menampilkan entri berita tunggal dari Bing:
<script type="text/javascript">
var feedpointer=new google.feeds.Feed("http://rss.slashdot.org/Slashdot/slashdot") //Google Feed API method
feedpointer.setNumEntries(1) //Show 1 entry only
feedpointer.load(formatoutput)
function formatoutput(result){
if (!result.error){
var rssoutput=""
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++){
var entrydate=new Date(thefeeds[i].publishedDate)
var entrydatestr=' '+entrydate.getFullYear()+"/"+(entrydate.getMonth()+1)+"/"+entrydate.getDate()
rssoutput+="<div><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a> " +entrydatestr + "<br />" + thefeeds[i].content + "</div>"
}
document.getElementById("slashdot").innerHTML=rssoutput
}
else //if error fetching feed, alert human readable error message
alert(result.error.message)
}
</script>
Output:
ConversionConversion EmoticonEmoticon