Amazon商品紹介リンクをショートコードで入れられるようにした

2021.04.03 2020.09.24

Cocoonには商品紹介のショートコードがあります。

これまでは手動でAmazonアソシエイトツールバーでリンクを取得していたんですが、これがまぁ大変。

ショートコードを利用するとISDNなどの商品コードだけで画像や商品名を表示することできることに気づきました。

この記事で説明すること

これまでのやり方は大変だった
APIの設定をする
スタイルシートをブログカード風にした
Amazonショートコードのよく使うカスタマイズ

これまでのやり方は大変だった

見出しやボタンを組み合わせて、作っていました。

画像リンクやテキストリンクなどをコピーしてくるのに、かなり時間がかかります。

それを、こんなふうにしました。

ペーパーミツヤマ書籍用紙淡クリームキンマリ 4/6 90kg 104.7g/㎡Ａ4 500枚

書籍用紙　淡クリームキンマリ

￥1,718（2021/12/01 15:09時点）

書籍用紙 4/6 90kg 104.7g/㎡

Amazonの商品レビュー・口コミを見る

見た目にもコンパクトだし、何よりも気軽に使えます

APIの設定をする

事前の設定は、cocoonの設定のAPIからです。

AmazonのAPIキーを取得して入力します。

あとは、投稿の中にショートコードから ［amazon asin=***］のように挿入できます。

この***は、書籍の場合は、10桁のISBNを入力します。

例えば、「ISBN10:4046046783」というのをAmazonの商品紹介ページで確認してきます（書籍はISBNだけど、商品はASINというコードがある）。

で、↓こうなります。

寄り添うツイッターわたしがキングジムで10年運営してわかった「つながる作法」

KADOKAWA

￥1,540（2021/12/01 13:05時点）

Amazonの商品レビュー・口コミを見る

スタイルシートをブログカード風にした

ついでに商品紹介のスタイルをブログカードのデザインに寄せてみました。

もとはこんな感じでした。

ブログカードのように、画像を右にしてみました。

商品画像を右にするのに苦労しました。

CSSコードはこちら

/*amazon*/

.product-item-box {
  padding: 1.6% 2.2% 2%;
  width: 100%;
  margin-top: 10px;
  border: 1px solid #f9c00d;
  border-radius: 4px;
}

.product-item-error {
  display: none;
}

.product-item-thumb {
  position: relative;
  float: right !IMPORTANT;
  margin-left: auto;
  margin-right: 0 !important;
}

.product-item-thumb a {
  margin: 0 !important;
}

.product-item-thumb img {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media screen and (min-width: 769px) {
  .product-item-box {
    display: block !IMPORTANT;
  }
  .product-item-content {
    padding-left: 0;
  }
}

.product-item-content {
  display: block;
  position: relative;
  margin: 0;
}

.product-item-title a {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 600;
  color: black;
  text-decoration-line: none;
}

@media screen and (max-width: 1023px) {
  .product-item-title a {
    font-size: 16px;
  }
}

.product-item-snippet {
  font-size: 14px;
}