自製網站連結預覽

前幾天在MyShare跟HEMiDEMi都看到豬小草介紹的網路衝浪必備：Cooliris Previews，其實除了藉由瀏覽器加裝外掛之外，網站管理者也可以自製連結預覽。

　譬如我在這個blog所做的，藉由WebSnapr所提供的網站縮圖服務，在檔頭夾進一支Javascript就可以輕易自製連結預覽。

　在blogspot這裡實作的程序很簡單，但得要先找到可以用來置於外連js及png圖檔的網頁空間。如果你有一個合適的網頁空間，就可以依照下列程序逐步完成：

1. 首先，下載所需檔案previewbubble.zip。
2. 解壓後，可獲得install.txt、previewbubble.js及bg.png三個檔案。
3. 以文字編輯軟體開啟previewbubble.js，找到
   

   var bubbleImagePath = '/images/bg.png';

   將/images/bg.png改為你即將上傳圖檔的絕對位址。比方說：
   http://yourdomain.com/bg.png
4. 將編輯完成的previewbubble.js及bg.png上傳到網站空間。
5. 登入blogspot管理後台，點選範本，在<title><$BlogPageTitle$></title>之後加上：
   

   <script type="text/javascript" src="http://yourdomain.com/previewbubble.js"></script>

   同樣的，記得把http://yourdomain.com/previewbubble.js改為你上傳的位址。

　基本上，這樣就完成整個自製連結預覽的基礎工程了，接下來，只要在你想要預覽的連結加上class="previewlink"即可。比方說Jas9 ILan.的語法就寫作：

<a href="http://jas9ilan.blogspot.com/" target="_blank" class="previewlink">Jas9 ILan.</a>

Tags: WebSnapr, javascript, webdesign, tools, previewbubble, 連結預覽, screenshots