話題(?)のPocket ButtonをWordPressに追加してみたよ

4.25
2013

元はRead it Laterという名前だったそうです

何やら話題の「Pocket」。
「Pocket」とは、気になったページをRead it Later(後で読む)するサービス。

「Pocket」ボタンをブログに追加したら、ソーシャルメディアの情報地下水脈を発見してしまったよ[mi]みたいもん!
いわゆる「あとで読む」系のサービス、以前はInstapaperを愛用していました…

こんな記事を拝見。なんと、ブログの記事が、ひそかにかなりたくさんPocketされているらしい・・・
ということで。

早速「Pocket button」を設置してみました。

ボタンの設置は、Pocketの発行ページからコードを発行できます。

が、ここで普通に生成すると、「pocket」されるページのURLは、自動的に閲覧ページのURLになります。
例えばブログのインデックスページなどのように、閲覧しているページ内にある複数のブログ記事ごとにボタンを並べたい場合は、これだとダメですね。

で、そういう使い方をしたい場合はこちらのページに説明が載ってます。

簡単に言うと、コードの<a>タグのなかに、「data-save-url=”ここにURL”」こんなパラメーターを入れればOK。
WordpressのURL読み込みは、「<?php the_permalink(); ?>」でいけるので、こいつを入れます。

<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
  data-save-url="<?php the_permalink(); ?>"
  data-pocket-label="pocket" 
  data-pocket-count="horizontal"
>Pocket</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>

つまりこんな感じですね。

これで、可変URLでボタンを設置できます。

ボタンを付けて驚いたのは、本当に押されていたこと。
はてブのボタンなんてめったに押されないのに・・・。