原本我的網頁聯播是用 Google Reader 的工具作的。不過最近說它快要關閉啦，所以只好趕快來找其他替代功能。雖然蠻多人建議用 Feedly 來取代 Google Reader 的。不過轉過去之後東看西看好像沒看到類似的小工具。
上網搜尋一圈，發現解決辦法或許還是要靠 google。這邊我使用 Google API 來進行製作。在 feed 項目下有很多東西可選，網路上我查到的大部分人都是使用 dynamic feed control。不過老實說這個功能對我來說有點太過花俏，每個聯播項目抓幾篇來輪的抓法也有點多。相較之下我還是比較喜歡以前 Google Reader 工具把所有來源的文章全部混在一起再依時間排列的作法。
由於 Google API 的沙盒（其實是遊戲場）可以讓使用者自己寫 javascript 所以其實是有可能直接這邊改出像從前 Google Reader 那樣的功能。不過我 javascript 能力……基本上應該比牙牙學語還不如吧？（汗）而且說實話其實希望網頁本身（或讀取時的外部抓取檔案）能越小越好，所以這邊用了比較迂迴的辦法，合併 Yahoo Pipe 和 Feedburner 的服務來作。（反正這兩個我也原本都有在使用。）
這邊先簡單說明整個流程，就是把原本要聯播的部落格 RSS 全部整理出來，然後去 Yahoo Pipe 把它們 pooling 在一起，按時間排序，然後轉成一個新的 RSS。但是不知道為何 Yahoo Pipe 的 RSS 寫法不論是 Google Chrome 或 Google API Feed 都不認得，所以再把這個 RSS 用 Feedburner 燒成另一個比較標準（？）的 RSS，然後餵給 Google API 吃，產生出想要的部落格小外掛。
這邊先講 Yahoo Pipe。雖然是英文版，但只要用原本的台灣 Yahoo 帳號登入即可。登入之後選擇「Create Pipe」或「Create a pipe」，就會看到類似工作板的頁面。先從左側欄最上找到 Sources 的部份，用滑鼠拉一個「Fetch Feed」出來，把 RSS 網址填入。一行填一個，用上面 URL 字樣旁邊的加號按鈕來增加欄位。一個只能放十個網址，不過超過也沒有關係，可以拉出更多的 Fetch Feed 功能框。
如果使用了超過一個 Fetch Feed，可以在 Operators 的地方找到「Union」功能。用滑鼠點選「Fetch Feed」功能框下方的圓點，就可以拉出「水管」把結果接到其他功能框上方圓點。網址全部匯集在一起之後，再用排序功能（Operators → Sort）按照時間排序（左欄下拉選發表時間，右欄 Descending 表示最新在上）。
Pipe 的操作還有很多像是篩選之類的可以玩（之前我作過只篩選龍蛋相關文章和只篩選 OUaT 相關文章的 Pipe），不過這邊不會用到，處理好的東西最後接到一開始就存在工作板的結果框框，然後點選右上角的儲存。
回到 Pipe 首頁點選 my pipes，就可以看到剛剛調好的綜合飲料（？）。點進去，找到 Get as RSS，複製該網址，送去 Feedburner 燒好備用即可。
接著來到 Google API。我是使用 Load Feed 這個項目來製作網頁小工具的。操作上先在上欄左邊選取原始碼項目，右邊修改，下欄點選 Run Code 可以預覽結果。一旦修改到滿意，可以從右欄 edit HTML 或下拉選單匯出或儲存。就可以複製抓取對應的 HTML 網頁回去修改。另外右欄也有文件按鈕，會新開視窗顯示該段 code 的相關使用說明。
以我用的 Load Feed 為例，javascript 中要修改的幾個地方如下：
// Grab the container we will put the results into
var container = document.getElementById(“content”);
container.innerHTML = ‘ ‘;
第一行的註解告訴我們這是要抓取網頁上裝結果的位置（暫時稱為 container）。第二行顯示會抓取網頁上 id 設為 content 的元素或區塊，如果最後要放置聯播的區塊不叫這個名字可以把那個「content」改掉。不過因為 Google API 預設的 demo 網頁用的是 content 區塊，所以建議先暫時保留，等要裝到自己網頁上時再修改。
第三行把該區塊清空。（比如原本填了一個「Loading…」，就會在程式碼尚未執行時顯示出來，執行完後清掉。）如果除了抓取到的結果之外，還想額外顯示像是標題，就可以寫在這一行的兩個單引號之內，比如填入「<div>友站聯播</div>」之類。
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement(“div”);
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
這一段用迴圈生成抓到的內容。第一行可以看見迴圈的次數也就是產生的筆數為「result.feed.entries.length」，預設是 4 筆。但如果希望更多或更少不是在這邊修改，要到後面的 function OnLoad 段落。第二行不要去動。第三行產生一個 div 網頁元素稱為變數 div（var div），等等用來放內容。如果高興（或有排版需求）的話，也可以把兩個雙括號間的 div 換成 p 或 li 之類的元素，至於變數 div 要不要換叫別的名字就隨喜好了，注意的是後面兩行再出現的兩個 div 指的是變數 div，所以要跟著 var 後面的名字而不是雙括號內的名字。
第四行是要放在該網頁元素內的文字，預設是只有文章標題，但是我們當然希望他能有連結。可以把它改成「div.innerHTML = ;」。等號後面分號前面填入內容，固定的文字請用引號（單或雙均可）夾起來，「+」作為連結，而文章標題是「entry.title」，文章超連結是「entry.link」。像是「'<a href=\”‘+entry.link+’\”>’+entry.title+'<\a>’」的寫法可以產生很簡單的含文章連結的標題。（反斜線是用來讓電腦判斷特定符號（像是引號）是當文字還是當引號用的。）
第五行表示把剛剛做出來這個元素附加到前面 container 的尾巴上。
function OnLoad() {
// Create a feed instance that will grab Digg’s feed.
var feed = new google.feeds.Feed(“http://www.digg.com/rss/index.xml”);
第一行顯示這個功能叫做 OnLoad。應該是不用去改，不過如果原本網站上就有使用 javascript，而且其中也有叫做 OnLoad 的功能的話，保險起見也許可以改掉，只要之後呼叫的地方跟著改就行。
第二行是註解，表示這邊 demo 的是抓 Digg 的 feed。
第三行抓取 feed，請把雙括號內那個 Digg 的 feed 改成前面自己作的新 feed 吧。然後，如果覺得要抓取的條目數量不想是 4，而希望更多或更少的話，請在這後面加一行「feed.setNumEntries(數字);」。數字的地方用半形阿拉伯數字填進想要的數量即可。
Run Code 測試一下結果如何。OK 的話就點 edit HTML，右欄的內容會變成完整的 HTML 檔案，全選複製存成 .html 或 .htm 就可以使用。我們要擷取這檔案裡的東西來放進自己網頁。至於為什麼不一開始就用 edit HTML 的模式修改，是因為我中間有一段這樣作，發現有時候修改內容不會同步到 Run Code 結果去。（抖）
首先注意檔頭的這一行：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
我不知道大家原本的文件類型宣告是什麼，不過我原本用的不是這一個，結果 code 移植過去就跑不動了。所以請視情況看是否需要更動文件宣告。
接下來把 head 裡面的兩段 javascript 放到自己網頁的 head 裡面。注意接近尾巴的地方有一行「google.setOnLoadCallback(OnLoad);」，如果前面改了 function OnLoad 的名字要把這邊括號裡的 OnLoad 作同樣的修改。把 body 裡面想放結果內容的元素 id 設成 content（或之前改過指明 container 要抓取的那個 id），應該就可以正常顯示。
如果覺得不想在每一頁的 head 都放那麼多東西，也可以把兩個 function 放在另外的 .js 檔裡，head 裡面只放：
<script src=”http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0″ type=”text/javascript”></script>
<script src=”自己另存的 js 檔路徑” type=”text/javascript”></script>
<script type=”text/javascript”>
google.load(“feeds”, “1”);
google.setOnLoadCallback(OnLoad);
</script>
當然 OnLoad 如果有改也要跟著改。那麼接下來如何使用 CSS 來排這些結果就看網頁本身 CSS 怎麼寫啦。