スポンサーリンク

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

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

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

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

スポンサーリンク

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

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

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

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

ペーパーミツヤマ 書籍用紙 淡クリームキンマリ 4/6 90kg 104.7g/㎡ A4 500枚
書籍用紙 淡クリームキンマリ
¥1,718(2021/06/19 11:38時点)
書籍用紙 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;
}

Amazonショートコードのよく使うカスタマイズ

  • 楽天やYahoo!のボタンを付けたい!
    kw=”商品名” を入力する。
    (各サイトでの検索キーワードになっている)
  • 商品の説明文を省きたい!
    desc=”” で変更できる。
  • 商品タイトルを短くしたい
    title=”商品名”で変更できる。
  • タイトルだけにしたい
    text_only=”1″

そのまま

Anker PowerLine+ USB-C & USB-C 2.0 ケーブル (0.9m グレー) 【PD対応】Galaxy S10 / S10+、iPad Pro (2018, 11インチ) / MacBook/MacBook Air (2018)、MateBook対応
Anker
¥1,199(2021/06/18 18:45時点)
Ankerの強み:3000万人以上が支持するAmazon第1位の充電製品ブランドを是非お試し下さい。

タイトルを短く、商品説明を削除

タイトルのみのテキストリンク

Anker PowerLine+ USB-C 2.0 ケーブル (0.9m グレー) 【PD対応】
タイトルとURLをコピーしました