Embedly のカード埋め込み HTML を FormatLink で手軽に生成する

はじめに

弊社の haoyayoi の記事で知った(感謝!)のですが、Embedly のブログカード は手軽に見栄えの良いリンクを貼ることができて素敵ですね!

WordPressの記事でも手軽にリンクをカード型にデザインできるEmbedlyを試してみた | DevelopersIO Cards are a clean, responsive, and shareable way to display any embed. | Embedly

上記記事にもありますが、公式にブックマークレットがあるので通常はそちらで十分です。ただし、以下のようなところで少し不満がありました。

  • 使いたいフォーマットは決まっているのに、毎回変更しなければならない
  • ブックマークレットでコントロール出来ないオプションがあってそれが使いたい

オプションというのはこのドキュメントで説明されているもので、「シェアボタン(data-card-controls)」「位置(data-card-align)」は設定しておきたいところでした。

Cards · Embedly Documentation

埋め込まなければならない HTML のフォーマットは分かっているのだから、要はブックマークレットを使わずに独自に生成してしまえばいいのでは? ということで、hnakamur 氏が公開しているブラウザ機能拡張、FormatLink を使って設定してしまうことにしました。

hnakamur/FormatLink-Firefox: A Firefox web-extension to copy the URL and the title or the selected text to clipboard

僕は普段 Firefox を使っているのでこのリンクを貼ってますが、 Google Chrome 版もあるそうです。

とりあえずやってみる

まずは FormatLink をさくっとブラウザにインストールしましょう。その後アドオン設定変更画面で、下記のように変更します。

  1. 空いてる行の左カラムに分かりやすく名前を入力(ここでは embedly としました)
  2. 同じ行の右カラムに、下記の HTML をコピペ:
    <a class="embedly-card" data-card-description="0" data-card-type="article" data-card-align="left" data-card-controls="0" href="{{url}}">{{title}}</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
  3. 「Create submenus」にチェックが入っていることを確認して
  4. 「Save changes」ボタンをクリック

一見すると何も変化がありませんが、これで設定は保存されているのでタブは閉じても大丈夫です。

実際に埋め込み用の HTML を得たいときには、右クリックから FormatLink > as embedly を選択します。下記のような HTML (実際には 1 行)がクリップボードにコピーされましたでしょうか?

<a class="embedly-card"
  data-card-description="0" data-card-type="article"
  data-card-align="left" data-card-controls="0"
  href="https://dev.classmethod.jp/tool/embedly-with-wordpress/">
    WordPressの記事でも手軽にリンクをカード型にデザインできるEmbedlyを試してみた | DevelopersIO
</a>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

href= のところ({{url}})と、<a>〜〜</a> のところ({{title}})に、望みの URL とタイトルがはいっていたら成功です!

カスタマイズ

前述したとおり、 Embedly のブログカードはカスタマイズが可能です。実際上にかいた HTML はブックマークレットのデフォルトから、下記のアトリビュートを追加してカスタマイズしたものになります。

Attribute Value Description
data-card-description 0 リンク先の説明文を表示しない
data-card-type article 画像は小さく
data-card-align left カードを左寄せで表示
data-card-controls 0 シェアボタンは表示しない

上二つはブックマークレットでもコントロール出来ますね。ここは完全に好みなので、自分で好きなように変更して FormatLink に設定してください。

なお実は「カードをグレーで縁取りしたい」という思いもあったので、本記事にはカスタム CSS として下記を設定しています。

div .embedly-card-hug { border: lightgray solid 1px; }

Embedly のついでのような紹介になってますが、Web サイトの URL とタイトルを好みのフォーマットで手軽にコピペできるので便利です。僕は Text 形式のコピーを多用しています

デフォルトのものでも十分ですが、必要なら文字列置換しつつクリップボードにコピーすることも可能なので、この手のツールをお探しなら選択肢の一つにいれてみてください。