vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間13万PV〜。

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

      2017/01/31

LINEで送る
Pocket

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

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

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

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

スポンサーリンク

Pocketってなに?

stinger5-pocket2

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

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

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

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

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

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

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

LINKPocket for Publishers: Pocket Button

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

stinger5-pocket3

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

stinger5-pocket4

このコードをサイトの設置したい場所に貼り付ければ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>を丸ごと入れ替えることで順番を変えることができます。

ボタンの設置確認

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

stinger5-pocket5

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

まとめ

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

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

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

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

 - Stinger5, Web

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

New Relicの登録&Ruby on Railsへの導入方法

こんにちは、okutani(@okutani_t)です。本記事では、パフォーマン …

Stinger5で文字色が変更できない!テーマカスタマイザーの削除で解決しました

こんにちは、okutani(@okutani_t)です。先日、Stinger5で …

[Stinger5] 固定ページにSNSシェアボタンを追加する

こんにちは、okutani(@okutani_t)です。私はWordPressテ …

Stinger5にファビコンを設置する方法

こんにちは、okutani(@okutani_t)です。本記事ではWordPre …

Like Boxがサービス終了。「Page Plugin」に変更しておこう

こんにちは、okutani(@okutani_t)です。先日、当ブログにFace …

[Stinger5] スマホレイアウトのナビメニューをカスタマイズしてみよう

こんにちは、okutani(@okutani_t)です。Stinger5のスマー …

[Stinger5] 関連記事の見出しを任意の文字に変更する

こんにちは、okutani(@okutani_t)です。 このサイトはWordP …

Stinger5の導入&子テーマの作成方法

こんにちは、okutani(@okutani_t)です。WordPressはブロ …

Simplicity,Stinger5で超簡単にアイコンを使う方法

こんにちは、okutani(@okutani_t)です。あ、もう一度言いますね。 …

Stinger5にiPhone用のアイコンを設置する

こんにちは、okutani(@okutani_t)です。iPhoneのホーム画面 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。