Pocketボタン設置方法、任意のURLの指定

Read It Later社の「あとで読むサービス」Pocketのボタンをサイトに設置する方法、任意のURLの指定。

Pocketボタン導入

あとで読むサービス Pocket を使っている人はあまりいないだろうと思い、今までサイトにPocketボタンを設置していなかったが、最近（2017年）いくつかのサイトを見るとPocketボタンに表示されている数字が意外と大きいことに気づいた。
当然 Google+1 より数字が大きく、記事によっては Facebook のいいねより数字が大きい。
そこでPocketボタンをサイトに付けることにした。

Pocketボタンの公式ジェネレーターはどこにあるのか探したら、トップページの「開発者向け」ではなく「出版社向け」にあった。
https://getpocket.com/publisher/button
ボタンのスタイルは3種類あり、使いたいスタイルを選び、表示されるHTMLコードをサイトに貼るだけで簡単に設置できる。

【コードの例】

<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>

3種類ともコードはほぼ同じで、スタイルを指定する data-pocket-count だけ異なり、none は 数字なし、horizontal は横（水平）、vertical は縦（垂直）となっている。
コードを見ると <script>要素を生成しているようで、<script>要素をカウントするようなスクリプトがあると誤動作する可能性もある。

任意のURLを指定する

上述のジェネレーターではページのURLを指定する必要がなく、ボタンを貼ったページのPocket保存数が自動的に表示される。
ただ、任意のURLを自分で指定したい場合もある。
その場合は、<a>要素内に data-save-url 属性を追加し、以下のように記述する。

【http://example.com/ を指定した例】

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="http://example.com/"></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>

詳しくは https://getpocket.com/publisher/button_docs に書かれている。

というわけでPocketボタンを導入し、Twitterのツイートボタンは削除した。
ツイートボタンはツイート数が表示されなくなったので、サイト運営者としては面白くない。
まあ、APIを使えば表示できなくもないが。
やはりSNSのボタンは数字が表示された方が面白い。
ツイートボタンがあってもなくてもツイート数はあまり変わらないだろう。