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

4_business-card

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

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

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

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

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

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

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

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

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

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

ブログカード作成方法

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

http://hatenablog.com/embed?url=[任意のURL]

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

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

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

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

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

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

Create Linkの設定

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

iframeはてなブログカード(Create Link)

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

Create Linkで外部ブログカードリンクを作成

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

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

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

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

Make Linkの設定

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

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

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

iframeはてなブログリンクの作成(Make Link)

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

ブログカードリンクの作成(Make Link)

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

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

iframeのスタイル変更など

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

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

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

注意点

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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