Pocketボタンをサイトに設置してみよう！Stinger5編
2017/01/31
こんにちは、okutani(@okutani_t)です。今回はサイトのSNSシェアボタンにPocketを追加してみました。
私はWordPressのStinger5テーマを使って当ブログを運営しているので、その追加方法を例に説明していきます。
また、Pocketの存在は知っていたのですが利用したことはなかったので、どんなサービスなのかも一緒に調べて載せておきました。
では、Pocketってなに？＆設置方法の2つをみていきましょう。
スポンサーリンク
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やスマホでオフラインでも後で読むことができるサービス。
コードを貼り付けるだけで設置できて簡単ですね。ぜひ試してみてください。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
