巧用Picasa Web API将相册嵌入网站
架设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下载后上传到你网站,然后再用一句语法就可以把相簿功能挂到你网站了,基本上很简单的,而且也很省网站资源。
程序名称:JavaScript interface to PicasaWeb Albums官方网站:http://sourceforge.net/projects/pwa/程序下载:按这里
第1步 先到SF网站上下载要使用的JS,请下载「pwa.js」,当然你想尝试另一个也可以。
第2步 下载后请上传到网站根目录,若是WordPress,请开启后台新增一个名为相簿的分页,并切换到「HTML」模式,将以下语法贴上去并点击z发表{。
username:Picsaa账号名称photosize:单张时的图片尺寸(依照你网站内文宽度)src:输入你刚上传的JS位置(绝对路径
<script type='text/javascript'> username = 'Picasa账号名称'; photosize='800';script> <script type='text/javascript' src='http://images.51cto.com/files/uploadimg/20110923/1056490.png" type="#_x0000_t75" o:spid="_x0000_i1027">
第3步很快的,你就会看到相簿成功
第4步 因为香肠设定600,所以图片刚刚好在内文区内。另外你在浏览单张图片时会发现上方怎么破图了?这时可准备三张图片,放到跟刚刚的JS同一目录,这三张图名称与用途分别是「上一张(back.jpg)」、「相簿目录(home.jpg)」、「下一张(next.jpg)」。
或许大家觉得透过PWA做出的Picasa相簿版面有点丑,你可以修改pwa.js或是透过CSS修正,让版面更完善,这部分就是考验大家的CSS了。这样的做法主要是透过Javascript(JSON API)来达成效果的,只要跑一只JS,就可以轻松把Picasa相簿搬到网站上。