後で読むためのサービス「Pocket」に送るボタンを設置！表に出ていなかったリアクション数がわかって面白い！

投稿日：2013/05/04

@Mori2ndです。ブログの記事などを後で読むためのサービス「Pocket」。

Pocket (Formerly Read It Later)

いつの間にかブログに設置できるボタンができていて、ブロガーの間で話題になっているではありませんか。

今までTwitterやFacebookといったSNSサービスの方はリアクション数を把握しやすかったんですが、後で読むためのPocketに送られると全然わかりませんでした。

私も表にでて拡散してもらったほうが反応がわかってうれしいですが、「後で読む」行為というのもブログの記事に興味をもってくれた証拠。それが、このボタンで把握できるというのはいいですね！

ということでさっそく設置してみましたよ！

「Pocket」に送るボタンをデスクトップとスマホ向けそれぞれに設置

まずは設置した状態をみていただきましょう。

▼デスクトップ向け

▼スマホ向け

記事公開時の状態ですが、このようにPocketボタンを設置してみました。

他のボタンとも馴染んでイイ感じです。

スマホ向けのほうは横幅が限られているので、悩みましたが以前設置した「LINEに送る」ボタンと並べております。

これでPocketへ送り込まれた数が一目瞭然になりました。

Pocketボタンを設置する方法

Pocket for Publishers: Pocket Button

上記サイトに行き、3種類あるボタンから好きなのを選んで、コードを表示したい場所に貼付ければ基本的にOK。

URLを正しく読み込んでくれない時は、指定したらいいようです。

当ブログはWordPressを使っているので、表示中のURLを取得するコードを念のため追加してみました。

; html-script: false ]
&lt;a data-pocket-label=&quot;pocket&quot; data-pocket-count=&quot;horizontal&quot; class=&quot;pocket-btn&quot; data-lang=&quot;en&quot; data-save-url=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;/a&gt;
&lt;script type=&quot;text/javascript&quot;&gt;!function(d,i){if(!d.getElementById(i)){var j=d.createElement(&quot;script&quot;);j.id=i;j.src=&quot;https://widgets.getpocket.com/v1/j/btn.js?v=1&quot;;var w=d.getElementById(i);d.body.appendChild(j);}}(document,&quot;pocket-btn-js&quot;);&lt;/script&gt;

; html-script: false ]

▼URLを指定している箇所はこちらです。(個別記事用)

; html-script: false ]
data-save-url=&quot;&lt;?php the_permalink(); ?&gt;&quot;

1 2	; html-script: false ] data-save-url="<?php the_permalink(); ?>"

以上、いかがでしたでしょうか。

Pocketに送るボタンが設置できましたので、じゃんじゃん使っていただけるとうれしいです。

さらに、後で読んで気に入ってもらえたらSNSでのシェアもしていただけると飛んで喜びます！

[via frasm , A!@attrip]