webfeelfree

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

img_2014040401

Image by:Pocket

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

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

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

Pocketとは?

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

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

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

Pocket公式サイト

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

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

もっと詳しく知りたい人は、「あとで読む」を便利にするサービス「Pocket」日本語版を使い倒してみた – GIGAZINEをご覧になってみたはいかがでしょうか?

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

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

設置はコードをコピペするだけ

ここからが本題です。

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

Pocket for Publishers: Pocket Buttonにアクセスします。

Pocktボタンのコード取得画面

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

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

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

CSSで調整する

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

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

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

あとがき

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

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

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

参考
WordPress | Pocketボタンの設置

最新記事

読まれている記事

ツイッター

カテゴリー