【スポンサーリンク】

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

当ページのリンクには広告が含まれています。

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

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

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

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

\記事が役に立ったらシェアしてね/
【スポンサーリンク】

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

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

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

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

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

ペーパーミツヤマ 書籍用紙 淡クリームキンマリ 4/6 90kg 104.7g/㎡ A4 500枚
書籍用紙 淡クリームキンマリ
¥1,976(2024/10/13 20:29時点)
書籍用紙 4/6 90kg 104.7g/㎡

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

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

2. APIの設定をする

事前の設定は、cocoonの設定のAPIからです。
AmazonのAPIキーを取得して入力します。

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

APIの設定をする

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

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

APIの設定をする

で、↓こうなります。

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

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

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

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

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

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

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

スタイルシートをブログカード風にした
/*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;
}

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

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

4-1. そのまま

そのまま

4-2. タイトルを短く、商品説明を削除

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

4-3. タイトルのみのテキストリンク

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

Anker PowerLine+ USB-C 2.0 ケーブル (0.9m グレー) 【PD対応】

QRコードを読み込むと、関連記事を確認できます。

Amazon商品紹介リンクをショートコードで入れられるようにした
【スポンサーリンク】
タイトルとURLをコピーしました