リンク先のプレビューをシンプルに表示する （Preview Bubble）

リンク先のプレビューをバルーン状の吹出しで表示してくれるサービスは色々あるが、シンプルな物が少ない。余計なリンクやバルーンのデザインがサイトのデザイン統一感を損ねてしまう。WebSnaprのPreview Bubbleを利用すれば、シンプルなリンク先プレビューを表示してくれる。

WebSnaprはWebサイトのキャプチャをURL指定で作成してくれるフリーのサービス。キャプチャサイズも指定できる点が優れている。サイズ（px）は　T = 92x70、S = 202x152、M = 400x300、L = 640x480 の4サイズ。

リンク先のプレビューを表示

Preview Bubble

previewbubble.js を自身のサイトに設置して、タグに <a class="previewlink"...　を追加すれば、リンク先のプレビューを表示してくれるようになる。バルーンのデザインもシンプルで、余計なリンクなどの表示も無い。しかし、プレビューの表示位置は常にリンクの下になる為、ブラウザの表示領域からはみ出る場合がある。

ダウンロードファイルに含まれる bg.png を変更すれば、バルーンの背景デザインの変更が可能。プレビュー生成は時間がかかる場合もあるので、設置時にその点を考慮して利用することをお勧めする。