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

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

こんにちは！

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

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

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

目次！

1.そもそも「Pocket」とは？
2.設置の手順！

そもそも「Pocket」とは？

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

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

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

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

【Pocket】
Pocket公式サイト

設置の手順！

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

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

【Pocket】
Pocket Button

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

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

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

修正前のコード！

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

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

それではまた。

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

関連記事

新着記事