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

こんにちは！

皆さんは「Pocket」ってご存知ですか？
当然、ご存じですよね！

どんなブログでも必ず「Pocket」のボタンが付いていると思います。

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

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

そもそも「Pocket」とは？

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

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

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

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

設置の手順！

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

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

↓「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=””」を付け足しています。

の前に「javascript」のコードを追加！

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

↓の前に以下のコードを追加して下さい。

<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」ボタンをブログに設置する方法！」でした！

それではまた。