アマゾンや楽天アフィリエイトなど商品リンクの一括表示ツールはカッテネが良かったです。
PA-API（Product Advertising API）問題ですね。
→アマゾンのAPI利用ポリシーに関する掲載部分
カエレバやヨメレバ、リンカーなどはカスタマイズ面や公式リンクの掲載などの関して、利用者ファースト・ユーザーファーストの面で気になる部分もありカッテネに行き着きました。
カッテネの良い部分と気になる部分
- HTMLでもワードプレスプラグインでも作成できる
- ツール製作者の公式リンクがない（ツール作成者のサイトのリンクが掲載されない）
- アマゾン・楽天・ヤフーなど大手ASPに限定されていない
- 各商品リンク先を挿入できる
- レスポンシブ対応
- 商品画像は自分でダウンロードして用意する必要がある
- リンク作成の際に間違いがあれば表示されない
ではカッテネについて詳しくご紹介していきます。
このページの目次
カッテネの商品リンクのレイアウト
このようなレイアウトで商品を紹介できます。
PC表示のキャプチャ画像です。
スマホ表示のキャプチャ画像です。
実装したものがこちらです。
※PCで見た時は、PC表示。スマホの場合はスマホレイアウトになっています。
レスポンシブデザインなので、デバイスによって最適化しているのもカエレバなどにはない良い部分です。
利用手順
当サイトでは、実装の状態は以下になっております。
- ワードプレスの場合は、プラグインインストールで使う
- CSSソースを追加してHTMLで使う
2種類の方法があるのですが、使いやすい方を選択してよいと思います。
ワードプレスでカッテネを使う場合
新規プラグインをインストールします。
katteneを検索してインストール→有効化しましょう。
プラグインの新規インストールの方法はこちらに掲載しています。
解説ページ→一般的なプラグインのインストール方法
必要情報を入力していきます
プラグインをインストール後、下記のコード画像ファイル・タイトル・説明文・アフィリエイトタグを入力していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | [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マーケッター ボーンの激闘」のアフィリエイトリンクを掲載する場合、このようなソースになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | [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つ→４つにボタンを変更しようと、ピンクのボタンを削除しようと何も考えずに削除したら反映しない。
このときは直前のカンマが残っている場合があります。
直前のカンマ「,」を消す
これは公式サイトにも掲載なく、困っていろいろ情報を探していましたらボタンを削除するには、直前のカンマ「,」も消さないといけません。
カンマも一緒の削除しましょう。
1 2 3 4 5 6 | , { "color": "pink", "url": "https://audiobook.jp/", "label": "audiobook" } |
直前のカンマ消し忘れには要注意しましょう。
HTMLでカッテネを使う場合
HTMLの場合は、CSSにコードを追記します。
テンプレートによって違いますが、一般的にstyle.cssになると思います。
そしてHTMLとして、同じように画像ファイルやアフィリエイトタグなどを追加していきます。
このHTMLを使っていきます。
必要情報を書き換えて公開すれば大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="kattene"> <div class="kattene__imgpart"></div> <div class="kattene__infopart"> <div class="kattene__title">【タイトル】</div> <div class="kattene__description">【説明】</div> <div class="kattene__btns __five"> <div>Amazon</div> <div>Kindle</div> <div>楽天</div> <div>楽天Kobo</div> <div>audiobook</div> </div> </div> </div> |
まとめ カッテネはオススメです
個人的には商品画像を用意する部分も慣れれば、アマゾンからさくっと用意できます。
あとはアマゾンも使えますし、見た目のレイアウトやボタンなども魅力的なデザインでオススメです。
カエレバやRinkerに代わってスタンダードなツールになりそうです。
カエレバのお勧めする理由
- プラグインでもHTMLでも利用できる
- ツール製作者の公式リンクが掲載されない
- 自由に商品リンク選択して掲載できる
- レスポンシブ対応できている
アマゾンや楽天以外の一般ASPのアフィリエイトでも設定出来ます。
さらに極端に言えばアフィリエイトタグではなく内部リンクや外部リンク設定でも使えます。
またテンプレートによってはレイアウトが崩れたり、他のプラグインと相互干渉してしまった場合は、公式サイトから相談できるとの事です。
公式サイトの方が、カッテネに関する関連情報も豊富ですのでチェックしてみてください。
→カッテネ公式サイト
改めてカッテネで作成した商品リンクです
これはHTML版ですが、ワードプレスと遜色なくレイアウトも魅力的ですよね。
ちょっとした情報提供やオススメをさらっと紹介できます。
趣味で見た本やビデオ・音楽から家電などからオススメのビジネス書や便利用品まで、運営サイトのジャンルや用途に関係なく活用してみましょう。
