星期日, 11月 12, 2006

用 webSnarp 在網頁上顯示小預覽圖

webSnarp 2.0 是個提供網頁預覽圖服務的網站,詳情請上該網站去了解... 底下有提供一些小玩具,可以在網頁上加上一些特殊功能,讓滑鼠經過連結的時候跳出該連結的預覽圖。

但是我試圖將它套用在 Blogger 上的時候,若是想在以前的文章上也套用該功能,就必須去修改之前的所有文章。想當然我沒那麼勤勞,所以就把其中 Link Preview V2 提供的 JavaScript 改了一下,放在這裡,有需要的人可以去下載來用。

不過有一點需要注意,因為是寫來套用在 Blogger Beta 上的舊文章的,所以我讓他掃描所有的網址,並依照一定的規則排除要跳出預覽圖的網址。詳情請見 websnapr.js 內的「excludeDomains」與「excludeExtensions」兩個變數。

這是適合 Blogger beta 的版本,請不要套用在其他地方。安裝的步驟如下:

  1. 這裡 下載 websnapr.tar.bz2
  2. 修改「websnarp.js」中的「myBaseURI」變數至您的網頁空間
  3. 將所有檔案放到自己網頁空間下,記得要放在同一個資料夾裡!
  4. 去 Blogger 範本中修改 html 的地方,找到 <title> 標籤,在底下插入: <style media='screen' type='text/css'>@import "[您的網頁空間]/websnapr.css";</style>
    <script src='[您的網頁空間]/websnapr.js' type='text/javascript'/>
最後,顯示出來的效果就像這樣

4 則留言:

Unknown 提到...

Hi Palatis:
nice blogger hack, 我可以把這篇轉到我的Blog裡嗎??
順便一提,因為我一開始弄了很久一直都裝不起來,很怪...後來發現你重包裝的websnapr.js這個檔中,有個小bug,也就是裡頭的"loading.jpg"這個keyword,應該是"loading.gif"才對說,只是我搞不太懂,為啥你這樣子,還是會正常顯示耶,真是太神奇了....
btw, I am your blogger reader..^^

Unknown 提到...

我也搞不懂為什麼可以正常解釋...

but anyway, 那個怪 bug 我改過來了, 去看 log 發現他的確有跟伺服器要 loading.jpg, 可是還是會回去找 loading.gif.

另外, 我的 blog 內的文章都是 CC BY-NC-SA 授權, 符合規定就可以任意引用, 不用知會作者.

Unknown 提到...

哈,對呀..真是神奇的阿帕契 XD
再次感謝你的文章,那我要「連到你囉」

dsewnr 提到...

這個東西真酷,感恩 : )