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>を丸ごと入れ替えることで順番を変えることができます。