ふおおお、マジか。

昨日の今日でアレなんですが、はてなブログがブログカードを拡張し、はてなブログ以外のサイトもブログカード形式で表示できるようにしてきましたよ!
自前で似たスタイルのキャプ付きリンク作る必要がなくなる･･･!

昨日、こんな記事を公開しました。

[関連記事] はてなブログの「ブログカード」をWordPressのoEmbedに対応させる方法

そこそこ反応を頂けまして、Twitterでもはてなブログ公式(hatenablog)に紹介してもらったりしたわけです。

いやーありがたいなーはてなブログ以外のサイトは似せたスタイルでリンクを見せられるようにしたしゴリゴリ記事書こー、とか思ってたら、その日のうちにはてなブログ以外のサイトもOGPで取得できるようにしちゃうぜうわはははははー! な対応をしてきました。

[外部リンク] 「ブログカード」をOGPなどに対応しました。さまざまなWebページをコンパクトに整形して掲載できます - はてなブログ開発ブログ

アレですかね、まさかうちがキャプ付きリンクをブログカードに似せたスタイルにしたというのを見て、「だったら外部のサイトも対応したろうやないかい」っていうことなんでしょうかね? いやまさかそんなわけ･･･。

･･････。

ま･･･まぁ、そういうことはないとは思いますけど、とりあえずOGP対応しているサイトであれば、そのOGP情報を取得してブログカードで表示できるようになったというわけです。

で、気になるのが、これって昨日書いたoEmbed APIで使えるのか? ということです。試しにOGPに対応している当ブログのURLをコピペしてみたんですけど、残念ながらブログカードに展開されず、単純に文字列として表示されてしまいました。

WordPressのwp_oembed_add_provider()関数の記述方法を変えないといけないのか、それともはてなブログ側の公開APIが対応していないのかわからんのですが、公開APIを導入していても、現時点でははてなブログ以外のサイトのURLでは通らないようです。

あれ? でもiframeなら行けるんじゃね?

そうなんですよ。すっかりAPIだの何だのに目が行き過ぎててすっかり忘れてたんですけど、単純にiframeタグで記述したら普通に表示されるんですよね。

これなら別にoEmbed APIを導入していなくても、決まった記述さえしておけばブログカードが表示されるんですよ。

というわけで実際にiframeでリンクを埋め込んでみた結果が上。
見事にブログカードで表示されました。

記述するソースは以下のとおりです。

要はiframeのsrcではてなブログのエンドポイントURLにパラメータで、取得したいサイトのURLを加えるだけです。
あとは取得したいサイトがOGPに対応さえしていれば、タイトル、概要、OGPイメージ、URLが引っ張られて、整形されたHTMLに埋め込まれます。

これならChromeの「Create Link」やFirefoxの「Make Link」を使うことで、毎回iframeを手動で記述しなくても、サクリとコピペで利用できますね。

ただ、はてな側でこういう使われ方を良しとするかどうかはまた別問題。
はてなブログ以外のWebサイトやブログが、この方法でブログカードを表示させても良いのかどうかは、公式見解をお願いしたいところです。

これはこれで便利なんだけど、自分で作ったスタイルも結構愛着があるので、公式的にこういう使い方アリとなっても、どっちでリンクを見せるかという点に関しては悩むところだなぁ。

Create Linkとかで使う場合のテンプレート

Google Chromeの拡張機能「Create Link」やFirefoxのアドオン「Make Link」を使うのが多分いちばん便利なのではないかと思います。

[外部リンク] Create Link

[外部リンク] 

基本、変数は同じなので、以下のテンプレートを登録すればいいだけです。

これで、サクッとリンクをブログカード形式で挿入できますよ。