直接用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下載後上傳到你網站,然後再用一句語法就可以把相簿功能掛到你網站了,基本上很簡單的,而且也很省網站資源。

s/pwa/pwa/" target="_blank">按這裡

第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的計算,使用上很方便!

 

 

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>