アフィリエイト・広告

カッテネでアマゾン系の一括商品リンクを表示させる

カッテネ
アマゾンや楽天アフィリエイトなど商品リンクの一括表示ツールはカッテネが良かったです。

現在の主流ツールには、カエレバやヨメレバ・またリンカーなどがあるんですが、難点としてアマゾンのAPI規約変更により、使えない可能性が出てきています。
※アマゾンのAPI利用ポリシーにより正常稼働しない可能性については、下記ページに掲載しました
PA-API（Product Advertising API）問題ですね。
→アマゾンのAPI利用ポリシーに関する掲載部分

カエレバやヨメレバ、リンカーなどはカスタマイズ面や公式リンクの掲載などの関して、利用者ファースト・ユーザーファーストの面で気になる部分もありカッテネに行き着きました。

カッテネの良い部分と気になる部分

  • HTMLでもワードプレスプラグインでも作成できる
  • ツール製作者の公式リンクがない（ツール作成者のサイトのリンクが掲載されない）
  • アマゾン・楽天・ヤフーなど大手ASPに限定されていない
  • 各商品リンク先を挿入できる
  • レスポンシブ対応
  • 商品画像は自分でダウンロードして用意する必要がある
  • リンク作成の際に間違いがあれば表示されない

ではカッテネについて詳しくご紹介していきます。

 

カッテネの商品リンクのレイアウト

このようなレイアウトで商品を紹介できます。

PC表示のキャプチャ画像です。

カッテネPC表示

スマホ表示のキャプチャ画像です。

カッテネスマホ表示

実装したものがこちらです。

※PCで見た時は、PC表示。スマホの場合はスマホレイアウトになっています。

沈黙のWebマーケティング Webマーケッター ボーンの逆襲 ディレクターズ・エディション
松尾茂起 エムディエヌコーポレーション 2015/01/30

レスポンシブデザインなので、デバイスによって最適化しているのもカエレバなどにはない良い部分です。

 

利用手順

当サイトでは、実装の状態は以下になっております。

  • ワードプレスの場合は、プラグインインストールで使う
  • CSSソースを追加してHTMLで使う

2種類の方法があるのですが、使いやすい方を選択してよいと思います。

 

ワードプレスでカッテネを使う場合

新規プラグインをインストールします。
katteneを検索してインストール→有効化しましょう。

プラグインの新規インストールの方法はこちらに掲載しています。

解説ページ→一般的なプラグインのインストール方法

必要情報を入力していきます

プラグインをインストール後、下記のコード画像ファイル・タイトル・説明文・アフィリエイトタグを入力していきます。

[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]

事例

今回は事例として
「沈黙のWebライティング Webマーケッター ボーンの激闘」のアフィリエイトリンクを掲載する場合、このようなソースになります。

[kattene]
{
"image": "https://full-spec.co.jp/walker_net/wp-content/uploads/2019/08/51TvUiUYtL._SL160_.jpg",
"title": "沈黙のWebライティング Webマーケッター ボーンの激闘〈SEOのためのライティング教本〉",
"description": "松尾茂起 エムディエヌコーポレーション 2016-11-01",
"sites": [
{
"color": "orange",
"url": "https://www.amazon.co.jp/gp/product/4844366238/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4844366238&linkCode=as2&tag=daita75-22&linkId=1d17ef79848c228a24cbfe7f70a81b91",
"label": "Amazon",
"main": "true"
},
{
"color": "blue",
"url": "https://www.amazon.co.jp/gp/product/B01M3U3OR4/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B01M3U3OR4&linkCode=as2&tag=daita75-22&linkId=eedb788833a57068e80bff9e627f8e6d",
"label": "Kindle"
},
{
"color": "red",
"url": "https://hb.afl.rakuten.co.jp/hgc/0b954714.c1aba891.0b954715.6ffde236/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F14513758%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Fbook%2Fi%2F18238456%2F&link_type=text&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJ0ZXh0Iiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImxlZnQiLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjAsImJidG4iOjF",
"label": "楽天"
},
{
"color": "green",
"url": "https://hb.afl.rakuten.co.jp/hgc/19027178.4a7ff962.19027179.53dda982/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F79e3c004a40a37e091b17cad26bc54cb%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F15972160%2F&link_type=text&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJ0ZXh0Iiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImxlZnQiLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjAsImJidG4iOjF9",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "https://audiobook.jp/",
"label": "audiobook"
}
]
}
[/kattene]

※audibookに「沈黙のWebライティング Webマーケッター ボーンの激闘」がありませんでしたので、公式TOPぺージにしています。

 

画像ファイルは手動で入力する必要あり

注意としては画像ファイルを自分で用意しなければいけないため、アマゾンの商品リンクを作る際のところで、画像ファイルをダウンロードしてワードプレスにアップして使っています。

カッテネ画像ファイル

画像自体は楽天でもどこの画像をチョイスしてもよいのですが、最もリンク切れにならないアマゾンがおすすめとカッテネ公式ページに掲載していました。

 

カッテネが正しく表示しない場合

ボタンの数調整に関する注意

また個人的に悩んだのは、例えば５つあるボタンを4つに変更する場合。

この場合は沈黙のWebライティングがaudibookでは販売がなく、5つ→４つにボタンを変更しようと、ピンクのボタンを削除しようと何も考えずに削除したら反映しない。

このときは直前のカンマが残っている場合があります。
カッテネ表示しない

直前のカンマ「,」を消す

これは公式サイトにも掲載なく、困っていろいろ情報を探していましたらボタンを削除するには、直前のカンマ「,」も消さないといけません。

カンマも一緒の削除しましょう。

,
{
"color": "pink",
"url": "https://audiobook.jp/",
"label": "audiobook"
}
宮武
この直線のカンマを消さないで、audiobook部分だけ何度も削除しても表示しなく、実は数時間も困った経緯があります。

直前のカンマ消し忘れには要注意しましょう。

 

HTMLでカッテネを使う場合

HTMLの場合は、CSSにコードを追記します。
テンプレートによって違いますが、一般的にstyle.cssになると思います。

追加するcssコードはこちら
公式サイトに掲載されているcssコードです
→公式サイトで紹介されているcssコード取得ページ

そしてHTMLとして、同じように画像ファイルやアフィリエイトタグなどを追加していきます。

このHTMLを使っていきます。
必要情報を書き換えて公開すれば大丈夫です。


    

    

      
【タイトル】

      
【説明】

      

        
Amazon

        
Kindle

        
楽天

        
楽天Kobo

        
audiobook

 

まとめ　カッテネはオススメです

まとめ
個人的には商品画像を用意する部分も慣れれば、アマゾンからさくっと用意できます。
あとはアマゾンも使えますし、見た目のレイアウトやボタンなども魅力的なデザインでオススメです。

カエレバやRinkerに代わってスタンダードなツールになりそうです。

カエレバのお勧めする理由

  • プラグインでもHTMLでも利用できる
  • ツール製作者の公式リンクが掲載されない
  • 自由に商品リンク選択して掲載できる
  • レスポンシブ対応できている

アマゾンや楽天以外の一般ASPのアフィリエイトでも設定出来ます。

申し込み系や物販系、VOD=Video On Demand（ビデオ・オン・デマンド）、音楽やアプリなどなど応用は結構出来そうです。
さらに極端に言えばアフィリエイトタグではなく内部リンクや外部リンク設定でも使えます。
宮武
自由度が高いので、良いアイデアと取り入れていけば面白そうですね。

またテンプレートによってはレイアウトが崩れたり、他のプラグインと相互干渉してしまった場合は、公式サイトから相談できるとの事です。
公式サイトの方が、カッテネに関する関連情報も豊富ですのでチェックしてみてください。
→カッテネ公式サイト

 

改めてカッテネで作成した商品リンクです

これはHTML版ですが、ワードプレスと遜色なくレイアウトも魅力的ですよね。

沈黙のWebライティング —Webマーケッター ボーンの激闘—〈SEOのためのライティング教本〉
松尾茂起 エムディエヌコーポレーション 2016-11-01

沈黙のWebマーケティング Webマーケッター ボーンの逆襲 ディレクターズ・エディション
松尾茂起 エムディエヌコーポレーション 2015/01/30

 

宮武
一般的なアフィリエイトサイトではなく、お店や会社ホームぺージのコラムや一般ぺージでもアフィリエイト紹介できます。

ちょっとした情報提供やオススメをさらっと紹介できます。
趣味で見た本やビデオ・音楽から家電などからオススメのビジネス書や便利用品まで、運営サイトのジャンルや用途に関係なく活用してみましょう。
 

Related posts:

ウェブコンテンツ記事の作成方法と注意点
  • この記事を書いた人

宮武大輔

ウォーカーネット運営責任者。株式会社フルスペック代表取締役。2012年SEO・WEB集客・広告業で起業。複数メディアサイト運営＆法人・個人のSEO/MEO対策、ネット集客・動画制作・集客のマーケティング受注・コンサルティングをしています。　さらに詳しいプロフィール→宮武の詳細プロフィール

-アフィリエイト・広告