はてなブログのブログカードがOGPに対応! はてなブログ以外もブログカードスタイルになるぞ

スポンサーリンク

ふおおお、マジか。

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

Hatena Blog
Image via. はてなブログ

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

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

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

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

・・・・・・。

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

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

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

確認したところ、OGPはoEmbed APIとは切り離されたものになっていて、URLを貼り付けただけでブログカードに展開されるのははてなブログのみだそうです。残念。

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

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

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

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

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

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

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

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

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

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

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

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

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

リファラーを見ていて気づいたんですが、ブログカードでリンクを挿入すると、参照先がhttp://hatenablog.com/となり、リンク先ブログのアクセス解析からは自分が発リンクしたことが伝わりません。

WordPressのピンバックはもちろん、Google Analyticsのトラックバックからもログを参照できないので、「それは嫌だなぁ」という人は普通にリンクを挿入したほうが良いと思います。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく