Hexo / はてなブログに Amazon Publisher Studio を埋め込んでみたら想像以上に便利

Amazon Publisher Studio とは？

アマゾンが2013年ごろから作成した JavaScript 型のアマゾン・アソシエイト（アフィリエイト）リンク作成ツールです。

Amazon Publisher Studio を使うメリット

今までは、本家アソシエイトサイトに行ったり、カエレバのようなツールを使ってサーバ代さえ稼げれば・・と夢見ながらアフィリエイとのリンクを作成していました。が、Publisher Studio を使えば、ブログ内の画像という画像に好きなアマゾンアソシエイトのリンクを埋め込むことができます。本来の記事の美観を損なわずにリンクを作れるというのは大きな利点ではないでしょうか？

例えばこんな感じ

なんでもない Docker の GUI キャプチャにだって、参考書のリンクを埋め込められます。魔法です。

設定方法

アマゾン側での準備

本家アソシエイトサイトに行って、Publisher Studio の管理へ進みます。 新規サイトの登録から、好きなサイト／サービス名を入力してJavaScriptを生成するをクリック。

次に、下に現れた JavaScript をクリップボードにコピーします。

最後に、この JavaScript を有効化します。ツールバーを有効にするをクリック。

ちなみに詳細設定内の他のものはデフォルトから変更していません。次に、サイト内にこれを埋め込みます。

はてなブログ編

ブログ管理画面から「デザイン」＞「カスタマイズ」へすすみ「フッタ」を選択

カスタマイズ＞フッタ

フッタを選択して先ほどの JavaScript をそのまま貼り付けて、変更を保存するで完了です。

自分のはてなブログのトップページに戻ると、amazonpublisherstudio というバーが現れているはずです。

ログインを押して、アマゾンのでログインします。

すると、画像だと判別された場所の上にマウスを当てると、リンク作成用検索バーが現れます。試しに2017年1月末時点で最新と思われる Docker 入門書 - Docker入門を埋め込んでみました。＊ちなみに本書はタイトル通り本当に初心者向けに書かれた内容となっており、まだ Docker に触ったことがない、もしくはググりながら動かせてはいるが、基礎を体系的に知っておきたい、という読者には程よい内容でした。

確認します。シークレットモードでブラウザを開き直します。こんな感じです。

Hexo ブログ編

ニーズがあるかわかりませんが、少なくとも Hexo / Github Pages を使う方は、おそらく広告やアフィリエイト誘導が少ないほうが好きなんだと思います。　思いっきり今すぐ購入すると出てきますが、レイアウトのノイズは減らせるんじゃないかなと。

私の利用している landscape のテーマを例に設定方法を見てみます。実施するのは、はてなダイアリーと同じくフッタへのコード追加です。

vi themes/landscape/layout/_partial/footer.ejs

<footer id="footer">
  <% if (theme.sidebar === 'bottom'){ %>
    <%- partial('_partial/sidebar') %>
  <% } %>
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %><br>
      <%= __('powered_by') %> <a href="http://hexo.io/" target="_blank">Hexo</a>

<!-- Start of Amazon Publisher Studio Loader -->    <script>  window.amznpubstudioTag = "hogehoge-22";  </script>    <!-- Do not modify the following code ! -->  <script async="true" type="text/javascript" src="http://ps-jp.amazon-adsystem.com/domains/hogehoge-22_eb08f220-59e2-4a2d-b8d8-186be420abe.js" charset="UTF-8"></script>    <!-- End of Amazon Publisher Studio Loader -->

    </div>
  </div>
</footer>

汚く貼り付けていますが、以上です。
hexo clean ＞ hexo d -g すれば同じようにトップにバーが現れ、ログインする流れになります。

その他

この JavaScript はだいたい 2-400 msec ほど使って読み込まれていました。 Developer Tool 一記事全体の読み込みが 4-5sec であることを考えると誤差かと。

あと、

ヘッダに埋め込んでもいいけどフッタのほうが記事より後に読み込まれるため、読者にとって嬉しい

とのブログ記事をある方が書かれていましたが、ソースが見つけられませんでした。おっしゃるとおりだと思います。

本人認証の仕組みがわかっていませんが、amazon にログインしたことのないブラウザで試してみたところ、表示されませんでした。（もちろん hatena にはログイン済み）
おそらく埋め込んだサイトにアクセスしたタイミングで、アソシエイトの ID と紐付いたセッション情報をクッキーからとってくるのでしょうか。

ちなみに私の場合、はてなも hexo も画像は以前ご紹介したように Cloudup 経由で貼っていますが、問題なくリンクを埋め込められています。