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

スポンサーリンク

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

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

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

スポンサーリンク

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

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

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

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

ペーパーミツヤマ 書籍用紙 淡クリームキンマリ 4/6 90kg 104.7g/㎡ A4 500枚
書籍用紙 淡クリームキンマリ
¥1,718(2020/09/24 05:12時点)
書籍用紙 4/6 90kg 104.7g/㎡

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

APIの設定をする

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

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

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

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

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

で、↓こうなります。

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

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

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

/*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;
}

こちらもどうぞ

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