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
  • このエントリーをはてなブックマークに追加

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

[Stinger5] デフォルトのツイートボタンからブログ名を含めて投稿する

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

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

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

noindexを使ってサイト評価を下げない方法

こんにちは、okutani(@okutani_t)です。僕はブログ記事を書くとき …

「Vimium」でマウスなしブラウジング!ネットサーフィンが捗るよ

こんにちは、okutani(@okutani_t)です。Chrome拡張機能の『 …

WordPressにFeedlyを設置しよう!Feedlyボタンの設置方法3つ

こんにちは、okutani(@okutani_t)です。ブログを運営する上で行っ …

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

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

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

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

Google Chromeでかんたんに『キャッシュを削除する』方法

こんにちは、okutani(@okutani_t)です。かんたんなTipsですが …

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

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

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

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

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