Pocket(旧Read It Later)に追加するボタンをブログに設置する方法

スポンサーリンク

Webサイトやブログを運営していると必ずといっていいほど見かけるソーシャルメディアへの共有ボタン。Footlightでも「はてなブックマーク」「Twitter」「Facebook」「Google+」の4つを設定していました。

で、今回もう一つボタンを追加しました。昔は「Read It Later」という名前だった「Pocket」ボタンです。

 
Pocketのイメージ

このページの目次

Pocketとは?

Pocketとは、気になったページを後で読むためにクリップしておくサービスのことです。長文の記事や、あとで何度でも見返したいほどの記事がたまにあると思います。

Pocketはそういった記事を保存しておけるサービスです。私は存在だけ知っていて、ほとんど使っていませんでした。ただ、しゅうまいさんが書いた以下の記事を見ると、思いの外使われているようなので、追加した方がいいと判断して、早速Pocketボタンを追加しました。 

「Pocket」(旧Read It Later)に追加するボタンをブログに付けよう | しゅうまいの256倍ブログ neophilia++

 

Pocketボタンを設置する方法

設置しないといけないなぁ、でも面倒だなぁ・・・と思っていましたが、実際やってみたらめちゃくちゃ簡単でした。

Pocketのサイトにあるコードをコピペするだけです。

コードは「Pocket for Publishers: Pocket Button」のサイトに行くと取得できます。

pocketボタンのコード

わざわざ、サイトに行ってコードをコピーするのも面倒だと思うので、左側のPocketボタンからコードを貼っておきます。サイトにレイアウトに合わせて利用してくださいね。

ボタンのみ

<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

ボタンと右に件数表示

<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

ボタンと上に件数表示

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

コードをよく見てみると、aタグのdata-pocket-count属性の値だけが違うことが分かると思います。

実際に設置してみたら、以下のような感じになりました。

pocketボタン設置

うん、いい感じですね。

ユーザーの保存先の選択肢を増やす重要性

記事をあとで読みたいというニーズは多いと思います。私は今でこそフリーランスになり、時間の制約が会社員時代よりもゆるくなった分、いつでも読みたい時に読めています。でも、会社に勤めていた時は、通勤の時に複数の記事を短時間で読みたかったので、いい記事だけど長すぎて今読むのはちょっと・・・というケースがありました。

こういった場合の保存方法はいろいろとありますが、サイトやブログ側で複数の選択肢を用意しておくことはとても大事なことです。

でも・・・運営者の本音を言うと、あとで読みたい時ははてなブックマークに保存して欲しいです!はてなブックマークに保存して、Twitterと連動させて欲しいですね。

それはさておき。まだまだ始まったばかりのFootlight、ほとんどアクセスがありません。前回書いた記事「ソーシャルメディアだけでなく、ブログも書くべき理由」でも言ったように最初が大変ですが、質の高い記事を書き続けて、Pocketやはてなブックマークに保存してもらえるようにいけるようにしていきたいです。