網路上的新鮮事

使用 Google AJAX Feed API 來顯示最新文章,最新回應的方式

想要在 blogger 上顯示最新的文章/回應
可以參考 Fun New Run High 介紹的方式
它的原理其實就是訂閱一個 RSS feed

昨天無意間看到了 Google AJAX Feed API
就想說用這個來產生一個最新文章的列表看看(效果如右)

以下介紹這個區塊的產生方式
首先要使用 Google AJAX API
必須先申請一個 key
還沒有使用過 Google AJAX API 的朋友
可以參考這篇文章去 Google 申請一個 key

接下來到[範本]>[網頁元素] 新增一個 [HTML/JavaScript] 區塊
請把以下程式碼,先貼到筆記本

<script src="http://www.google.com/jsapi?key=剛剛申請的key" type="text/javascript"></script>
<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");
.gfg-root {
border:0px;
}

.gfg-title{
display:none;
}
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: '',
url: '自己的 RSS/ATOM url'
}];
var options = {
stacked : false,
horizontal : false,
numResults: 5
}
new GFdynamicFeedControl(feeds, 'feedControl', options);
}
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<div id="feedControl">Loading...</div>


接下來修改的一些小地方
讓它可以正常運作
<script src="http://www.google.com/jsapi?key=剛剛申請的key" type="text/javascript"></script>
請在http://www.google.com/jsapi?key=後面接上剛剛在 Google 所申請的key

      var feeds = [
{title: '',
url: '自己的 RSS/ATOM url'
}];
請在 url 指定自己新文章/回應 的 RSS/ATOM feed 的 url

再把修改後的程式碼
從筆記本貼到[HTML/JavaScript] 區塊中
儲存後就可以看到自己的最新文章/回應
AJAX的方式呈現囉~~~

0 Comments: