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

いやー全然知らなかったです、ボタン、あったんですねぇ。

Pocket ってなあに

そもそもですね。ざっくりいうと、あとで読むリストをつくるサービスです。

androidアプリや

Pocket
Read It Later
価格：無料
平均評価：4.6（37,953）

iPhoneアプリもあります

Pocket (Formerly Read It Later)
Idea Shower
価格： 0円

posted with sticky on 2013.4.20

Pocket Button の設置方法

公式のボタン作るページへ行って3種類の中から選ぶだけ。これ簡単。

ボックスタイプならこうですね。スクリプトはフッターにでも置いとくとさらによいか。

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

wordpressの場合

wordpressだと今見てるページにしなきゃいけないですよね！

…と思いきや上のコードで普通に対応してました(；´∀｀)

ただまぁせっかくなんでドキュメント通りにやりましょう。簡単ですね。

パラメータは今のところ3つだけ、

data-save-url: ポケットさせたいURLを指定
data-pocket-count: ボタンの形式。none, horizontal, vertical の3種類。
data-pocket-align: data-pocket-countにhorizontalを指定した時だけ有効。ボタンを右側整列したときに right を指定しないとカウントが正しく表示されないんですって。

将来的には data-lang で言語指定できるようになるんでしょうねきっと。

ボタン形式 none

表示はこんな感じ。Pocket// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
//

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

ボタン形式 horizontal

Pocket// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
//

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

ボタン形式 vertical

Pocket// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
//

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

楽勝ですね。

早速つけてみましたよ(´∀｀)