Blogger ブログに Pocket ボタンを設置して Pocket Publisher Tools にも登録してみた

このエントリーをはてなブックマークに追加 Pocket

Pocket

Pocket が面白そうなサービスを始めたようですね。


Pocketボタンが可視化する「見えないバズ」とウェブコンテンツの新しい指標 | Lifehacking.jp
しかし 1. 興味をもって、2. 読むつもりで保存して、3. n日後に実際に読んだという「見えないバズ」はどのようにして把握すればいいのでしょうか? その一つの答えを「あとで読む」サービスの Pocket (旧Read it Later)ボタンと、Pocketのパブリッシャーツールが提供してくれています。 ...

ということで、本ブログにも Pocket ボタンを設置して、Pocket Publisher Tools に登録してみました。


Pocket ボタンの設置

Blogger の場合は以下のようなコードになります。

<a href="https://getpocket.com/save"
  class="pocket-btn"
  data-lang="en"
  expr:data-save-url="data:post.canonicalUrl"
  data-pocket-count="vertical"
  data-pocket-align="left">Pocket</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>

上記をボタンを表示したい部分に追記します。 Blogger 固有の部分は a タグの data-save-url 属性の指定方法です。

Pocket ボタンを個別ページにのみ表示する場合は data-save-url を指定する必要はないようですが、エントリ一覧ページにも表示する場合は data-save-url 属性を指定しないと正しく動作しないと思います。

Adding Multiple Buttons Per Page

A common place that you may want to include Pocket buttons is alongside multiple links on your homepage or on an index page that lists several articles. This is easy to support with a slight addition to the code that you've already generated.

In order to support multiple buttons on a page, you place the button code anywhere you would like a Pocket button to appear. Then, for each button, you will need to simply add a data-save-url attribute to the <a> in your button code. The value of this attribute should be the url of the corresponding link that you are placing the button next to.

via Pocket for Publishers: Pocket Button Documentation

2013-05-02 18:31 追記

デフォルトでは Pocket ボタンはブロック要素になりますので、他のボタンと別の行に表示されてしまいます。

そこで、以下のように CSS でインライン要素となるよう指定しました。

<!-- Pocket ボタン用 CSS -->
<style type="text/css">
  .pocket-btn { displayinline}
</style>

2013-05-02 18:31 追記おわり

Pocket Publisher Tools への登録

まずは 登録ページ に必要事項を記入して申し込みます。

次いで、サイト所有者の確認 を行うのですが、ここで躓きました。

サイト所有者の確認には、指定されたファイルのサイトへの配置か、サイトのページへの 指定された meta タグの記載の 2 つの方法があります。 Blogger ではファイルのアップロードができません(よね?)ので、テンプレートファイルに meta タグを追記することになります。

私は指定された meta タグを追記しましたが、確認できないと表示されました。

本ブログは独自ドメインを設定しているのですが、どうやら Pocket はサイト URL としてサブドメインを指定してもルートドメインにアクセスするようです。 私はルートドメイン(DNS)を Blogger 向けに設定していなかったため、以下のページを参考に設定を変更したところ Pocket の確認が成功しました。

A レコード(オプション)
次の操作を行うと、独自ドメイン(例: example.com)を実際のサイト(例: www.example.com)にリンクすることができます。この手順を省略すると、「www」を指定しなかった訪問ユーザーにはエラー ページが表示されます。

example.com という形式でドメイン名を入力し、[A] セクションに IP アドレスを指定します。4 つの異なる Google IP にリンクする、異なる 4 つの A レコードを作成する必要があります。

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

via ブログでカスタム ドメイン名を使用するには - Blogger ヘルプ

なお、ルートドメインへのアクセスをサブドメインにリダイレクトする設定も必要でした。

その後、Pocket から準備ができた旨のメールが届くと、Publisher Tools の Dashboard を表示できるようになります。

登録はしてみたものの

確かに SAVED RANK と IMPACT RANK は一致しません。

▼ SAVED RANK Top 5
Pocket for Publishers Top Content SavedRank 1

▼ IMPACT RANK Top 5
Pocket for Publishers Top Content ImpactRank

まだ解析されたデータが十分ではないことも考えられますので、しばらく様子を見たいと思います。

そのためにももう少しエントリを増やさないとなぁw

関連記事

0 コメント: