十一月 07 2006
連結預覽
在 Jas9 那看到不用安裝 Firefox Add-on ，而由網站管理者自行加入顯示連結預覽的方法。
透過 WebSnapr 網站提供的網站縮圖服務，搭配適當的 Javascript，便可以輕易達到顯示連結預覽的效果。與 Jas9 不同的是，我採用的是另外一個由 Brian McAllister 所寫的版本，以解決預覽泡泡出現在視窗外的問題。
- 首先先下載 websnapr.zip，並將之解壓縮。
- 修改 websnapr.css，將所有圖檔路徑改為你即將上傳的路徑 (e.g. /websnapr/lt.png)。
- 修改 websnapr.js，將第 22 行的 baseURI 改為你存放預覽泡泡、載入及錯誤圖檔的目錄 (e.g. /websnapr/ )。
- 將 websnapr.js 的第 138 行取代為
var addy = String(webSnapr.lnk.href).match(/[^:]*:\/\/([^?#]*)/)[1];
解決原程式只會抓取網址根目錄預覽圖的問題。
- 在 head 間加入
<style type=”text/css” media=”screen”>@import “/the/path/to/websnapr.css”;</style>
<script type=”text/javascript” src=”/the/path/to/websnapr.js”></script>記得將 /the/path/to 修改為你自己的路徑
- 最後將你想要顯示預覽圖的連結的 class 設為 websnapr 即可。
做出來的效果就如同本篇以及 sidebar 上的朋友連結，是不是很簡單呢？
標籤：連結預覽相關文章
3 responses so far
不是…
看不懂你在說什麼…（大哭跑走～）
—
（路人：Girasol你來亂的喔～）
結果我這個門外漢
居然開始在研究該怎麼把預覽功能丟上去了（倒）
快點祈禱實驗成功吧～
（路人：Girasol，你的書呢？你的文學呢？你的閱讀測驗呢？）
（Girasol:啊？有這種事嗎？）
更簡易的連結預覽…
先前有提過在連結加上預覽功能的方法。
後來發現一個更簡易的途徑。只要填一些資料，加入他產生的 code，不需要上傳檔案，不需要幫每個連結加上 class，所有連到站外的連結都會自動加上…