AmazonアフェリエイトリンクをHugoブログに追加するShortCodeを書いた
はじめに
このブログの運営費は大体年間2400円ぐらいです。 内訳としましては、Amazon AWS利用料が毎月100円切るぐらい。Google Domainが年間1400円です。
構成としては、Hugoで作った静的サイトをAWSのS3バケットに追加してCloudFrontで配信しています。
こうした背景もあり常に赤字を垂れ流すこのブログは僕の趣味以上のものではありません。 Google Adsenceを貼って運営費の足しにしたいのですが、一日20人ぐらいしか見ていないブログの広告収入なんて数十円が関の山です。
ブログのアクセス数向上も必要ですが、収益化の仕組みをもう1つ追加するためAmazonアフェリエイトプログラムに参加しました。 今回の記事では、Hugoで作ったブログ記事の最後にアフェリエイトリンクを表示するところまでを行います。
アフェリエイトリンクの自動生成
Hugoブログ各記事の末尾にAmazonアフェリエイトリンクを貼り付けためにShortCodeを作成します。
商品データの作成
dataというフォルダをcontentやlayoutsと同列の階層に作成します。 その中にamazon_products.tomlという名前でファイルを作成してください。
中には商品データとタイトルを詰めます。おすすめ理由などを追加してもよいかもしれないですね。 データの構造としてはこのような書き方をしています。
[[products]]
title = "ルールズ・オブ・プログラミング ―より良いコードを書くための21のルール"
id = "4814400411"
[[products]]
title = "姫乃ちゃんに恋はまだ早い 1巻"
id = "B07N7553DJ"
[[products]]
title = "姫乃ちゃんに恋はまだ早い 2巻"
id = "B07TJQ6N12"
ID自体は、登録情報のASINを使って貰えればよいです。 より確実なのは商品URLの中にhttps://~~~/dp/XXXXXXXXとなっているXXXの部分がID部分となります。
これでひとまず事前準備は完了しました。続いてアフェリエイトリンクを作成していきましょう。
shortCodeの作成
config.tomlの中にアソシエイトIDを埋め込んでおきます。 例えばこんな感じです。
[Params]
amazonJpAffiliate = "kenpos010-22"
各ブログ記事が入っているフォルダからlayouts/shortcodesの中にrandom_amazon_product.htmlというファイルを作成しておきます。 中身はこんなふうに書いています。
{{ $products := shuffle .Site.Data.amazon_products.products }}
{{ $requestedCount := int (.Get "count" | default "1") }}
{{ $count := cond (le $requestedCount (len $products)) $requestedCount (len $products) }}
{{ range $i, $product := $products | first $count }}
{{- $tag := .Site.Params.amazonJpAffiliate -}}
<div class="amazon-widget">
<a href="https://www.amazon.co.jp/gp/product/{{ $product.id }}/?tag={{ $tag }}"></a>
<div class="amazon-widget-img">
<img src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN={{ $product.id }}&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL350_&tag={{ $tag }}" />
</div>
<div class="amazon-widget-info">
<span class="amazon-widget-title">
{{ $product.title }}
</span>
<span class="amazon-widget-synopsis">
{{ $product.synopsis }}
</span>
<span class="amazon-widget-via">
<img src="https://www.amazon.co.jp/favicon.ico" />
amazon.co.jp
</span>
</div>
</div>
{{ end }}
簡単に解説を追加しておきます。
{{ $products := shuffle .Site.Data.amazon_products.products }}
この行では、.Site.Data.amazon_products.productsで指定されるAmazonの商品データをランダムに並べ替えて $productsに格納しています。
{{ $requestedCount := int (.Get "count" | default "1") }}
後で表示する商品の数を決定するために追加しました。ShortCodeを呼び出す際に指定します。
{{ $count := cond (le $requestedCount (len $products)) $requestedCount (len $products) }}
要求された商品数（$requestedCount）と実際の商品データの数（(len $products)）を比較しています。 要求された商品数が実際の商品数以下であればそのまま $requestedCountを、それを超えていれば実際の商品数を $countに格納しています。
{{ range $i, $product := $products | first $count }}
countの数だけランダムに並べ替えられた商品から商品データを取得しているところです。
{{- $tag := .Site.Params.amazonJpAffiliate -}}
この行では、Amazonアフィリエイトのタグをサイトのパラメータから取得して $tagに格納しています。
残りの部分は、各商品のデータを用いてHTMLを生成しています。 やっている内容はこんなところです。
- 商品のリンク作成。
- 画像のURLを使用して商品の画像を表示。
- 商品のタイトルと説明文を表示。
- Amazon.co.jpのファビコンとテキストを表示。
ShortCodeの読み出し
好きなところに貼ってもらえば良いですが、ShortCodeのタグを追加します。 私は、single.htmlの最後の方に追加しています。
{{ .Page.RenderString "< random_amazon_product count=6 >" }}
実行時は、"< random_amazon_product count=6 >" という部分を {{ }} で囲んでください。
このブログの構成の場合、実行されてShortCode扱いになってしまうので、このような書き方になっています。
cssの編集
style.cssをいじっていきます。
.amazon-widget {
margin: 2rem 0;
max-width: 480px;
position: relative;
}
.amazon-widget a {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.amazon-widget-img {
border: 1px solid #E1E8ED;
border-radius: 15px 15px 0 0;
text-align: center;
}
.amazon-widget-img img {
border: none;
margin: 0 auto;
max-height: 200px;
padding: 16px;
}
.amazon-widget-info {
border-right: 1px solid #E1E8ED;
border-bottom: 1px solid #E1E8ED;
border-left: 1px solid #E1E8ED;
padding:5px 10px 10px 10px;
border-radius:0 0 15px 15px;
}
.amazon-widget:hover .amazon-widget-info {
background-color: #E1E8ED;
}
.amazon-widget-title {
font-weight: bold;
display:block;
}
.amazon-widget-via {
color: #aaa;
}
.amazon-widget-via img {
border: none;
width: 18px;
height: 18px;
margin: 0;
padding: 0;
display: inline;
vertical-align: text-bottom;
}
実行結果
このような感じに表示されました。 レイアウトを変更したい場合は、CSSをイジってください。
まとめ
各記事にアフェリエイトリンクを貼り付けられるようになりましたね。 他にはタグや記事の内容からリコメンドする商品を買えたりと色々できそうなことはありますがまずはこの形で良いかと。
amazon.co.jp
