一旦仕込めば超簡単!Webページの画像にBingのようなポイントリンクや吹き出しをつけられるサービス-Thinglink - 適宜覚書-Fragments

一旦仕込めば超簡単!Webページの画像にBingのようなポイントリンクや吹き出しをつけられるサービス-Thinglink

   

Bingの画像のポイントリンク、説明

はじめに

Bingの画像のポイントリンク、説明

Bingの画像のポイントリンク、説明

BlogなどWebページでは画像の占める役割は非常に大きいものとなっています。この大事な位置づけの画像ですが、もう少し機能をくわえてみるのはいかがでしょうか?例えばBingの検索画面の背景画像のようにポイントでリンクや吹き出しの説明が出来たら便利そうです。

 今回は、一旦仕込めば超簡単にWebページの画像にBingのようなポイントリンクや吹き出しをつけられるサービス-Thinglinkを紹介していきます。

Tinglinkの導入

  1. WebブラウザでThinglinkサイトを開きます。

    Thinglinkサイト

    Thinglinkサイト

  2. ページ中央上部にある吹き出しから「SIGN UP」をクリックします。画面最上部メニューの右の方にある「SIGN UP」でもよいです。

    SIGN UP

    SIGN UP

  3. すると、SIGN UP(初期登録)画面が表示されます。Facebookアカウントでの接続か(画面左)、メールアドレスでの登録か(画面右)を選択出来ます。今回紹介ではFacebookからの接続を行いますので「Log in with Facebook account」をクリックします。

    初期登録画面

    初期登録画面

  4. すると、Facebookへのアクセス許可設定画面(Request for Permission)が表示されます。問題が無ければ、「Allow」ボタンをクリックします。

    アクセス許可設定

    アクセス許可設定

  5. すると、画面遷移してThinglinkでのユーザ名と登録するメールアドレスを確認してきます。Facebook経由で接続許可したので、Facebookでの名前とメールアドレスが既定で入力済みです。これを変えたい場合は変更の上、「Done!」ボタンをクリックします。

    ユーザ名登録

    ユーザ名登録

  6. これでThinglinkサービスへのユーザ登録は完了しました。次にこのサービスを利用出来るようにする方法が表示された画面に遷移します。利用可能な環境は、主に次の4つです。
  7. 例としてこのBlogに導入します。この場合は、プラグイン「Official Thinglink Plugin」を導入します。導入方法は上記のリンク先に詳細が図解付きで書かれているため割愛します。他のWordpressのプラグインと同様で非常に簡単です。

    Official Thinglink Pluginの導入

    Official Thinglink Pluginの導入

  8. プラグイン「Official Thinglink Plugin」は、ThinglinkにSignInしている状態でインストールすると設定は自動で済むように作られています。もし、設定がなされていない場合はThinglinkのSETTINGS画面最下部にあるをプラグインの設定画面で登録してください。

    YOUR THINGLINK ID

    YOUR THINGLINK ID

使ってみる

  1. ThinglinkにSignInしている状態でBlogの通常画面を開きます。(編集画面ではありません)

    Blogの通常画面を開く

    Blogの通常画面を開く

  2. 画面内の何かの画像にマウスオーバーすると左側に下図のようなマークが表示されます。(動作確認したところある程度縦幅のある画像のみ利用可能のようです)上からThinglinkマーク、タグ編集、共有、画像埋め込み用のコードとなっています。

    Thinglink操作メニュー

    Thinglink操作メニュー

  3. タグ編集はタグ編集をクリックして、画像の任意の場所をクリックすると、リンクや吹き出しが簡単に付けられます。
  4. どこかで見かけたようなネタ画像を動作実例に使ってみましょう。画面内でポイントのあるところをクリックしてみてください。下記はテキストとリンクだけですが、リンクにYoutube動画を入れた場合はポップアップで再生可能なサムネイルが表示されたり高機能ですよ。(゚∀゚)

    動作実例

    動作実例

おわりに

今回は、一旦仕込めば超簡単!Webページの画像にBingのようなポイントリンクや吹き出しをつけられるサービス-Thinglinkと題してサービスの紹介を行いました。未検証ですが、記事中にあったようにTumblr他のサービスとも連携が出来、活用範囲が広そうです。

この記事がお役にたてると嬉しいです。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Facebook, Webサービス, WordPress , , , , , ,