Blogger : DATA API 擷取 JSON feeds

Google 的服務有一個特點，它有完整的 DATA API ，讓我們可以輕鬆的用喜好的工具開發各式各樣的應用，因此，我們可以讓 Blogger 以 JavaScript 來擷取 Blogger 、Calendar ...... 上的資料，讓它呈現更多樣的風貌。以我用 Blogger 建置的班級網站來說，在首頁顯示「聯絡事項」、「最近行事」...... 就是用這種技巧。

JSON feeds

以這個 blog 來說，底下的網址可以擷取 blog 的文章，並以 JavaScript 可運用的 JSON 格式回傳給程式：

• http://gsyan888.blogspot.com/feeds/posts/default/?alt=json-in-script&max-results=3&callback=myFunc

稍微分析一下這個網址 (JSON feeds) 中的參數：

• alt=json-in-script ：傳回 JavaScript 可用的 JSON 格式。
  如果是給 PHP 用的，就改為 alt=json ，並以 file_get_contents 來讀取網址的內容，再用 json_decode 來解析、建立新的物件。
• max-results=3 ：最多只傳回 3 筆
• callback=myFunc ：我們只要寫一個名為 myFunc 的函數，參數就以可接收 google 傳回來的 JSON 格式物件。例如：function myFunc(root) ，這裡的 root 就可以接收 google 傳回來的資料。如果沒有設定這個，預設是 gdata.io.handleScriptLoaded。 

如果是要擷取 Blogger 某一個「標籤」中的文章，以我的「Biking」為例：

• http://gsyan888.blogspot.com/feeds/posts/default/-/Biking?alt=json-in-script&max-results=3&callback=myFunc

也就是在「default/」和問號「?」之間再加入「標籤」的名稱即可。


以 JavaScript 來擷取資料

下面寫個簡單的範例擷取三筆文章並顯示標題：

<div id="show_data">載入資料</div>

<script type="text/javascript">
   //=====1==== JSON feed
   var feedUrl = 'http://gsyan888.blogspot.com/feeds/posts/default/-/Biking?alt=json-in-script&max-results=3&callback=myFunc';
 
   //=====2==== 讀入 JSON 物件並處理資料
   function myFunc(root) {
      var html = [''];
      var entries = root.feed.entry;
      for(var i=0; i<entries.length; i++) {
         html.push(entries[i].title.$t);   //擷取文章標題
         html.push('<'+'br />');
      }
      document.getElementById("show_data").innerHTML = html.join('');
   }
 
   //=====3==== 產生匯入外部 Javascript 檔案的語法
   function IncludeJavaScript(jsFile)  {
      document.write('<'+'script type="text/javascript" src="'+ jsFile + '"><'+'/script>');
   }
   //=====4==== 進行匯入 DATA API
   IncludeJavaScript(feedUrl);
</script>

程式簡單的說明如下：

• 區塊 1 的部份：設定要讀取的 JSON feed，本例預備擷取 「gsyan888.blogspot.com」 中「Biking」標籤裡的文章「3 篇」，內容會以 JSON 物件的方式回傳給名為「myFunc」的函數當參數。
• 區塊 2 的部份：建立一個名為「myFunc」的自訂函數，其中的參數「root」會接收傳自主機的 JSON 物件。
  以 Blogger 來說，最上層有個「feed」，其中的「entry」內有擷取回來的文章，所以 root.feed.entry 就是代表所有文章。接著可以用底下的語法擷取文章的相關資訊(以第一篇文章為例)：
  「標題」：root.feed.entry[0].title.$t
  「日期」：root.feed.entry[0].published.$t
  「內容」：root.feed.entry[0].content.$t
  「網址」：root.feed.entry[0].link[4].href
  ...... 其它的就自己觀察看看，或是查 Blogger 的說明。
  有了這些資料，我們就可以依需要以程式自己組合成要呈現的資訊。
• 區塊 3 的部份：建立名為「IncludeJavaScript」的自訂函數，讓我們可以動態載入外部的 JavaScript，參數就是要載入的程式路徑。
• 區塊 4 的部份：開始載入 feedUrl 所指定的 JSON feed ，並誘發 myFun 中所指定的任務，顯示我們想要呈現的資訊。   

以 PHP 來擷取資料

如果是在 PHP 裡，則用不到 callback (myFunc)，純粹把主機回傳的資料當一般串流來讀取後再處理：

<?php
$feedUrl =  'http://gsyan888.blogspot.com/feeds/posts/default/-/Biking?alt=json&max-results=3';
if( $json = file_get_contents($feedUrl) ) {
   if( $root = json_decode($json) ) {
      $entries = $root->feed->entry;
      foreach($entries as $entry) {
         echo $entry->title->{'$t'};
         echo '<br />';
      }
   }
}
?>

上面要注意的地方是 $feedUrl 中的資料回傳格式我們改為純 JSON (alt=json)，而不是 json-in-script，不然，json_decode 會無法解析。


擷取 Google Calendar 的資料

如果是要擷取 Calendar 中的行事曆呢？

• http://www.google.com/calendar/feeds/happy2011.lsps@gmail.com/public/full?orderby=starttime&sortorder=ascending&alt=json-in-script&start-min=2012-06-01&start-max=2012-06-30&callback=myFunc

解析一下參數：

• happy2011.lsps@gmail.com ：是帳號。
• orderby=starttime ：排序是依行事的開始時間當關鍵。
• sortorder=ascending ：排序由小到大。
• alt=json-in-script ：傳回 JavaScript 可用的 JSON 格式。
• start-min=2012-06-01 ：擷取由 2012-06-01 開始的行事曆。
• start-max=2012-06-30 ：擷取至 2012-06-30 為止的行事曆。
• callback=myFunc ：寫個名為 myFunc 的函數，參數是 JSON 物件。

回傳的 JSON 常用的資料如下(以第一筆為例)：

• 「行事標題」：feed.entry[0].title.$t
• 「行事內容」：feed.entry[0].content.$t
• 「開始時間」：feed.entry[0]['gd$when'][0].startTime
• 「結束時間」：feed.entry[0]['gd$when'][0].endTime