網頁研習室
【HTML】教學網站
網頁研習室【電子報】教學網站
網頁研習室【賀寶芙】聯賣資訊網
Yahoo!奇摩股市
設定步驟：
01.請先註冊取得 websnapr developer key：xxxxxxxxx
Enter your websnapr key 由此進入然後輸入您在 websnapr 申請到的 developer key
再將 I agree to Websnapr's Terms and Conditions 打勾，按 Next step 。
02.Select your blog or CMS type (如果您是個人網站，請選擇 Other / Don't know)，按 Next step。
03.What links should get a preview? (顯示連結預覽計有以下四種狀況)
All links on the page with the class "websnapr" (所有網頁上的鏈接的階層 websnapr)
All external links on the page within a certain container ID:(所有外部鏈接在網頁上有一定的容器內編號)
All external links on the page within certain container classes:(所有外部鏈接在網頁上的集裝箱內的某些類別)
All external links on the page.(所有外部鏈接在網頁上)
Type of bubble integration (選擇預使用的顯示方式)
Automatically place a small icon next to the link. (在連結後方自動增加一個連結小圖標)
Show bubble when hovering over the link. (滑鼠移到超連結位置即可顯示)
第 3 步驟 2 個 Type of bubble integration 碼的區別只在最後面的 /swi/ 與 /swh/
http://bubble.websnapr.com/xxxxxxxxx/swi/
http://bubble.websnapr.com/xxxxxxxxx/swh/
04.Include the bubble code on your website! (在你的網站 <HEAD> 與 </HEAD> 間加入它給的 JS 語法)。
<script src="http://bubble.websnapr.com/xxxxxxxxxxxx/swh/" type="text/javascript"></script>
注意事項：
01.如果你是第一次使用本功能，因需要重新抓取網頁快照，所以出現的顯示畫面會比較慢些。
02.一個電子信箱只能註冊一個程式碼。
03.一個程式碼可用於所有不同網址及次目錄內網頁。
04.如果你想以新視窗開起網頁，請自行於連結標籤處加入 target="_blank" 或 target="_new"。
05.不是所有部落格都可以使用這個功能，你要自己測試看看。
原程式發現問題：
01.原有程式顯示位置有點偏左不太正確，你必需先將 swh.js 抓下來才可以調整 JS 程式碼位置。
02.如果欲顯示的位置剛好位於最右側或最下方，會造成超出螢幕頁面問題。
03.這些問題請參考下面自製網站連結預覽或另外一個網頁縮圖服務程式。
自動增加連結小圖標 自製網站連結預覽
原始碼查看