Snap Shotsというものを導入してみた.
リンクの上にカーソルを当てると,ポップアップでリンク先のスクリーンショットが表示されるというもの.
例1:Yahoo
例2:Google
これだけなんだけど非常に面白いと思う.面白いだけなんだけど.
リンクにマウスカーソルを当てた時に,そのリンクに付随する情報を表示する機能を総称してツールチップと言うらしく,調べてみるといろんな種類があって,様々なサイトで公開されている.(参考:24種類のツールチップのまとめ)
で,本サイトではその中でも,リンク先サイトのサムネイルを表示してくれるSnap Shotsを導入してみた.
導入自体は非常に簡単で,普通のサイトに導入する場合には,
- Snap Shotsのサイトの登録フォームに必要事項を入力する.
- 表示されるJavaScriptをHTMLの中に挿入する.
だけです.テンプレートとかを使ってるサイトならば,フッターに入れてしまえばサイト全体に適用できる.このサイトの場合は,サイト自体がWordPressというシステムで構築されているので,Snap Shots導入用プラグインを使って,導入した.プラグインを使えば設定をWordPress上で行えるので,この方が便利かもしれません.この場合の手順としては
- Snap Shotsのサイトの登録フォームに必要事項を入力する.
- keyを取得する.
- WordPressでプラグインを有効にする.
- テンプレート
の
wp_footer()の後に
<?php do_action('echo_spa'); ?>を挿入する.
最初,ちゃんと動作してくれなかったんだけど,よく見たらテンプレート内にwp_footer()が存在しなかったのが原因だったみたい.wp_footer()を入れることで,無事,正常に動作するようになりました.