最初にWebSnapr内のこちらのページより(previewbubble.zip)をダウンロードします。
すると「previewbubble」というフォルダの中に
previewbubble.js → ポップアップ用スクリプト
bg.png → 吹き出し枠画像
という2つのファイルがありますので、それぞれを任意のフォルダに移します
まずは、吹き出し枠画像までのパスを指定するためにpreviewbubble.jsを
テキストエディタなどで開き、10行目あたりにある
var bubbleImagePath = 'images/bg.png';
のimages/bg.png部分をbg.pngを移動した、フォルダまでのパスに書き換えます。
例えばimgというフォルダにbg.pngがある場合
images/bg.png → img/bg.pngという風に
次ぎにpreviewbubble.jsを指定する為に<head></head>内に以下の一行を追加します。
<script type="text/javascript" src="ここにフォルダまでのパス/previewbubble.js"></script>
例えばjsというフォルダ内にpreviewbubble.jsファイルを置いた場合は
<script type="text/javascript" src="js/previewbubble.js"></script>
あとはpreviewbubble.jsとbg.pngを収めた、それぞれのフォルダをアップロードし
<body>内の表示させたい部分に
例えばYahooへのリンクであれば
<a class="previewlink" href="http://www.yahoo.co.jp/">Yahoo Japan</a>
のように指定する(class="previewlink"のclass指定も忘れずに)
これで完了です。それほどの手間でもありませんよね。
導入後のサンプルを幾つか↓
日本語のサイトでも、問題(文字化けなど)なくキャプチャーされていますね。
実際の使用感ですが、
対象サイトのサムネイルが反映されるまでには
数分程度(おそらくですが)のタイムラグがあるようです。
もしサムネイルが反映されない場合は、少し時間を置いてから
リロードなどを試みてください。