後で読むサービス「Pocket」ボタンをブログに設置する方法!

公開日:2014年3月11日
最終更新日: 2015年1月21日

pocket_photo_01

こんにちは!

皆さんは「Pocket」ってご存知ですか?
当然、ご存じですよね!
どんなブログでも必ず「Pocket」のボタンが付いていると思います。

こんな感じのボタンです。

pocket_photo_02

今回はこの「Pocket」のボタンをブログに設置する方法を記事にしたいと思います。

目次!

1.そもそも「Pocket」とは?
2.設置の手順!

そもそも「Pocket」とは?

ご存知でない方の為に、説明しておくと「Pocket」とは記事を見ていて、記事の内容に興味はあるけれども時間や場所などの都合で、今ではなく後で読みたい時に使えるWEBサービスです。世間では「後で読むサービス」とか言われてます。

実際に使用したら分かりますが、本当に便利ですよ。

どんな時に便利なのかというと、移動時間などを無駄にしない為に、地下鉄などでスマートフォンを利用していると電車が動き出した途端に電波が繋がらなくなり、記事が読めなくなる時があると思います。そんな時に記事を「Pocket」に登録しておくとオフラインの状態でもスマートフォンで記事を読む事が出来ます。

ユーザーにも便利な機能なら付けておいて損はないですね。

【Pocket】
Pocket公式サイト

設置の手順!

「Pocket」ボタンのコードを取得!

以下のURLにアクセスして下さい。

【Pocket】
Pocket Button

「Pocket Button」から設置したボタンを選択し表示されるコードを取得して下さい。今回は当ブログでも設置している一番右端のボタンを取得したいと思います。

pocket_photo_03

先程、取得したコードを修正!

取得したコードに修正が必要ですので、以下を参考に修正して下さい。

修正前のコード!

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>

修正後のコード。

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink();?>"></a>

「data-save-url=”<?php the_permalink();?>”」を付け足しています。

</body>の前に「javascript」のコードを追加!

「Pocket」ボタンを動作させる為には「javascript」が必要になります。

</body>の前に以下のコードを追加して下さい。

<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

「single.php」にコードを貼り付け!

最後に「Pocket」ボタンを表示させたい箇所に修正したコードを貼り付けて下さい。通常は「single.php」になると思います。

確認!

当サイトでは以下のように表示されています。

pocket_photo_04

簡単に設置できますので、まだ設置されてない方は設置してみて下さい。

最後に!

「Pocket」は非常に便利です。ただ「Pocket」に登録するだけでは全く意味はありません。登録した記事は必ずチェックし、役に立つ記事はまとめて二次利用できるようにしておきましょう。後々、自分の為に役立てないと何の意味もありません。

以上「後で読むサービス「Pocket」ボタンをブログに設置する方法!」でした!

それではまた。

【その他「Pocket」関連の記事です】
Pocketに保存された記事やその保存数が分かる「Pocket for Publishers」に登録!

公開日:2014/03/11
最終更新日: 2015年1月21日
カテゴリー:WordPress

関連記事

新着記事

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly