最近はてなブログカードがよく利用されています。
このブログでもたまに使用していて、以下のようなiframeを用いた利用方法も紹介しています。
ただこの、はてなブログカードの方法は、はてなサービスに何かあったり、仕様変更があったら、下手するとiframe内にリンク情報が表示されないなんてこともあり得ます。
けれども、Embedlyカードを用いれば、そういった問題も解消できます。加えて、見た目的にも、はてなブログカードと違うので、新たな外部リンク表示方法の選択肢の1つになると思います。
というわけで今回は、Embedlyカードで手軽に外部リンクカードを作成する方法の紹介です。
photo by liz west
目次
Embedlyカードとは
Embedlyは、URLを入力して対象のページのブログカードを作成するツールです。
コードジェネレーターからURLを入力することで、埋め込みコードを作成することができます。
実際作成してみると以下のようなブログカードが作成できます。
はてなブログカードのような美しい外部リンクをクリック一発で作成する方法
ちゃんとレスポンシブ表示にも対応しています。
ちなみに、同じページをはてなブログカードで作成すると以下のようになります。
Embedlyカードの作り方
Embedlyカードの作り方は簡単で、コードジェネレーターの入力欄にURLを入力して「EMBED」ボタンを押します。
すると、以下のようにカードがプレビュー表示されるとともに埋め込みコードも生成されるので、「CLICK TO COPY EMBED CODE」ボタンを押してコードをコピーします。
あとは、ブログなどにコピーしたコードを貼り付けて利用します。
ブックマークレットでの作成方法
Embedlyには、手軽にリンクを作成できるブックマークレットも用意されています。
ブックマークレットページから、「+Embed」ボタンをブックマークバーにドラッグ＆ドロップすることで登録できます。
次からは、リンク作成対象ページを開いてブックマークレットをクリックするだけで、手軽にブログカードを作成できます。
Embedlyの埋め込みコード
Embedlyで生成された埋め込みコードは、以下のようになっています。（※見やすいように改行を加えました。）
<a class="embedly-card" href="https://nelog.jp/hatenablogcard">はてなブログカードのような美しい外部リンクをクリック一発で作成する方法</a> <script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
コードが生成された時点で、以下のようにAタグを用いてリンクが作成されます。
<a class="embedly-card" href="...">リンクテキスト</a>
その後、Embedly側からスクリプトファイルが読み込まれてブログカード化されます。
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
Embedlyの動作
まずコードを生成した時点で、「embedly-card」というクラス名が入った以下のようなリンクが普通に作成されます。
はてなブログカードのような美しい外部リンクをクリック一発で作成する方法
そしてそのあと、embedly-cardとクラス名の入ったリンクに対して、JavaScriptが実行され、ブログカードが動的に作成されます。
なので、もしEmbedlyのサービスが終了したとしても、通常リンクは残るという利点があります。
例えば、JavaScriptを切ってこのページを表示させたとすると、ブログカードは表示されなくなりますが、テキストリンクはちゃんと表示されます。
Chrome拡張のCreate Linkでタグを作成する
毎回、Embedlyを開いてリンクを作成するのも面倒なので、以下では、ブラウザの拡張などを利用した手軽なリンク作成方法を紹介します。
Chromeで手軽にリンクを作成するには、Create Link拡張を利用します。（※Create Linkがインストールされていない場合は、インストールする必要があります。）
フォーマットの作成
まずは、Create Linkボタンを押して「Configure」を選択し、設定画面を開きます。
すると以下のような画面が表示されるので、「＋」ボタンを押して新規フォーマットを作成し、フォーマットを入力します。
入力するフォーマットは、以下になります。
<a class="embedly-card" href="%url%">%text%</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
リンクカードの作成方法
あとは、作成したいページで、右クリックして、先程作成したフォーマットのCreate Linkメニューを選択します。
右クリックする箇所は、画像や、リンク、選択テキストなどのない箇所で行ってください。
すると以下のような、リンクカードが表示されます。
サムネイルは、OGP情報のものが利用されるわけでもないようです。
FirefoxアドオンのMake Linkでタグを作成する
FirefoxアドオンのMake Linkで作成するには、以下のように行います。
フォーマットの作成
まずは、Make Linkの設定を開きます。
Make Linkオプションの「新規」ボタンを押します。
新しいアイテムの作成画面が表示されるので、以下のように入力します。
入力するフォーマットは以下になります。
<a class="embedly-card" href="%url%">%text%</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
入力したらOKボタンを押して設定ダイアログも閉じてください。
リンクカードの作成方法
あとは、リンクカードを作成したいページ上で右クリックして、作成したMake Linkアイテムを選択してください。
右クリックする箇所は、画像や、リンク、選択テキストなどのない箇所で行ってください。
すると、以下のようなリンクカードが表示されます。
画像がないページのリンクを作成すると、上記のように表示されます。
まとめ
今回のEmbedlyを利用した方法は、ブラウザの拡張に登録しておけば、メニューアイテムを選択するだけで、一風変わったブログカードが作成できます。
「はてなブログカードは使っている人が多いので他のサイトとは差別化したい」とか「もしブログカードサービスがなくなったとしても表示上は問題ないようにしたい」なんて場合には、いいかもしれません。
いつも、すばらしいテーマを公開していただいて、有益な情報も教えてもらって、感謝しています。
embedlyですが、wordpressのプラグインがあったので、わたしはそれを利用することにしました。
アカウント登録が必要で、作成できるカードの個数にも制限がある、というのが、ちょっとなぁ、と思っています。
create linkを使う方法なら、確かによさそうですね。