今更だけどPocketボタンをStinger2へ埋め込んでみた。

どうも、こんにちわ
みなさんブログにPocketのボタンはもうつけましたか？
TwitterやFacebook、Google、はてぶ、などなど様々なソーシャルがありそれを駆使してブログ運営をしてる人はたくさんいると思いますが、今は拡散よりタイトルや抜粋を読んで、Pocketで保存してあとで読む人が実はかなりいっぱいいるのではないかと思います。
そこで今回はPocketボタンを設置してみました。
Pocketを知らない人はここが解りやすいかも

いつ読むの？あとでしょ！「Pocket」いまこそ入門 – Six Apart ブログ Pocketって何？

ボタンがない時のポケットの方法

まずはブログなどにポケットボタンを設置してないとどのような動きでポケットに保存するかというと、iPhoneであれば、アドレスをコピーして、ポケットアプリを起動して、コピーしたアドレスが自動出ててくるのでそこから追加する方法。
パソコンであればやはりアドレスをコピーしてからポケットのサイトから追加する方法。
Firefoxなどのアドオンで保存する方法、RSSリーダーアプリから直接保存する方法などがありますが、どの方法でもひと手間かかってしまいます。

まずはボタンのコードを入手

ボタンの形は3種類ありただのボタン、件数表示してくれるボタン、このサイトに設置してる、大きなサイズのボタンです。
Pocketのサイトからコードを入手しましょう。

Pocket for Publishers: Pocket Button

ソースはこんな感じです。これでボタンの上にPocket数が表示される一番大きなやつを導入することができます。
どうもボタンの種類は「data-pocket-count=”vertical”」ここでかえれるっぽいです。
[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>
[/html]
ソースの変更箇所は、ヘッダー(header.php)と単一記事(single.php)です。ソーシャルボタンなどが記述されている箇所はすぐにわかると思いますがそこに追加しましょう。並び順や別のソーシャルボタンとの置き換えなんかもソースの書き順を変更して行います。
僕は今回、単一記事では、「ツイッター、フェイスブック、Pocket、Google＋、はてなブックマーク、Feedly」の順に配置しています。
固定ソーシャルボタン（ヘッダーの中身）は、「ツイッター、フェイスブック、Pocket、はてなブックマーク」の４つにしました。
これはiPhoneで表示した時に4つ＋ページトップへ戻るボタンを配置すると横幅がいっぱいになってしまうからです。
追尾のソーシャルボタンバー

単一ページの表示

iPhone表示

まとめてみると

拡散はとても大切なアクセスですが、Pocketしてくれるということは読みたい記事ということなので非常に嬉しい反応です。ぜひPocketボタンをブログに設置してみましょう。
タイトルを見て保存とか僕もやっているのでいかにタイトルが大切かを改めて感じていますがネーミングセンスなさすぎて…。

PRを含む記事があります、また、アフィリエイト広告を利用しています。

誤字・脱字をはじめ全てのお問い合わせは、こちらへお願いします。
写真撮影、動画撮影のお誘いなど大歓迎です。
定期的な購読はRSSにご登録お願いします。
掲載している写真の個人的利用、保存はOKですが、複製、再利用、営利目的の利用は辞めてください。