Amazon PA-API表示制限を喰らったのでカッテネを導入

wordpress
出典:https://unsplash.com/
この記事は約7分で読めます。
Sponsor Link
Sponsor Link

どうやらAmazonのPA-APIの制限に引っかかったらしく商品画像などが取れなくなった
そこで検索を掛けて見つけたwebfoodさん作成のカッテネを導入してみました

導入

導入が簡単なのはwordpressですが、それ以外でも使用することが出来ますよ

wordpressの場合

WordPressを使っている場合はプラグイン追加からkatteneを検索してインストール 有効化をしておきましょう

それ以外の場合

それ以外の場合はHTMLを書いて公式サイトにあるCSSをダウンロードもしくは開いてコピー
それをご自身のサイトのHTMLやCSSファイルに追加です

使い方

自分がWoedpressで使用しているため、それについての使い方です
ショートコードを以下のように書いて個々にアドレスなどをコピーしていく感じですね

[kattene]
{
"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"
},
{
"color": "blue",
"url": "【商品のURL】",
"label": "Kindle"
},
{
"color": "red",
"url": "【商品のURL】",
"label": "楽天"
},
{
"color": "green",
"url": "【商品のURL】",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "【商品のURL】",
"label": "audiobook"
}
]
}
[/kattene]

当サイトの場合はAmazon、楽天、Yahooショッピングを基本とし必要であれば公式サイトなどを追加して使っています
個々人で必要な数やサイトなどが違うと思うので、自分にあったようにラベルを変更して使いましょう
各種アフィリエイトURLを作成 コピー&ペーストをしてくる必要はありますが、現状5つまでは個別に作ることが出来ます

このショートコードを毎回書くのは流石に面倒だと思うので、このコードをショートコード化したりAddQuicktagを使うと良いですよ

URLの取得

まずは自分のAmazonアフィリエイトへログインをして記事へ挿入したい商品リンクを検索します
商品リンクを選び
amazon afii

検索キーワードを記入して検索
amazon afii
出てきた検索結果から挿入するものを選んで赤枠のリンクを作成をクリックします

商品画像を挿入するためにデザイン変更とカスタマイズを画像のみに変更をし画像部分で右クリックメニューから画像アドレスのコピーをクリックしてURLアドレスをコピーします
amazon affi 画像アドレスコピー
ここでコピーしたアドレスを上のショートコード"image": "【画像URL】"部分へペーストします
タイトルは商品タイトル、説明はメーカー名などを記入しておくと良いと思います

あとはそのページへのアドレスをコピペすれば完了です
amazon affi 商品リンク
この時商品リンクのHTMLを取得するを画像のようにリンク又は短縮URLに変更しておくと楽ですよ

詳しいやり方などは公式サイトで確認してみてください

Sponsor Link

表示スタイル

Cocoonで使っている商品リンクのスタイルに合わせて変更をしています
公式サイトでの説明でも書いてありますが、本当は子テーマを作成しそこへ変更したstyle.cssを追加するのが良いと思いますが
面倒くさかったのでローカルにダウンロードしておいて修正後アップロードする形にしました(ついでにミニファイ化)

この方法だとプラグインのバージョンアップがあった場合、当たり前ですが上書きされます
なのでローカルにも置いておいてまたアップロードして上書きする形ですね

変更した部分は以下の通り

メイン枠

- .kattene{border:1px solid rgba(0,0,0,0.1);border-radius:3px;padding:10px;padding-bottom:5px;margin-bottom:1em;box-sizing:border-box}
+ .kattene{border:5px double #ddd;border-radius:3px;padding:10px;padding-bottom:5px;margin:1em;box-sizing:border-box}

ボタン上部のマージン

- .kattene .kattene__btns{margin-top:.5em}
+ .kattene .kattene__btns{margin-top:.8em}

PC表示時の枠幅自動変更とマージン調整

@media screen and (min-width: 901px) {
    - .kattene{display:table;width:100%}
    + .kattene{display:table;width:auto}

    - .kattene .kattene__description{margin-bottom:4em}
    + .kattene .kattene__description{margin-bottom:5.5em}
}

各ボタンを一纏め、ホバー色変更

- .kattene__btn.__orange{background-color:#FF9901;-webkit-box-shadow:0 5px 0 #cc7a01;-moz-box-shadow:0 5px 0 #cc7a01;box-shadow:0 5px 0 #cc7a01;-o-box-shadow:0 5px 0 #cc7a01;-ms-box-shadow:0 5px 0 #cc7a01;margin-bottom:5px;border-radius:3px;text-align:center}
+ .kattene__btn.__orange,.kattene__btn.__red,.kattene__btn.__green,.kattene__btn.__blue,.kattene__btn.__pink{color:#969696;background-color:#fcfcfc;margin-bottom:5px;border:1px solid #adadad;border-radius:3px;text-align:center}

- .kattene__btn.__orange:hover{background-color:#cc7a01}
+ .kattene__btn.__orange:hover{background-color:#de8b04}

- .kattene__btn.__red:hover{background-color:#9b0003}
+ .kattene__btn.__red:hover{background-color:#d63535}

- .kattene__btn.__green:hover{background-color:#099766}
+ .kattene__btn.__green:hover{background-color:#e60033}

- .kattene__btn.__pink:hover{background-color:#b42849}
+ .kattene__btn.__pink:hover{background-color:#a0a0a0}

変更後はこんな感じです
商品リンク

まとめ

今回はPA-API制限に引っかかって商品情報を引っ張ってこれなくなったのでカッテネを導入してみたという記事でした
各種URLなどを複数回コピペする必要があるのでかなり手間がかかりますが、同じように制限を食らった人やこれから始めるため実績がなく使えない人に心強い物だと思います
制限でAmazon APIが使えないよーという人は是非使ってみてください

せっかく使用しているテーマのCocoonに便利な商品リンクがあるのに制限が掛かって使えないのは辛い…
Amazonさん制限キツすぎやしませんか…売上自体はあっても過去30日以内にPA-API経由で売上がないと使えないってのは辛すぎる
せめて60~90日ぐらいの期間が欲しいですわ

[share]

タイトルとURLをコピーしました