【Cocoon】商品リンクに公式サイトや別のサイトを追加する方法。 | ねんごたれログ
本ブログはアフィリエイトプログラムによる収益を得ています
スポンサーリンク

【Cocoon】商品リンクに公式サイトや別のサイトを追加する方法。

Cocoonは非常に使いやすいのですが、商品リンクに「Amazon」「楽天」「Yahoo!」しかないです。

意外と公式サイトやそれ以外で購入している人が多いので、できればリンクボタンを追加したいなと思って調べてみると、すでに実装されているようだったのでまとめておきます。2年以上前からあるみたいですね。

[ があるとハイライト表示できないのでこの記事では表示していませんが、本当は必要になります。ショートコード内がわかりやすくなるようにこのようにしています。

スポンサーリンク

商品リンクに公式サイトや別のサイトを追加する方法

通常通り商品リンクを作成しよう

普段と同様に商品リンクを作成します。

作成の仕方がわからない人は後述の公式サイトを参考にしてください。

こんな感じのリンクが作成されます。

ショートコードの中身はこんな感じです。

amazon asin="B09HMRP71B" kw="【Switch】ソフィーのアトリエ2 ~不思議な夢の錬金術士~ (早期購入特典(ソフィー専用衣装「お気に入りの普段着」ダウンロードシリアル)、パッケージ版封入特典(「エクストラサウンドコレクション」ダウンロードシリアル) 同梱)"]

簡単にまとめるとこんな感じになってます。

amazon asin="〇〇〇〇" kw="〇〇〇〇"]

これを参考にリンクを作成します。

ちなみにこちらの商品の公式サイトはこちら↓

前にリンクを追加したい場合「btn1_url」「btn1_text」

使用するのは「btn1_url」と「btn1_text」です。

  • btn1_url:載せたいURLを設定
  • btn1_text:ボタンの名前を設定

使い方はこんな感じで作成したショートコード内に追加で書き込みます。

amazon asin="〇〇〇〇" kw="〇〇〇〇"  btn1_url="〇〇〇〇" btn1_text="〇〇〇〇"]

先程の商品リンクに追加する場合はこのようになります。間は半角スペースです。

amazon asin="〇〇〇〇" kw="〇〇〇〇"  btn1_url="https://www.gamecity.ne.jp/atelier/sophie2/" btn1_text="公式サイト"]

こんな感じになります。

後ろに追加したい場合「btn2_url」「btn2_text」

後ろに別のショップのリンクを貼り付けたい場合はこのように後ろに追記していきます。

amazon asin="〇〇〇〇" kw="〇〇〇〇"  btn1_url="〇〇〇〇" btn1_text="〇〇〇〇"  btn2_url="〇〇〇〇" btn2_text="〇〇〇〇"]
amazon asin="〇〇〇〇" kw="〇〇〇〇"  btn1_url="https://www.gamecity.ne.jp/atelier/sophie2/" btn1_text="公式サイト" btn2_url="https://7net.omni7.jp/detail/2110624633" btn2_text="7net"]

商品リンクはこんな感じになります。

さらに後ろに追加したい場合「btn3_url」「btn3_text」

さらに後ろに別のショップリンクを貼り付けたい場合はこのようにさらに後ろに追記していきます。

amazon asin="〇〇〇〇" kw="〇〇〇〇" btn1_url="〇〇〇〇" btn1_text="〇〇〇〇" btn2_url="〇〇〇〇" btn2_text="〇〇〇〇" btn3_url="〇〇〇〇" btn3_text="〇〇〇〇"]
amazon asin="〇〇〇〇" kw="〇〇〇〇"  btn1_url="https://www.gamecity.ne.jp/atelier/sophie2/" btn1_text="公式サイト" btn2_url="https://7net.omni7.jp/detail/2110624633" btn2_text="7net" btn3_url="https://www.animate-onlineshop.jp/pn/%E3%80%90NS%E3%80%91%E3%82%BD%E3%83%95%E3%82%A3%E3%83%BC%E3%81%AE%E3%82%A2%E3%83%88%E3%83%AA%E3%82%A82+%EF%BD%9E%E4%B8%8D%E6%80%9D%E8%AD%B0%E3%81%AA%E5%A4%A2%E3%81%AE%E9%8C%AC%E9%87%91%E8%A1%93%E5%A3%AB%EF%BD%9E+%E9%80%9A%E5%B8%B8%E7%89%88/pd/1991961/" btn3_text="アニメイト"]

商品リンクはこんな感じになります。

追加できるのは3つまで

追加できるのは3つ(前1つ、後ろ2つ)までのようです。

2つ重ねてみた(btn2の後にbtn2を重ねる)ところ、後に追加している分だけ反映されるようです。「btn4」を使ってみても追加されなかったので、やはり3つまでしか追加できないようでした。

また、「btn2」だけ追加、「btn3」だけ追加というようにも使用できます。

参考記事

詳しくはCocoonの公式サイトにあります。

商品写真を大きく表示したい場合や初めに表示する写真を変更する方法、必要ないリンクを表示しない方法など、いろいろ書かれているので目的の部分に飛ぶようにリンクを貼ってます。

また、他のアフィリエイトサイトでリンクを作成したものを載せたい場合は、「btn1_tag」を使うみたいです。こちらも確認してみてください。

追加する前に準備しておきたいこと

ブックマークで一発作成できるようにしておこう

初めて作成する人はCocoonの公式サイトを参考に作成しましょう。

ブックマークレットで商品リンクを自動で作成できるようにしておくとめちゃくちゃ便利です。

バリューコマースに登録しておこう

バリューコマースに登録して「LinkSwitch対応」になっているサイトを登録しておくと、URLを載せておくだけで成果が発生するようになるので、登録しておきましょう。

メモ帳などに保存しておこう

メモ帳などに以下のコードを残しておくと便利です。

amazon asin="〇〇〇〇" kw="〇〇〇〇" btn1_url="〇〇〇〇" btn1_text="〇〇〇〇" btn2_url="〇〇〇〇" btn2_text="〇〇〇〇" btn3_url="〇〇〇〇" btn3_text="〇〇〇〇"]

あとがき

これでリンクボタンを追加できるようになりました。見る人も使いやすくなったかなと思います。

コメント

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