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）」は設定しておきたいところでした。
埋め込まなければならない HTML のフォーマットは分かっているのだから、要はブックマークレットを使わずに独自に生成してしまえばいいのでは？ ということで、hnakamur 氏が公開しているブラウザ機能拡張、FormatLink を使って設定してしまうことにしました。
僕は普段 Firefox を使っているのでこのリンクを貼ってますが、 Google Chrome 版もあるそうです。
とりあえずやってみる
まずは FormatLink をさくっとブラウザにインストールしましょう。その後アドオン設定変更画面で、下記のように変更します。
- 空いてる行の左カラムに分かりやすく名前を入力（ここでは
embedlyとしました） - 同じ行の右カラムに、下記の HTML をコピペ：
<a class="embedly-card" href="{{url}}" data-card-description="0" data-card-type="article" data-card-align="left" data-card-controls="0">{{title}}</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script> - 「Create submenus」にチェックが入っていることを確認して
- 「Save changes」ボタンをクリック
一見すると何も変化がありませんが、これで設定は保存されているのでタブは閉じても大丈夫です。
実際に埋め込み用の HTML を得たいときには、右クリックから FormatLink > as embedly を選択します。下記のような HTML （実際には 1 行）がクリップボードにコピーされましたでしょうか？
<a class="embedly-card" href="https://dev.classmethod.jp/tool/embedly-with-wordpress/" data-card-description="0" data-card-type="article" data-card-align="left" data-card-controls="0"> 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; }
ちなみに： FormatLink は強力なツール
Embedly のついでのような紹介になってますが、Web サイトの URL とタイトルを好みのフォーマットで手軽にコピペできるので便利です。僕は Text 形式のコピーを多用しています
デフォルトのものでも十分ですが、必要なら文字列置換しつつクリップボードにコピーすることも可能なので、この手のツールをお探しなら選択肢の一つにいれてみてください。
