Pocketボタンをサイトに設置してみよう！Stinger5編

2015/05/17 2017/01/31

Pocket

こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェアボタンにPocketを追加してみました。

私はWordPressのStinger5テーマを使って当ブログを運営しているので、その追加方法を例に説明していきます。

また、Pocketの存在は知っていたのですが利用したことはなかったので、どんなサービスなのかも一緒に調べて載せておきました。

では、Pocketってなに？＆設置方法の2つをみていきましょう。

1 Pocketってなに？
2 Pocketで読むボタンのコード取得
- 2.1 Stinger5にPocketを設置
- 2.2 ボタンの設置確認
3 まとめ

Pocketってなに？

Pocketは、後で読みたいWebサイトを保存して、PCやスマホからオフラインでも読みなおすことができる便利なサービスです。

さらに、Pocketで保存したサイトは簡単にSNSでシェアすることもできるため、Pocketで保存するボタンを自分のサイトに設置することでSNSでの拡散も期待できます。

Pocketを利用するユーザーは多いので、ブログサイトにはぜひ設置しておきたいですね。

また、Pocketは他のSNSサービスに比べて押されやすい傾向にあるようです。押された数が見えるボタンで設置すれば、サイト運営者のモチベーション向上にも繋がりますね。

では実際にPocketボタンの設置用コードを取得していきましょう。

Pocketで読むボタンのコード取得

Pocketボタンのコードを取得します。下記サイトにアクセスしましょう。

LINKPocket for Publishers: Pocket Button

設置したいボタンの形を選択しましょう。今回は一番右のボタンを選択しました。

Pocketボタン設置用コードが表示されるので、コピーします。

このコードをサイトの設置したい場所に貼り付ければOKです。

Stinger5にPocketを設置

今回はStinger5を例に設置方法を説明していきます。sns.phpに下記の位置の通りPocketのコードを貼り付けましょう。

<div class="sns">
  <ul class="snsb clearfix">
    <li> 
      Twitterボタンのコード
    </li>
    <li>
      Facebookボタンのコード
    </li>
    <li>
      Google+ボタンのコード
    </li>
    <li> 
      はてブボタンのコード
    </li>
    <li>
      先ほど取得したPocketボタンのコード
    </li>
  </ul>
</div>

これでPocketボタンを設置することができました。

また<li></li>を丸ごと入れ替えることで順番を変えることができます。

ボタンの設置確認

ちゃんと設置できたか確認してみます。

無事にPocketボタンを設置することができました。

まとめ

PocketはPCやスマホでオフラインでも後で読むことができるサービス。

コードを貼り付けるだけで設置できて簡単ですね。ぜひ試してみてください。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

Pocketで保存されるとボタン上の数字が増えていくので、ブログを書くモチベーションもあがりますね。SNSボタンも増えて色とりどり。

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- Stinger5, Web