リンクカード（ブログカード）を作るブックマークレット

リンクの見栄えを良くしたくて、以下のようなリンクカード（ブログカード）を探していました。

外部サービスに依存しない。（サービスの継続性の問題とパフォーマンスの点から）
OGP (Open Graph Protocol) に対応していないサイトへのリンクはimageやdescriptionを無理に表示しない。（関係のない画像やコンテンツが表示されることがあるので）
仕様が開示されている。（カスタマイズ可能）
StackEdit の Markdownで利用可能。（シンプルなHTMLであること）

なかなか良いものが見つからず、<blockquote> で代用したりしていたのですが、以下のサイトを見つけました。

はてな風のブログカードをブックマークレットから作ってみよう！ | 株式会社グランフェアズ

こんにちは、めぐたんです。ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。…

www.granfairs.com

　（これはリンク先のブックマークレットで作ったリンクカードです。）

詳しくはリンク先を見ていただければ分かるのですが、外部サービスへの依存がほとんどなく（favicon 表示のみ）、そのため表示も高速です。

画像も og:img のみの表示です。画像がない場合も違和感のないデザインです。

ブックマークレット（JavaScript）ですので使いやすくカスタマイズも可能です。

また、使用しているタグも <div> のみですので、ブックマークレットから出力された HTML をそのまま StackEdit に貼り付けて使うことができます。

カスタマイズ

そのままでも充分使えるのですが、ブックマークレットの JavaScript を少しカスタマイズしてみます。

タイトル

obj.title = $('title').text();

でタイトルを取得しているのですが、document.title 以外に title 要素を使ったものが引っかかることがある（Qiitaなど）ので、

obj.title = document.title;

にしておきます。

テキスト部分

'<p>' + obj.desc + '</p>'

で <meta name ="description" content=""> の内容を表示しているのですが、description がないサイトへのリンクだと、undefinedと表示されてしまいます。undefined の場合、自分で説明を上書きすれば良いのですが、以下のようにしてundefined を一旦消すことにします。

'<p>' + (obj.desc || '') + '</p>'

リンク

私の場合、内部リンクは別ウィンドウで開きたくないので、target="_blank" は消しておきます。（テキスト部分と画像部分の2箇所。）

URL

URL とホスト名は canonical 属性の設定があれば、そちらを使うようにします。

obj.url = document.URL;
obj.domain = location.host;

を

obj.url = $('link[rel=canonical]').attr('href') || document.URL;
var m = obj.url.match(/^https?:\/\/([^/]+)/);
obj.domain = m[1];

に変更します。

favicon

favicon は Google の API を使って取得しているのですが、Google は http / https 間の接続を認めていないので、"http://www.google.com/" を "//www.google.com/"に変更しておきます。

CSS

CSSも少しだけいじりました。favicon の padding が継承されていたので 0 をセットしたのと、favicon 右のドメインが下付きになっていたので、vertical-align: middle; を追加しました。

.blogCardFooter a img {
  margin-right: 5px;
  padding: 0;
  vertical-align: middle;
}

修正後のブックマークレット

ブログカード

株式会社グランフェアズ様、とても役立つ情報ありがとうございました。

2018-01-30