ぱんぶろ

パンジーの「いいね!」ブログ

自分のWordPressブログに「はてブ」が付いたのをChromeブラウザに通知する方法!拡張機能とコードを追加します

      2016/04/15    16 shares

medium_12007378503
photo credit: jamacab via photopin cc

自分のブログにはてブが付いたのをChromeブラウザに通知する方法を紹介します。
2個付いたの確認したら、すぐさま自分で付けて新着に載せちゃいましょう!

スポンサード リンク

はてブされたのをChromeブラウザに通知する方法

はてブをChromeへ通知させるには、

  • Chrome拡張機能の追加
  • WordPressへコードの追記

を行う必要があります。
では、順番にその方法を。

Chrome拡張機能の追加

はてなのお知らせというChrome拡張機能を追加します。
はてなのお知らせ
hatena_oshirase_01

右上の「無料」ボタンを押して追加しましょう!
Chromeブラウザの右上に青色の吹き出しアイコンが出たら完了です!
hatena_oshirase_02

機能としては以下の通りですね。

はてなのお知らせ拡張では、自分のブログにコメントが付いた、ブックマークコメントにスターが付いた、などといったはてなの各サービスからの通知をまとめて受け取ることができます。

自分のブログが「はてブ」されたときはここに表示されるわけです。

WordPressへコードの追記

自分のブログのどこかにコードを追記する必要があります。
とはいっても難しいことはなく、
はてな公式で紹介されているコードをそのまま貼るだけです。
はてなブックマークとページを結び付ける

以下がそのコードです。<head>~</head>内にでも追記しちゃいましょう!

<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/">
<rdf:Description rdf:about="エントリーのリンクあるいはウェブサイトのURL">
<foaf:maker rdf:parseType="Resource">
<foaf:holdsAccount>
<foaf:OnlineAccount foaf:accountName="あなたのはてなID">
<foaf:accountServiceHomepage rdf:resource="http://www.hatena.ne.jp/" />
</foaf:OnlineAccount>
</foaf:holdsAccount>
</foaf:maker>
</rdf:Description>
</rdf:RDF>

2か所修正がいります。(日本語のところ。)

「エントリーのリンクあるいはウェブサイトのURL」には、
個別記事ごとのはてブを知りたいので、

<?php the_permalink(); ?>

に修正。

「あなたのはてなID」には、そのまんまですが自分のはてなIDを入力します。

例えば、はてなIDが「panzee」の場合には、以下のような感じになるわけです。

<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:foaf="http://xmlns.com/foaf/0.1/">
<rdf:Description rdf:about="<?php the_permalink(); ?>">
<foaf:maker rdf:parseType="Resource">
<foaf:holdsAccount>
<foaf:OnlineAccount foaf:accountName="panzee">
<foaf:accountServiceHomepage rdf:resource="http://www.hatena.ne.jp/" />
</foaf:OnlineAccount>
</foaf:holdsAccount>
</foaf:maker>
</rdf:Description>
</rdf:RDF>

はてブされた時の挙動を見てみよう!

ここまでできたら、はてブされた時に通知されるようになるはずです。
実際にはてブ付けて見てみましょう。

一番最近の投稿記事(⇒「三日坊主のメリット5つ。デメリットなし。みんな三日坊主しちゃいなよ!」)に
はてブを付けてみます。

はてブ押される前の様子。
ただの吹き出しアイコンです。
hatena_oshirase_04

でははてブ「ポチ」っと。
hatena_oshirase_03

すると・・・。


ちょっとタイムラグありますが・・・。

はてブ押される前の様子。
ちっちゃくてかわいい数字が表示されています。
hatena_oshirase_05

クリックするとどの記事にはてブが付いたか分かります。
hatena_oshirase_06

ちゃんと、はてブが付いた時に通知が来ているのが確認できましたね。

まとめ

自分のWordPressブログに「はてブ」が付いたのをChromeブラウザに通知する方法でした。
同じ記事に2個ポンポンと付いたの確認したら自分で押して新着に突っ込んじゃいましょう!

新着目的じゃなくても、はてブされてるのが分かるのは嬉しいもんです。