WordPress リンク表示をはてなのブログカードと同じにする

２０１４年の９月にはてなブログで発表されたこちらの記事。

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

見た目が良い感じだなと思ったのでさっそく導入してみます。ちなみにdmgadget(ディーエムガジェット)で前にWordPressのプラグイン「Browser Shots」を使ったリンクをスクリーンショットと共に載せる方法はこちら、

WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法 | dmgadget(ディーエムガジェット)

Google Chromeの拡張機能である「Create link」を使ってリンクを作成していたのですが、今回、はてなのブログカードを作る際にもこの「Create link」を使って簡単にリンクを作成したいと思います。「Create link」の導入がまだの方は上記のリンクより文章に沿って導入してみてください。

Google Chromeの拡張機能の「Create link」とWordPressのプラグイン「Browser Shots」を使ったリンク表示はこちら、

WordPress[Twitter] ツイッターのツイートをブログに載せる方法 | dmgadget(ディーエムガジェット)

同じくGoogle Chromeの拡張機能の「Create link」を使ってはてな風ブログカードのリンク表示はこちら、

WordPressのプラグイン「Browser Shots」を使ったリンク表示はRSSなどではURL表示になってたりと色々困ってたので少し改善出来そうです。

Create Linkの設定

Create Linkの設定に移ります。Google Chromeの右上の「Create Link」のリンクをクリック

そしてメニュー一番下の「Configure」クリック

Chrome右上の「Create Link」ボタンを押して一番下の「Configure」を押す。するとCreate Linkのページがブラウザ上に表示されます。

Create Linkのページ上、左下の「＋」をクリックしてください。そして、前回行った「Capture」が表示されていますが、その下にはてなブログカード用の「Hatena Capture」を追加します。左の「Name」に「Hatena Capture」 と書いて右の「Fotmat」には下記のコードをコピペします。

<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" title="%title%" src="//hatenablog.com/embed?url=%url%" width="300" height="150" frameborder="0" scrolling="no"></iframe>

使い方は簡単です。リンクとして表示したいページを開いて、先程の「Create Link」のメニューを開きます。

そして先程作った「Hatena Capture」をクッリックするだけです。作成中のブログに戻ってペースとすれば完成です。

めちゃくちゃ便利です。ただこのはてなのブログカードを使った表示方法は「リファラ」がはてなになってしまいますので注意が必要です。Browser shotと組み合わせて使うのも良いかもしれません。

HTTPリファラ（英: HTTP referer）あるいは単にリファラは、HTTPヘッダの1つで、インターネット上の1つのウェブページまたはリソースから見て、それにリンクしているウェブページやリソースのアドレス[1]を指す。リファラを参照することで、どこからそのページに要求が来たのかを知ることができる。リファラをログすることでウェブサイトやウェブサーバで訪問者がどこから来ているかを把握でき、プロモーションやセキュリティの目的に使うことができる。

読んで頂いてありがとうございました。

追記１

[M] はてなブログのブログカードがOGPに対応! はてなブログ以外もブログカードスタイルになるぞ | mbdb (モバデビ)

mbdbさんのページで書かれていた、

リファラーを見ていて気づいたんですが、ブログカードでリンクを挿入すると、参照先が//hatenablog.com/となり、リンク先ブログのアクセス解析からは自分が発リンクしたことが伝わりません。
WordPressのピンバックはもちろん、Google Analyticsのトラックバックからもログを参照できないので、「それは嫌だなぁ」という人は普通にリンクを挿入したほうが良いと思います。

との事です。今までのBrowser Shotもまだ必要ですね。あとここのブログだとブログカードの下に隙間が出来てしまいます。色々解決策を探している段階ですが、原因がわかりません。どなたか詳しい方がいらっしゃいましたらこっそり教えて欲しいです、、、

追記2

ブログカードの下に隙間が出来てしまう問題ですが、どうやらfunction.phpに記載してあるiframeのレスポンシブ対応設定が問題で隙間が出来てしまっていたました。