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

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

Pocket Button
Pocket Button

 

Pocket ってなあに

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

androidアプリや

Pocket
Read It Later
価格:無料
平均評価:4.6(37,953)

iPhoneアプリもあります

Pocket (Formerly Read It Later)

Pocket (Formerly Read It Later)
Idea Shower
価格: 0円
iTunesで見る
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>

楽勝ですね。

 

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

こんなかんじー。
こんなかんじー。

モバイルビューにもつけてみた。

モバイルでもつけてみた
モバイルでもつけてみた

 

ちなみに、IE8以下は表示されません。pocketのページ自体も対応させてないみたいで、そもそも切り捨ててらっしゃるっぽいです。

ホホまとめ

pocketボタンでは拡散は狙えないものの、どれだけの人が記事に興味を持っているか知れる指標になるんじゃないかと思ってます。

ある程度のアクセスがあるブログさんだとつけておくことで

「おー、こんなにpocketされてるんだね」

って感じで読者へのアピールになるんじゃないでしょうか。


投稿日

カテゴリー:

,

投稿者:

コメント

“pocketのソーシャルボタンがリリースされてたのでつけてみた。” への6件のフィードバック

  1. mycolor0523 Avatar

    あとでよむ・

  2. […] pocketのソーシャルボタンがリリースされてたのでつけてみた。 : ホホ冢次男 […]

  3. 後で読むサービス「Pocket」のソーシャルボタン設置方法メモ | カズオノオカズ

    […] […]

  4. 【一行コピペで】Pocketボタンを3分で設置する!!【ソーシャルボタン】 | ブログ | ColorFullWeb

    […] pocketのソーシャルボタンがリリースされてたのでつけてみた。 : ホホ冢次男の記事がケッコウわかりやすめだと思います。   […]

  5. haltec Avatar

    指標としてはGood!

  6. […] pocketのソーシャルボタンがリリースされてたのでつけてみた。 : ホホ冢次男 […]

コメント、してみません?

%d人のブロガーが「いいね」をつけました。