“Dynamic Feed” Dari Google Feed API
Sebelum ni aku ada try buat blogroll widget dengan menggunakan Google AJAX API, dan nampaknya ia sesuatu yang menarik. Tiggal lagi aku tak dapat nak susun setiap feed dari Google tu mengikut tarikh kemaskini terkini setiap blogger. Google ada menyediakan satu lagi kemudahan dalam Google Code nya yang bertujuan untuk embed pada website dan memaparkan feed terkini yang dipanggil “Dynamic Feed
Terdapat tiga design paparan yang boleh digunakan dan dicustomize iaitu:
- Vertical
- Vertical Stack
- Horizontal
Ketiga-tiga design ini ada disediakan wizard yang dipanggil Dynamic Feed Wizard, dimana kalian boleh pilih paparan yang mana satu dan Google akan tuliskan code untuk digunakan. Apa yang perlu dilakukan cuma ubah balik RSS url kepada feed yang kalian inginkan.
Selain dari wizard yang disediakan ini, halaman Dynamic Feed Control Programming Guide
ada menyediakan secara detail bagaimana untuk menggunakan Dynamic Feed ini beserta dengan beberapa control yang boleh digunakan. Control yang ada ini juga boleh ditambah pada code yang dijana dari wizard.
Live demo adalah seperti dekat sidebar sebelah. Aku gunakan paparan Vertical Stack.
Code yang aku gunakan adalah seperti di bawah. Kalian boleh tukar balik CSS untuk dapatkan design paparan yang bersesuian. Cara untuk letak dekat sidebar adalah dengan menggunakan arahan include, (<$php include ('namafile.php');?>) kat mana mana bahagian sidebar kalian.
Untuk dapatkan paparan dari link pada enjin Wordpress, kalian perlu masukkan MySql query seperti yang aku boldkan dibawah.
<!– ++Begin Dynamic Feed Wizard Generated Code++ –>
<!–
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
–><!–
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
–><!– Google Ajax Api
–>
<script src=”http://www.google.com/jsapi?key=notsupplied-wizard”
type=”text/javascript”></script><!– Dynamic Feed Control and Stylesheet –>
<script src=”http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js”
type=”text/javascript”></script>
<!—->
<style type=”text/css”>
@import url(”http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css”);#feedGadget {
width : 100%;
font-size: 9px;
color:#333333;
border:none;
}
#feedGadget .gfg-root {
font-size : 10px;
border : none;
}
#feedGadget .gfg-root .gfg-entry .gf-result {
padding-left : 10px;
}#feedGadget .gfg-entry {
background-color : white;
width : 100%;
height : 12em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
border-bottom: 2px solid #eeeeee;
border-top: 0;
}#feedGadget .gfg-title {
font-size : 14px;
/*background-color:#FFFFFF;*/
background: #eeeeee;
border: 1px solid #eeeeee;
border-bottom: 0;}
#feedGadget .gfg-title a {}
#feedGadget .gfg-subtitle {
font-size : 14px;
background-color : #ffffff;
text-align : left;
margin-left : 5px;
margin-top:8px;}
#feedGadget .gfg-subtitle a {
/*color : #203311;*/
}
#feedGadget .gf-title {
font-size : 12px;
}
#feedGadget .gf-title a{}
#feedGadget .gfg-root #feedGadget.gfg-listentry {
padding-left : 5px;
margin-right : 5px;
}
#feedGadget.gfg-root #feedGadget.gfg-listentry a {
/*color : #4E8029;*/
}
#feedGadget .gfg-root .gfg-listentry a:hover {
/*color : #203311;*/
}
#feedGadget .gfg-root #feedGadget.gfg-listentry-odd {
background-color : #ffffff;
}#feedGadget .gfg-root {
/*border-left: 2px solid #203311;*/
padding-left : 3px;}
#feedGadget.gfg-listentry-highlight {
/*border-left: 2px solid #203311;*/
padding-left : 3px;
background-color : #eeeeee;
}#feedGadget.gf-result #feedGadget.gf-title {
border-bottom : 1px solid #eeeeee;;
border-top:1px solid #eeeeee;
}#feedGadget .gf-result {
font-size:11px;
padding:0;
}</style>
<div id=”feedGadget”>
Loading…
</div><script type=”text/javascript”>
function LoadDynamicFeedControl() {
var feeds = [
<?php
$linkroll = $wpdb->get_results("SELECT link_name,link_rss FROM $wpdb->links ORDER BY RAND() LIMIT 0,20");
foreach ($linkroll as $linkroll) {
?>{title: '<?php echo $linkroll->link_name;?>',
url: '<?php echo $linkroll->link_rss;?>'
},<?php } ?>
];
var options = {
stacked : true,
horizontal : false,
numResults : 3,
linkTarget : google.feeds.LINK_TARGET_BLANK,
//title : “Bloggers Update”
}new GFdynamicFeedControl(feeds, ‘feedGadget’, options);
}
// Load the feeds API and set the onload callback.
google.load(’feeds’, ‘1′);
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!– ++End Dynamic Feed Control Wizard Generated Code++
>>>
Happy coding.
Artikel Yang Berkaitan
» Perkongsian Link Untuk Blogroll
» Google AJAX Feed API Untuk Blogroll
» Firefox Add-ons : Feedly
» My New Website
» Third Day
» RSS feed ke HTML
» Aku dan iGoogle ku
» Sejarah Feed
code.google.com neh sama kes macam pipes.yahoo.com eh? ku tak try lagi. nmpk cam menarik
4 August 2008 : 8:11 am
wah! edban ni!
4 August 2008 : 9:49 am
@ad3ck
aku pernah jugak tengok tengok Yahoo Pipe, aku rasa dorang nyer objektif sama laa bro dgn Google Code.
@roshaizul
Huhu.. edban sikit sikit jer.
Boleh eek.
4 August 2008 : 9:56 am
entry yg menarik beb..
4 August 2008 : 5:02 pm
menarik ni. tapi tak berkesempatan lagi nak explore.tgh pening ngan system kat tempat keje nie.nnt biler dah percuma (free) bleh la explore.
5 August 2008 : 12:36 pm
Aaaaaaaaaaaa………….. mende nih……….. arrrr… (dengan air liur berbuih… mcm Sha**ry Ch*ek)
7 August 2008 : 12:04 pm