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

今回は、ブラウザ上から以下のような綺麗なブログカードをクリック一発で作成する方法です。

上記のブログカードの記事は、Wordpress上で内部リンクのみカードで表示するカスタマイズ方法でした。けれど、今回の方法は、外部リンクでも上記のようにブログカードで表示させる方法です。

外部リンクをブログカードで表示

今回の方法は、はてなの「ブログカード拡張機能」を利用してブログカードを作成します。

詳しいことは以下に書いてあります。

はてなブログでは、先日公開した「ブログカード」を拡張し、インターネットの一般的なWebサイトに対応しました。URLを貼るだけで、さまざまなWebページをコンパクトな「ブログカード」形式で紹介することができます。

（中略）今回の改善では、ソーシャルメディアのシェアで参照されるOGP（Open Graph Protocol）をはじめとして、Webページに記述されているmeta要素などのデータを利用し、はてなブログ外の任意のWebサイトに対応しました。

簡単に言うと、はてなではOGPというブログ概要情報を利用して、ブログカードを作成しているようです。OGPがない場合は、ヘッダーにあるmeta要素や、titleからブログ情報を取得しているようです。

今回はその、はてなのブログカード機能とiframeを利用してブログカードを表示する方法です。

ブログカード作成方法

はてなでは、以下のように書くと、ブログカードを作成してくれる機能があります。

https://hatenablog-parts.com/embed?url=[任意のURL]

これを、iframeで以下のように書くと、Wordpressの記事内であろうが、どんなサイトであろうがブログカードを表示することができます。

<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px;" title="URLを記入するだけ！はてなブログカード風にWordpress記事も表示させるカスタマイズ方法" src="https://hatenablog-parts.com/embed?url=https://nelog.jp/wordpress-blog-card" width="300" height="150" frameborder="0" scrolling="no"></iframe>

このように、URLさえ分かっていれば、簡単にブログカードを作成することができます。

ですので、ChromeのCreate Linkや、FirefoxのMake Linkを利用すれば、クリック一発で以下のようなブログカードを作成することができます。

Chrome Create Link拡張でのブログカードの作り方

Create Linkで作成するには、以下のフォーマットを利用します。

<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:680px;" title="%title%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>

上記のコードをCreate Linkの「Configure（設定）」から設定します。

設定画面では、以下のように入力します。

あとは、ブログカードリンクを作成したいページ上で右クリックをして、作業に作成したものを選択すればOKです。

OGPが設定されているページは、以下のように表示されます。

Firefox Make Linkアドオンでのブログカードの作り方

Make Linkで作成するには、以下のフォーマットを利用します。

<iframe class="hatenablogcard" style="width:100%;height:155px;margin:15px 0;max-width:680px;" title="%text%" src="https://hatenablog-parts.com/embed?url=%url%" frameborder="0" scrolling="no"></iframe>

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

すると、「Make Linkオプション」ダイアログが表示されるので「新規」ボタンを押してください。

表示されるダイアログに先程のフォーマットを以下のように入力して、「OK」ボタンを押します。

あとは、Firefoxブラウザでブログカードリンクを作成したいページに移動し、ページ上の何もないところを右クリックし、先程作成した項目を選択します。

すると、以下のようなブログカードリンクが作成できます。

ちなみに、OGPが設定されていないページでは、ヘッダーの情報から上記のようにブログカードが作成されます。OGPのように、イメージを設定できる場所がないので、サムネイルは表示されません。（ヘッダ情報すらないページの場合は、タイトルや概要文を取得できない場合もあります）

iframeのスタイル変更など

このiframeのブログカードスタイルは、デフォルトではiframeに埋め込まれています。

ただ、縦横の幅や、マージンなどを設定する場合は、一応設定用のクラスも記入しておいたので、以下のようにして好みのスタイルに変更することができます。

.hatenablogcard{
  width:100% !important;
  height:155px !important;
  margin:15px 0 !important>;
}

上記の数値はデフォルトのものです。スタイルを変更するときは、数字を好みのものに書き換えてご利用ください。（Wordpressならstyle.cssに貼り付け）

注意点

今回紹介した、はてなサービスを利用したブログカードですが、現時点において思いつくだけで、以下のような注意点があります。

1. はてな側がこういった外部からiframeを使った利用をよしとするかは不明
2. はてな側が仕様を変更した場合は、利用できなくなる可能性がある
3. はてなサービスが、もしなくなると利用できなくなる
4. 参照元（リファー）がiframe内のはてなドメインになる

1と2に関しては、はてな側の考え方次第で今後どうなるかはわからないです。

3に関しては、有価証券報告書とかを読み解いて判断する必要があるのかも。

1～3ははてな次第ですが、4の参照元が自分のサイトからにならないのは、結構痛いかもしれません。

通常リンクからユーザーがリンク先に移動した場合は、参照元がページのURLになるので、相手にもどこから流入が来ているのか伝わります。

しかし、今回のiframeを利用したブログカードの場合は、参照元がhatenablog.comドメインになるので、リンク先の相手（ウェブマスター）には、どこから流入があったのかわかりません。

参照元（リファー）からの流入というのはウェブマスターが最も気になる要素の一つだと思います。いつも継続的に、決まったドメインから流入があると、ウェブマスターが「このサイトからいつも流入がきているな」と覚えてくれることもあるかもしれません。

それで、もし相手が発信力のある方で、刺さる記事が参照元だった場合は、ブログやTwitterで紹介してくれることにより、逆に多くの流入を得るということもなきにしもあらずです。

ただ、今回のiframeを使った方法では、そういったことは期待できなくなります。

まとめ

今回の方法を利用すれば、クリック一発で簡単に美しいブログカードを作成することができます。

ただ、そのようなメリットもあれば、上に書いたようなデメリットもあります。

もし自分のブログで使う場合は、メリット・デメリットを踏まえた上でご利用ください。