どうやら、AmazonのPA-APIの制限に引っかかったらしく、商品画像などが取れなくなった
そこで、検索を掛けて見つけたwebfoodさん作成のKattene(カッテネ)を導入してみました
カッテネとは
1商品にたいして、複数のアフィリエイトリンクを表示させることのできるプラグインです
WordPressと、それ以外サービスで使用することができます
導入
導入が簡単なのは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を使うと良いですよ
Amazonアソシエイトの場合
まずは、ご自身のAmazonアソシエイトページへ行き、ツール→アソシエイトツールバーと進みます
ページを開いたら、アソシエイトツールバーの設定はこちらをクリックします
設定画面を開いたら、ツールバー表示をオンにして準備は完了です
画像URLリンクの取得方法
記事へ挿入したい商品ページのへ行きます
ここでは、Voigtlanderレンズのページを例として説明してきます
商品のページへ行くとページ上部に、画像のようなバーが出ているはずです
まず、商品画像のリンクが欲しいので、ツールバーの画像をクリックします
画像サイズは、お好みで選んでください
画像のように商品画像で右クリックをして、画像のアドレスをコピーをクリックしてコピーしましょう
このアドレスを、ショートコード"image": "【画像URL】"部分へペーストします
タイトルと説明は、商品ページのタイトルをそのままコピー＆ペーストすれば大丈夫です
商品リンクアドレスの取得方法
今度は、ツールバーのテキストを選び、表示されたURLリンクをショートコード"url": "【メインのURL】"部分へペーストして完了
これで、商品画像とAmazon用のリンクは貼り終えました
楽天、ヤフーショッピング用リンクの取得方法
私は、通常の楽天IDやヤフーショッピング用のアフィリエイトコード？を取得していないため
それぞれ、もしもアフィリエイト経由、ValueCommerce経由でリンクを作成する方法を紹介します
説明にあたっては、すでに両方の広告への申請は済んでいるものとして説明しますので、あらかじめご了承ください
どちらのASPも、Amazonと連携できるので、審査に通らないよーという方は、こちらを使うという手もあります
どちらのASPも、登録は無料ですので、登録しておくと良いでしょう
もしもアフィリエイト経由で楽天リンクを取得する方法
プロモーション検索→提携中と辿っていき、楽天広告の右側にある商品リンクへをクリックしましょう
すると、このような検索画面になるので、Amazonの時と同じく、貼りたい商品の名前を入れて検索します
検索して出てきた商品の下に、商品リンクを作るボタンがあるのでクリックします
商品リンクを作るをクリックすると、このような画面がポップアップ表示されるので
プレビュー画面内で右クリックして、リンクアドレスをコピーしましょう
コピーしたアドレスを、ショートコード内に設定した楽天の"url": "【商品のURL】"部分へペーストして完了です
Amazonと連携している場合の、もしも経由で取得する際にも、同様のやり方でリンクの取得ができます
もしもアフィリエイト経由での画像リンクの取得方法
Amazonアソシエイトを使わず、もしもアフィリエイト経由で、画像のリンクを取得するには、
商品画像の上で、右クリックをして画像のリンクアドレスをコピーして、ショートコード"image": "【画像URL】"部分へペーストすればOKです
ValueCommerce経由でヤフーショッピング用リンクを取得する方法
ValueCommerce経由の場合、ほかの2つと比べてひと手間かかります
まずは、ログイン後に、広告→提携状況→提携済みを選んで、ヤフーショッピング広告を探します
ヤフーショッピング用の広告の右側に、広告素材を選ぶがあるので、ここをクリックしましょう
素材の中から、MyLink広告を選び、1にある広告主のサイトを見るをクリックしてヤフーショッピングサイトへ飛びます
その後、貼りたい商品を検索して、その商品の詳細ページを開き、そのページのURLリンクをコピーしましょう
コピーしてきたアドレスを、画像の2のところにある、コピーしたURLを貼り付けるへペーストし、テキストを適当に入力しましょう(テキストは使いませんが、作成に必須です)
アドレスの貼り付け、テキスト入力が終わったら、MyLinkコードを取得をクリックしましょう
すると、このようにポップアップ画面が表示されるので、このMyLinkコードを選択をクリックすると選択された状態になるのでコピーします
コピーしたコードを、一度メモ帳などに貼り付けましょう
貼り付けたコードから、//のうしろから.htmlまでをコピーして、それをショートコード内に設定したヤフーショッピングの"url": "【商品のURL】"部分へペーストして完了です
表示スタイル
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}変更後はこんな感じです
まとめ
本記事では、アフィリエイトリンクを作成できる、Kattene(カッテネ)とは、導入方法、使い方をAmazonの場合
もしもアフィリエイト経由でリンクを取得する方法、ValueCommerce経由でリンクの取得方法と
私が使用している、スタイル変更用のCSSコードを紹介しました
カッテネは、商品リンクを毎回複数回コピー＆ペーストする必要があるため、正直かなり手間はかかります
更新が2年前で止まっているのも、心配な部分です
しかし、AmazonPA-API制限に引っかかってしまった人、実績がなく、なかなか承認が通らない人には、ほかのASP経由で使えるのは心強いかと思います
[share]
