BloggerにPocketボタンを設置してみた

みたいもんさんで話題にされていたので（「Pocket」ボタンをブログに追加したら、ソーシャルメディアの情報地下水脈を発見してしまったよ）、もばいる坊主にもPocketボタンを付けてみました。

もばいる坊主はBloggerを使ってます。ずっとMTだったんですけどね、結婚以来、MT自体のアップデートに割く時間が惜しくなりまして、ほっといてもメンテされていく場所を探して、その頃GoogleびいきだったのでBloggerを選んだのでした。

さて、設置の仕方。

希望の場所は、記事タイトルのすぐ下。いしたにさん推奨の場所です。zen backは記事の一番下に付いているわけですが、Pocketは一番上に来るわけです。「後で読む」のが基本的な使い方のツールですから、そうですよね、タイトルや最初の数行でビビッと来たらすぐにクリックできる場所に設置するのは分かりやすいですね。

Bloggerのマイ ブログ管理画面、左のメニューから「テンプレート」を選び、「ブログで使用中」の所の「HTMLの編集」をクリックします。

だらだらっとソースが出てきますから、command+fでサーチを出して（Windowsはctrl+fで良いのかな？）、「post-header-line」と入力します。2回ほどenterを叩くと、

<div class=’post-header-line–1’/>

というのが見つかります。ここを以下のように改変します。

 <div class=’post-header-line–1’>
 <b:if cond=’data:blog.pageType == "item"’>
 <a data-pocket-label=“pocket” data-pocket-count=“horizontal” class=“pocket-btn” data-lang=“en”>
 </a>
 <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>
 </b:if>
 </div>

Pocketボタンのコードは変わるかも知れませんので、念のためPocket for Publishers: Pocket Button）にて確認をしてください。

また、post-header-lineかいくつも見つかる場合は、希望の場所に表示されるまでトライ＆エラーです。考えるより試すのが早いです。

b:if condのくだりを削除すると、トップページにもPocketボタンを出るので、希望の場所に出るまでは削除したままにしておいて、「テンプレートをプレビュー」を活用するのが良いかもしれません。うまく表示されたらb:if condのくだりを付け足すと良いかも。/b:ifも忘れずに。この部分は、個別記事ページのみにPocketボタンを表示させるためのおまじないです。

そんなわけで、もばいる坊主の場合はPocketされてる数が大変さみしい事になっています。そもそも他のボタンもほとんど押された形跡がありませんしね。

おかしいな。目から汗が。

あまり気にせず、今夜は休もう。うん。そうしよう。