直接用Picasa Web API 把Picasa相簿嵌入網站

發表時間：

架設WordPress的使用者最感到麻煩的應該是相簿功能，因為一般BSP部落格都有提供蠻方便的相簿，但只要跳巢到WordPress的使用者對於相簿這部分似乎都很頭大，有時候想要整合的跟網站一模一樣，想說裝個外掛來讓網站有相簿功能，但往往使用體驗卻不是太好，那你是否曾經想過用外部服務，把相簿嵌入接嵌入到WordPress中呢？比方說用Picasa。

如果你問香腸WordPress怎麼擁有相簿功能？通常我的回答是：使用外部服務嵌入，例如使用Picasa或是flickr，或者是安裝NextGEN Gallery相簿外掛，這外掛應該是使用大家公認功能算很棒，有中文介面的相簿外掛，但這種外掛缺點就是會讓網站資源吃重。因此通常我會再推薦KPicasa或是altPWA。

雖然KPicasa或是altPWA這兩套是可以幫你把Picasa相簿掛到WordPress，使用上非常的簡單，但事實上因為若使用過的話，會發現網站裝了這外掛似乎變慢了？因為他的JS載入的關係，造成每一頁都會載入相簿外掛的JS，若單單只是要相簿那頁可以抓到Picasa相簿的話，何必全站都載入該JS呢？或許是外掛為了更彈性可以在全站使用，因此才這樣寫，不過並非每一位使用者都需要。

因此，若只是個人網站，單純只有一個分頁要做成相簿功能的話，再加上你會小修改CSS的話，那我會建議你使用PWA(Picasa Web API)這個來達成效果。別看到API這關鍵字就告訴你要看一堆原文使用說明，別擔心！你只要把JS下載後上傳到你網站，然後再用一句語法就可以把相簿功能掛到你網站了，基本上很簡單的，而且也很省網站資源。

第1步  先到SF網站上下載要使用的JS，請下載「pwa.js」，當然你想嘗試另一個也可以。

直接用Picasa Web API 把Picasa相簿嵌入網站

第2步  下載後請上傳到網站根目錄，若是WordPress，請開啟後台新增一個名為相簿的分頁，並切換到「HTML」模式，將以下語法貼上去並點擊﹝發表﹞。

  • username：Picsaa帳號名稱
  • photosize：單張時的圖片尺寸(依照你網站內文寬度)
  • src：輸入你剛上傳的JS位置(絕對路徑)
<script type='text/javascript'>
    username = 'Picasa帳號名稱'; photosize='800';
</script>
<script type='text/javascript' src='http://網站網址./pwa.js'></script>

直接用Picasa Web API 把Picasa相簿嵌入網站

第3步  很快的，你就會看到相簿成功囉！

直接用Picasa Web API 把Picasa相簿嵌入網站

第4步  因為香腸設定600，所以圖片剛剛好在內文區內。另外你在瀏覽單張圖片時會發現上方怎麼破圖了？這時可準備三張圖片，放到跟剛剛的JS同一目錄，這三張圖名稱與用途分別是「上一張(back.jpg)」、「相簿目錄(home.jpg)」、「下一張(next.jpg)」。

直接用Picasa Web API 把Picasa相簿嵌入網站

或許大家覺得透過PWA做出的Picasa相簿版面有點醜，你可以修改pwa.js或是透過CSS修正，讓版面更完善，這部分就是考驗大家的CSS了。這樣的做法主要是透過Javascript（JSON API）來達成效果的，只要跑一隻JS，就可以輕鬆把Picasa相簿搬到網站上。

如果你還在想哪flickr呢？目前香腸是沒有看到有比較好的flickr外掛或API，以前香腸很愛用flickr，但現在圖片就丟圖床了，對於flickr的需求降低。雖說有方法可破除200張限制，但說真的實際用上頗麻煩。至於Picasa，現在只要你的Google帳號有開通Google Plus，那麼你的Picasa相簿中，2048×2048以下的照片不列入1GB的計算，使用上很方便！