使用Picasa Web Albums Data API製作Blog相簿

詳細解說請參考林木木寫的利用PicasaWeb API製作相冊展示頁面。Google Picasa網路相簿優點是圖檔開放外連,相簿可以設定瀏覽權限,API應用非常有彈性。缺點是免費儲存空間只有1GB(不過圖檔最大邊800 pixels以下,不計算儲存容量),不能上傳解析度太高的圖檔(我試過無法上傳1920x1200的圖檔,依Picasa Web Albums Data API給的參數來看,圖檔最大邊應該是限制在1600 pixels)。因為Bo-Blog缺少內建相簿,簡單好用的外掛相簿一直找不到,剛好看見作者寫好和示範的程式碼,拿來當作Blog或其他網頁相簿都非常適合,主要特色就是簡單、乾淨。

下載檔案程式碼,開啟picasa.js修改你的帳號名稱(或是別名)再存檔,將所有檔案都上傳到網頁空間,開啟index.html就有簡單的網路相簿。後台控制請自行登入Google Picasa網路相簿,唯一要注意的是,如果上傳大量檔案使用一般Web上傳,失敗機率非常高,且容易搞混哪些檔案有無傳過。建議使用IE安裝ActiveX拖曳上傳功能,即使某幾張照片上傳失敗(出現遭伺服器拒絕的訊息),系統也會重複詢問是否要重傳,直到上傳成功為止。我個人是要套用到Bo-Blog,刪除CSS的第2至4行︰會影響Blog本身的CSS佈局,務必要刪除。

1
2
3
*{margin:0; padding:0;}img{border:0 none;}.clear{clear:both;}
a,a visited{color:#666;text-decoration:none;}a:hover{color:#000;}
body{font:13px 'Comic Sans MS','Microsoft YaHei',Arial,Tahoma,Sans-Serif;color:#555;width:680px;margin:2em auto 3em;background:#f2f2f2;}

到Bo-Blog後台建立新的頁面,加入以下程式碼︰
1
2
3
4
5
6
<div id="navi"><a href="1" style="display:none;"></a></div>
<div id="items"></div>
<link rel="stylesheet" type="text/css" href="picasa.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="slimbox2.js"></script>
<script type="text/javascript" src="picasa.js"></script>

儲存後,相簿即套用完成,整體皆使用jQuery的AJAX和Slimbox2,其他細節請修改picasa.css。實際展示效果請見本站上方相簿連結。你也可以試著套用到其它的Blog系統,例如WordPress。