はてなブログ、Simplicity以外のサイトでもブログカードを設置する方法

私が使用しているWordPressのテーマ「Simplicity」ではURIをコピペするだけで内部URIでは独自の、外部URIでは、はてなの「ブログカード拡張機能」を利用してブログカードを作成することができます。

大変素晴らしい機能ですが、「Simplicity」以外のテーマに変更するとブログカードがただのURIの文字列になってしまうという欠点があります。

「Simplicity」の作者のわいひらさんが、テーマのカスタマイズ方法を解説して下さっているので、この通りやれば他のテーマでもURIのコピペでブログカードの設置ができるようになりますが、パソコンが苦手な方だとちょっと大変ですね。

WordpressをカスタマイズしてURLを「はてなブログカード」っぽくリンク紹介する方法です。小さな手間で紹介リンクを綺麗に見せたいときにお勧めです。

しかし、しゅんぼーさんがどんなサイトにもブログカードを設置できるブックマークレットを作成しているのでご紹介したいと思います。

しゅんぼー(@shun_kashiwa)です。 少し前、はてなブログが「ブログカード」と呼ばれる機能を発表しました。これは、はてなブログの記事をサムネイル付きの綺麗なカード型のデザインでシェアできる便利なものでしたが、はてなブログの記事しかシェアすることは出来ませんでした。 しかし今回、この「ブログカード」がOGPに対...

ブログカードとは

元々ははてなブログで「リンク挿入」機能を利用する際に、さまざまなWebページを、タイトルや概要、アイキャッチ画像などをコンパクトにまとまった形式で埋め込むことができる機能です。
現在はoEmbed APIを利用して、はてなブログ以外のサイトでもブログカードを設置することができます。
具体的には

Mac OS X 10.6からActive Directoryに参加させる方法
「システム環境設定」>「日付と時刻」を開き、 「日付と時刻を自動的に設定」にドメインコントローラのIPアドレスを入力します。 Wi...

こんな感じのやつです。

ブックマークレットとは

通常ウェブブラウザでブックマーク(お気に入り)を選ぶと、登録しておいたURIに遷移します。
URIの代わりにJavaScriptのプログラムコードをブックマークしておくことで、それを選んだ時にプログラムが実行される機能をブックマークレットと言います。

実装方法

予め上記のコードをコピーしておきます。

blogcard

GoogleでもYahoo!でも何でもいいので、ブラウザのブックマークへ追加します。

blogcard2

ブックマークのサイト名は「ブログカード」など後から見てわかる任意の名前に変更します。
ブックマークのアドレスは上記のコピーしたコードを貼り付けします。

使い方

blogcard3

ブログカードを作成したいサイトを表示し、先ほど登録したブックマークレットをクリックします。

blogcard4

ブログカードのタグが表示されるので、コードをコピーして「OK」をクリックします。

blogcard5

WordPressであれば、WordPressの編集画面の「テキスト」タブを選び、他のブログサービスであれば、HTMLの編集画面からブログカードのコードを貼り付けします。

完成


こんな感じでインラインフレームでブログカードが表示されます。

注意点

このブックマークレットも「Simplicity」の外部URIのブログカードは、はてなの「ブログカード拡張機能」を使用しています。
したがって以下の注意点があります。

  1. はてな側がこういった外部からiframeを使った利用をよしとするかは不明
  2. はてな側が仕様を変更した場合は、利用できなくなる可能性がある
  3. はてなサービスが、もしなくなると利用できなくなる

はてな次第では使用できなくなる恐れがあることだけは覚えておかなくてはなりません。

関連コンテンツ

シェアする

フォローする