リンク先のプレビュー表示｜WebSnapr2.0
最近、いろいろなところで見かけるリンク先のプレビュー表示を試してみました。
探してみると、いろんなのがありますね。
で、今回試したのはWebSnapr2.0
他のものに比べると表示がシンプルで余計なリンクがないところがいいです。
導入手順は下記のとおりです。
１．WebSnapr2.0のサイトよりpreviewbubble.zipをダウンロードし解凍
２．previewbubble.jsの10行目の画像パスの設定を変更（赤字部分）
var bubbleImagePath = '/images/bg.png';３．previewbubble.js、bg.pngをアップロード
４．テンプレートのヘッダー部分に下記を挿入
<script type="text/javascript" src="previewbubble.js"></script>５．プレビュー表示したいリンクに対してclass="previewlink"を設定
<a class="previewlink" href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>以上です。
プレビューを表示したい部分にだけ設定できるところもGOOD！
気になる点としてはプレビューが表示されるまで時間がかかるところですが、
しばらく様子を見てみようと思います。
コメントする