Pocketボタンの設置が思いのほか簡単だった-ちょっとしたCSS付き-

Image by:Pocket

先月、正式に日本語版がリリースされた「Pocket」。

いろんなブログさんで、Pocketボタンを見るようになりましたね。
私自身、なんのボタンなんだろうぉ～？って、見初めのころは思っていました。

試しにというか、実験的にPocketボタンを設置してみて、FacebookボタンやTwitterボタンなんか比較にならないほど簡単に設置できたので、記録メモしていきたいと思います。

このページの目次

Pocketとは？

その前に、「Pocket」とは、何ぞや？という話ですよね。

今回、記事を書いておきながら「Pocket」は使っておりませーん。
すいません。
私事はここまでで。

Pocketは、「あとで読む」が便利になるサービスです。

時間がないからあとで読もう、もう一度あとから見ようなど、気になって保存した記事(url)をリスト化して見やすく、そして、記事をシンプル表示して見やすくしてくれるWEBサービスです。

無料で使うことができますし、スマホやブラウザのアプリなど保存方法・閲覧媒体も多様に用意されています。

あと少し大事なことかもしれませんが、FacebookやTwitterなどソーシャルメディアではありません。
今後、どのように変化していくのかわかりませんが。

じゃあ、いろんなブログさんは、なぜ？Pocketボタンを設置するのか？
それは、人気記事の指標というのもありますが、いろんな人に書いた記事を有用に、有意義に見てもらいたいからだと思います。

ここからが本題です。

設置は、Pocketのアカウントを持っていなくても設置できます。

ページに移動したら、3種類あるボタンの中から一つ選んで、下に表示されるコードをコピーします。

あとは、自分のサイトの表示したい箇所にコードをペーストして完了です。

もし、サイトの表示速度が、気になるようなら<script>～</script>の部分を</body>の直前に移しましょう。

設置したら、設置したサイトに馴染むように位置の調整なども必要になってきますよね。

Pocketの場合、先ほどコピペしたコードの中にclass="pocket-btn"が含まれているので、それを利用しましょう。

例

.pocket-btn{
  width: 80px;
  margin-left: 10px;
}

TwitterやFacebookなど、いろんなソーシャルボタンやWEBサービスのボタンがあって、どれを設置していいのか悩むところだと思います。
あれこれ、設置するのではなく、自分のサイトに訪れてくれる人が、これがあれば便利だろう～っていう、ボタン構成で選ぶことをおススメします。

その中で、Pocketボタンが必要だ！となったときに、この記事が、役に立てたら有難いです。

私もPocketを使ってみたと思います。