MENU

Snap Preview Anywhere*リンク先のサムネイルを表示する

外部リンクのサムネイルを表示しようと色々探していたのですが、Snapというものを以前からつかってみようかなと思っていたら…

なんとWordPressのプラグインになっているじゃないですか!
ということで、手軽にできるので、ご紹介。

1.

Snapサイトで手続きをする。

こちらのサイトから、Snapを使うための手続きをします。主にKeyを取得するのが目的。
右下の緑のボタン「Sign Up Now」をクリックする。
外国語になっている場合、日本語にも対応しているので、左上の日本の国旗をクリックします。
「今すぐ登録を」をクリックします。

 

2.

Snapを表示するための設定

1を終えると、サムネイル表示するカスタマイズページにたどり着きます。
カスタマイズしていくと、右のサムネイル表示が変わっていくので、それを見ながらしていくといいです。
「お客様のロゴの追加」は、後からできないので、ここで設定しておきます。

「+高度な設定」の+を開くと詳細設定できます。

※「お客様のロゴの追加」以外は、WordPressのプラグイン、Snap Preview Anywhere導入後設定できます。
カスタマイズが終わったら、「次へ」を押し、自分のホームページ、メールアドレスを入力し、「下記の使用許諾契約に同意します。」にチェックして、次へを押します。

すると、コードをコピーしてくださいの画面になるので、取りあえず、そのページを保ったままWordPressにプラグインを導入します。

 

3.

PluginのDownload

先ほどの「お客様コードをコピーしてください」の画面の下のほうに、「その他特定のブログの素早いインストール」とあるので、WordPressをクリックします。(こちらのサイト)

真ん中の下の方に「Downloads」にプラグインのリンクダウンロードがあるので、クリックして、alt-spa.zipをダウンロードします。

 

4.

ファイルをPluginフォルダへ入れて、Upload。

ダウンロードしたフォルダを解凍し、プラグインフォルダに入れてアップロードし、プラグインを有効にする。

 

5.

管理画面

管理画面にログインし、各種設定をクリックすると、「SPA」が表示されているので、クリックします。

 

6.

SPA Keyの設定

2で「お客様コードをコピーしてください」のページのコードを見てみます。

defer=”defer”
id=”snap_preview_anywhere”
type=”text/javascript”
src=”http://spa.snap.com/snap_preview_anywhere.js?ap=1&
key=●●●&sb=1&
th=silver&cl=0&si=0&
oi=1&lang=ja-jp&
domain=サイトURL”>

上記のコードのkey=●●●&sb=の●がkeyになっているので、それをコピペして、「SPA Key:」のところに貼り付けます。

Display Snap Searchbox below the thumbnail?

チェックをすると、サムネイルの欄に検索ボックスを配置する。

Display Preview for all links? (If disabled, you will need to add class=”snap_preview” for links you want the SPA to display on.

全てのリンクをプレビューするか否か、もしチェックしない場合は表示されないのですが、リンクのタグに

class=”snap_preview”

を入れると、そこだけサムネイルが表示されるようになるみたいです。

Display Preview for internal links? (Only works if preview is enabled for all links)

内部リンクのプレビューをするか否か。

Automatically add the code to your footer? (You’re theme needs to have wp_lovelog_footer() for this to work.)

WordPressで使用している自分のテーマのfooter.phpを見てください。

上記のタグは入っていますか?
もし入っていない場合は、書き込んでアップしてください。
例:デフォルトのテーマの場合




bodyタグの上に入れます。

Add an Icon to indicate link has SPA

リンクの横にアイコンを設置するか否か。

・Both (SPA Bubble pops up when cursor is over both link and icon)
・Icon (SPA Bubble pops up only when cursor is over the icon)

サムネイルを表示する場所。
・Bothは文字とアイコンの両方にサムネイルを表示する。
・Iconを選択した場合は、アイコンにマウスオーバーした時のみ表示し、文字にマウスオーバーしても表示されない。

SPA Behavior on blocks of links: ?
・All (All html elements will be checked for snap_preview or snap_nopreview. This is the slowest option.)
・None (None of the html elements will be checked for snap_preview or snap_nopreview. This is the fastest option.)
・Default (Only

and elements will be checked for snap_preview or snap_nopreview. This is the default option.)

上記は、多分サムネイルをどう表示するか(早いか遅いか)だと思うのですが、どれを選んでもあまりかわらないような気がします(^^;

Advanced Settings
・Allow your site visitor to turn SPA ON/OFF? (You need to add where you want to display the options iframe. This will break XHTML 1.1 validation)

・Custom Logo (Select this only if you have uploaded your Custom Logo on the Snap Site)

上は、訪問客がSnapを設定できるようにするかどうかみたいです。
チェックをしないと、サムネイルの右上に「option」がつきます。
下はSnapのサイトでロゴを投稿したときに、チェックをすると表示されます。

以上です。
英語が苦手なので、解釈が間違っていたらすいません(;´▽`A“