Aku sakit hati dengan blogroll aku yang lama sebab ia lambat sangat loading. Walau letak kat frame sekalipun, ia tetap slow untuk load. Jadi, aku telah ubah script untuk blogroll aku supaya ia jadi lebih laju dan tak lagi menggunakan frame. Setelah jenuh cari source akhirnya aku telah bersetuju dengan diri aku untuk menggunakan Google AJAX Feed API sebagai sumber untuk paparkan feed dari RSS pada blogroll.
Aku cuba untuk terangkan secara mudah bagaimana untuk membangunkan aplikasi ini dengan Wordpress.
1. Dalam Wordpress terdapat Link Manager untuk kita manage link dan paparkan sebagai blogroll. (Dashboard ->Manage_>Manage Link). Pada Advance terdapat satu column untuk masukkan RSS Address. Untuk setiap link pastikan RSS Feed url dari setiap blog atau link dimasukkan disini.
2. Untuk menggunakan Google AJAX Feed API anda perlu dapatkan Google API key bagi url website anda. Klik link untuk signup Google API key.
3. Anda boleh melihat dokumen berkenaan Google AJAX Feed API pada link ini. Terdapat beberapa contoh script untuk penggunaannya. Untuk tutorial ini aku menggunakan FeedControl class yang mampu untuk memaparkan beberapa item pada feed. Code asal adalah seperti dibawah.
<html>
<head>
<script type="text/javascript"
src="http://www.google.com/jsapi?key="YOUR-KEY">
</script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feedControl">Loading</div>
</body>
</html>
Dan code ini akan buat paparan berikut (Partially paste jer kat sini ni) :
DiggAsk the political scientists and you will be told that there is damning, hard evidence pointing incontrovertibly to the …15 minutes agoFox News Channel posts a job listing looking for a “freelance fact writer.”25 minutes ago
3. Ok, bila lihat kat sini, dia akan paparkan beberapa feed title terkini dari Digg.com. Untuk blogroll, kita biasanya cuma perlukan satu feed terkini dari blog kawan kawan kita. Untuk tentukan jumlah feed yang kita nak, kena tambah tag ini.
feedControl.setNumEntries(1);
dimana value untuk setNumEntries tu adalah bilangan item dari setiap feed. Kita perlu letakkan tag ini sebelum feedControl.draw yang akan menjadikannya seperti berikut:
function initialize() {
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://www.digg.com/rss/index.xml", "Digg");
feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
feedControl.setNumEntries(1);
feedControl.draw(document.getElementById("feedControl"));
}
Jadi sekarang kita dah dapat satu tajuk entri terkini untuk setiap feed.
4. Sekarang masa untuk kita panggil RSS Url dari table wp_links pada Wordpress database kita dan gantikan url Digg.com tu dengan senarai RSS link kita sendiri, manakal “Digg” tu pulak dengan nama yang kita beri pada Link kita.
i. Connection. Wordpress dah buat connection dia sendiri, jadi tak payah nak buat connection lagi.
ii. Sql Query dia macam ni.
$blogroll = $wpdb->get_results("SELECT link_name,link_rss FROM $wpdb->links
ORDER BY RAND() LIMIT 0,15");
Query ini akan panggil item pada field link_name iaitu nama blog yang kita nak link kan dengan field link_rss iaitu RSS Feed link. Supaya ia tak statik bila dipaparkan, kita buat ORDER BY random dan LIMIT akan tentukan hanya 15 link yang akan dipaparkan.
5. Bila dah buat query pada MySql, sekarang kita nak masukkan data tersebut pada API script yang diberi oleh pakcik Google. Kita gantikan url Digg.com dan nama Digg tersebut dengan data kita.
feedControl.addFeed("<?php echo $blogroll->link_rss;?>",
"<?php echo $blogroll->link_name;?>");
*Dalam contoh yang diberi oleh Google ada dua feed yang ditunjukkan (Digg.com dan TechCrunch), kita cuma perlu satu line jer code yang ini.
6. Anda sepatutnya dah dapat paparan item untuk RSS Feed anda, tapi cuma satu blog saja yang dipaparkan sebab kita masih belum buat loop untuk memaparkan 15 RSS Feed dari database kita.
Ini code untuk loop sehingga 15 feed.
foreach ($blogrollas$blogroll) { feedControl.addFeed("<?php echo$blogroll->link_rss;?>", "<?php echo$blogroll->link_name;?>"); }
7. Dah selesai coding.
8. Style it up dengan CSS style. Tak larat nak cover CSS. Anda boleh dapatkan CSS class untuk feedControl Style Sheet atau tengok CSS class nya.
9. Full Script yang aku pakai
<?php $blogroll = $wpdb->get_results("SELECT link_name,link_rss FROM $wpdb->links ORDER BY RAND() LIMIT 0,15"); ?> <script type="text/javascript" src="http://www.google.com/jsapi?key=GOOGLE API KEY ANDA"> </script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feedControl = new google.feeds.FeedControl(); <?php foreach ($blogroll as $blogroll) { ?> feedControl.addFeed("<?php echo $blogroll->link_rss;?>", "<?php echo $blogroll->link_name;?>"); <?php } ?> feedControl.setNumEntries(1); feedControl.draw(document.getElementById("feedControl")); } google.setOnLoadCallback(initialize); </script> <div id="feedControl">Loading</div>
Happy coding!
*Note : Buat satu database connection baru pada Wordpress akan memperlahankan loading blog anda. Ini kerana Wordpress dah ada connectionnya sendiri ($wpdb), adalah lebih baik untuk gunakan connection yang dah dibuat oleh Wordpress instead of create new connection.
July 4th, 2008 at 1:09 am
terima kasih, share maklumat kat sini
July 5th, 2008 at 11:40 am
aku tertanya bagaimana kau boleh sehebat begini dalam bab coding. aku baru je tukar ke wordpress. mmg biol otak aku dok adjust coding ni. alahai…
July 5th, 2008 at 2:28 pm
ku pong baru nak berjinak-jinak dgn ajax neh. byk manfaatnye eheheh
July 5th, 2008 at 8:07 pm
@kamato
Sama sama
@syam
Pelan pelan beb. Aku pun bukan terer sangat. Tengok code yang orang dah buat, study pastu try buat sendiri. Makin banyak yg kita belajar, makin banyak benda yang kita tak tau.
@ad3ck
Aku rasa AJAX sama DOM ni boleh menghasilkan aplikasi yang nampak high tech la bro.
July 6th, 2008 at 8:44 pm
Cantik, aku bookmark entri ni!
Tenkiu Mazudi.
July 6th, 2008 at 9:08 pm
@Bat Sama sama. Aku cadangkan kau bangunkan satu plugin untuk blogroll pakai mender alah ni.