Embedlyで一風変わったブログカードをクリック一発で作成する方法

最近はてなブログカードがよく利用されています。

このブログでもたまに使用していて、以下のようなiframeを用いた利用方法も紹介しています。

はてなブログカードのような美しい外部リンクをクリック一発で作成する方法
今回は、ブラウザ上から以下のような綺麗なブログカードをクリック一発で作成する方法です。 上記のブログカードの記事は、Wordp...

ただこの、はてなブログカードの方法は、はてなサービスに何かあったり、仕様変更があったら、下手するとiframe内にリンク情報が表示されないなんてこともあり得ます。

けれども、Embedlyカードを用いれば、そういった問題も解消できます。加えて、見た目的にも、はてなブログカードと違うので、新たな外部リンク表示方法の選択肢の1つになると思います。

というわけで今回は、Embedlyカードで手軽に外部リンクカードを作成する方法の紹介です。

photo by liz west

スポンサーリンク
レクタングル(大)広告

Embedlyカードとは

Embedly makes your content more engaging and easier to share  Embedly

Embedlyは、URLを入力して対象のページのブログカードを作成するツールです。

コードジェネレーターからURLを入力することで、埋め込みコードを作成することができます。

実際作成してみると以下のようなブログカードが作成できます。

はてなブログカードのような美しい外部リンクをクリック一発で作成する方法

ちゃんレスポンシブ表示にも対応しています。

ちなみに、同じページをはてなブログカードで作成すると以下のようになります。

Embedlyカードの作り方

Embedlyカードの作り方は簡単で、コードジェネレーターの入力欄にURLを入力して「EMBED」ボタンを押します。

Embedly入力欄にURLを入力

すると、以下のようにカードがプレビュー表示されるとともに埋め込みコードも生成されるので、「CLICK TO COPY EMBED CODE」ボタンを押してコードをコピーします。

Embedly埋込コードをコピーできる

あとは、プログなどにコピーしたコードを貼り付けて利用します。

ブックマークレットのでの作成方法

Embedlyには、手軽にリンクを作成できるブックマークレットも用意されています。

ブックマークレットページから、「+Embed」ボタンをブックマークバーにドラッグ&ドロップすることで登録できます。

Embedlyのブックマークレット

次からは、リンク作成対象ページを開いてブックマークレットをクリックするだけで、手軽にブログカードを作成できます。

Embedlyの埋め込みコード

Embedlyで生成された詰め込みコードは、以下のようになっています。(※見やすいように改行を加えました。)

コードが生成された時点で、以下のようにAタグを用いてリンクが作成されます。

その後、Embedly側からスクリプトファイルが読み込まれてブログカード化されます。

Embedlyの動作

まずコードを生成した時点で、「embedly-card」というクラス名が入った以下のようなリンクが普通に作成されます。

はてなブログカードのような美しい外部リンクをクリック一発で作成する方法

そしてそのあと、embedly-cardとクラス名の入ったリンクに対して、JavaScriptが実行され、ブログカードが動的に作成されます。

なので、もしEmbedlyのサービスが終了したとしても、通常リンクは残るという利点があります。

例えば、JavaScriptを切ってこのページを表示させたとすると、ブログカードは表示されなくなりますが、テキストリンクはちゃんと表示されます。

Chrome拡張のCreate Linkでタグを作成する

毎回、Embedlyを開いてリンクを作成するのも面倒なので、以下では、ブラウザの拡張などを利用した手軽なリンク作成方法を紹介します。

Chromeで手軽にリンクを作成するには、Create Link拡張を利用します。(※Create Linkがインストールされていない場合は、インストールする必要があります。)

フォーマットの作成

まずは、Create Linkボタンを押して「Confugure」を選択し、設定画面を開きます。

Create Linkの設定画面を開く

すると以下のような画面が表示されるので、「+」ボタンを押して新規フォーマットを作成し、フォーマットを入力します。

Create Linkでフォーマットを作成する

入力するフォーマットは、以下になります。

リンクカードの作成方法

あとは、作成したいページで、右クリックして、先程作成したフォーマットのCreate Linkメニューを選択します。

作成したいページでCreate Linkメニューを選択

右クリックする箇所は、画像や、リンク、選択テキストなどのない箇所で行ってください。

すると以下のような、リンクカードが表示されます。

Yahoo! JAPAN

サムネイルは、OGP情報のものが利用されるわけでもないようです。

FirefoxアドオンのMake Linkでタグを作成する

FirefoxアドオンのMake Linkで作成するには、以下のように行います。

フォーマットの作成

まずは、Make Linkの設定を開きます。

Make Linkの設定メニュー

Make Linkオプションの「新規」ボタンを押します。

Make Linkオプションの新規作成

新しいアイテムの作成画面が表示されるので、以下のように入力します。

Make Link新規フォーマットの作成

入力するフォーマットは以下になります。

入力したらOKボタンを押して設定ダイアログも閉じてください。

リンクカードの作成方法

あとは、リンクカードを作成したいページ上で右クリックして、作成したMake Linkアイテムを選択してださい。

Make Linkで新規作成アイテムを選択する

右クリックする箇所は、画像や、リンク、選択テキストなどのない箇所で行ってください。

すると、以下のようなリンクカードが表示されます。

waifu2xとその派生ソフト一覧

画像がないページのリンクを作成すると、上記のように表示されます。

まとめ

今回のEmbedlyを利用した方法は、ブラウザの拡張に登録しておけば、メニューアイテムを選択するだけで、一風変わったブログカードが作成できます。

「はてなブログカードは使っている人が多いので他のサイトとは差別化したい」とか「もしブログカードサービスがなくなったとしても表示上は問題ないようにしたい」なんて場合には、いいかもしれません。

『Embedlyで一風変わったブログカードをクリック一発で作成する方法』へのコメント

  1. 名前:のぶ 投稿日:2016/05/25(水) 08:38:00 ID:a6aa0689a

    いつも、すばらしいテーマを公開していただいて、有益な情報も教えてもらって、感謝しています。

    embedlyですが、wordpressのプラグインがあったので、わたしはそれを利用することにしました。

    アカウント登録が必要で、作成できるカードの個数にも制限がある、というのが、ちょっとなぁ、と思っています。

    create linkを使う方法なら、確かによさそうですね。

  2. わいひら 名前:わいひら 投稿日:2016/05/25(水) 11:59:06 ID:ed589523a

    Embedlyにプラグインが出ていたんですね。
    Embedly > WordPress Plugins
    EmbedlyのWordPressプラグインを見つけたので導入してみた | レッツトライ!しもしも
    こちらは確かに、URLを入力するだけで使えるので、設定さえしてしまえば楽そうですね。
    教えていただき、ありがとうございます!