あとで読むサービス Pocket に送るボタンをブログに設置してみました

2013年4月20日2013年11月26日

毎度です、 @Ebba_oBL です。

iPhone はもちろん、Mac でも愛用している「あとで読むサービス」に Pocket というサービスがあります。前身が Read it Later という物だったのですが、いつの頃か Pocket という名称に変更されたものです。

スマートフォンでチェック(Pocket)したものをパソコンやタブレットで確認したり、またその逆も手軽に行えるのでブログネタに参考にしたい記事などには重宝しています。

資料として残しておきたい物は Evernote にクリップするのですが、Pocket から Evernote へ送る事もできますので、まずは Pocket にガンガン突っ込むという使い方をしています。 iOS 、Mac は勿論、Android や Web 版も用意されています。

iOS

Pocket (Formerly Read It Later) (Version 4.5)
	カテゴリ:	ニュース
	価格:	無料 (最新価格はStoreで確認してください)
	現Ver.の平均評価:	(4.5 / 8件の評価)
	通算の平均評価:	(4.5 / 1,845件の評価)

Mac

Pocket (Version 1.5.0)
	カテゴリ:	ニュース
	価格:	無料 (最新価格はStoreで確認してください)
	現Ver.の平均評価:	(5 / 1件の評価)
	通算の平均評価:	(4.5 / 179件の評価)

Android

Pocket
Read It Later
価格：undefined　　平均評価：4.6（38,215）

Web

Pocket (Formerly Read It Later)

ブログに設置できるボタンが公開されていました

さてそんな Pocket をもっと便利に利用できるサイト用のボタンが公式に公開されている事を、( @hayashikejinan ) さんのブログで知り、ボクも早速設置してみることにしました。

pocketのソーシャルボタンがリリースされてたのでつけてみた。 : ﾎﾎ冢次男

公式で公開されているコードは以下のような物です。

 <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a><br />
<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");</javascript>

これをこのまま貼っても大丈夫なようなのですが、今回は　ﾎﾎ冢次男さんで紹介されている WP のテンプレートタグが利用された物を使いました。一番大きなボタンを採用しましたので、ソースは以下の通り。

<a href="https://getpocket.com/save"
class="pocket-btn"
data-lang="en"
data-save-url="<?php get_permalink(); ?>"
data-pocket-count="vertical"
data-pocket-align="left" >Pocket</a></p>
<p><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><br />

data-pocket-count を none , horizontal , vertical と入れ替えるだけでボタンサイズの変更が可能です。