このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

Cocoon*アフィリエイトタグのショートコードでのリンクの貼り方

ブログ

アフィリエイトタグ長いんだよなー

アフィリエイトタグを簡単に作れたり、

同じタグを楽に何度も貼れたりする方法はないかな

ブロガーさんにとって、アフィリエイトタグの設置・管理は重要ですよね。

商品レビュー記事などを書くときなどは、何度も同じタグを使うこともあるでしょう。

そんな時にアフィリエイトタグを一括管理してショートコード化しておくと、掲載終了などになったときに容易に設定変更が可能となります。

また、商品リンクの設置は、「もしもアフィリエイトの簡単リンクでの作成」や「Rinkerやポチップなどのプラグインを導入する」方法をよく聞くと思います。

ですが、Cocoonテーマではそういったツールを使わずとも以下のような同様のリンクを作成することが出来ます。

↓ちなみにこれは、夫の誕生日にプレゼントしたスマートウォッチ

記事が増えるほど管理は大変になるので、早いうちにアフィリエイトタグに関するショートコード機能も知っておきましょう!

この記事でわかること
  • アフィリエイトタグのショートコード作成方法
  • 商品リンクショートコードの設定・作成方法
  • ブックマークレットを使用した簡単な商品リンクショートコードの設定

アフィリエイトタグのショートコード作成方法

まずは、アフィリエイトタグの一括管理方法についてです。

Cocoonではアフィリエイトタグ管理に関するページが用意されており、そのページを活用することによって以下のようなことが出来ます。

  • アフィリエイトタグ掲載終了時、記事を触らず内容を入れ替え
  • 作成されたショートコードで簡単にタグを使い回す
  • 記事作成時、ブロックエディターのリストですぐに呼び出し・設置

それではアフィリエイトタグの管理方法(ショートコードの作成方法)を説明します。

アフィリエイトタグの一括管理方法

  • Cocoon設定のアフィリエイトタグで、新規追加を選択
  • タイトルと内容を入力

    タイトルは、自分の分かりやすい名前を、内容はアフィリエイトタグをそのまま貼り付けます。

    エディターのリストに表示させるか選択し、保存しましょう。

    ※「エディターのリストに表示」を選択すると、以下のように記事作成時にすぐ呼び出せるようになります。

    保存が完了すると以下のように表示されます。

  • 3
    「一覧ページへ」を選択すると、作成したアフィリエイトタグが追加されています。

    作成したアフィリエイトタグが追加されているか確認しましょう。

    右下の編集を押すと先ほどの作成ページに移動でき、削除を押すと消去できます。

    また、「エディターのリストに表示」 のチェックを外して保存すると、左下に「非表示」と表示されます。

アフィリエイトタグショートコードの設置方法

ショートコードの設置は簡単で、アフィリエイトタグショートコードをそのまま記事に挿入するだけです。

先程の一覧ページに表示されていたショートコードをコピーしてペーストするか、エディターのリストから呼び出せばOKです。

上の画像のショートコードは、記事には以下のように表示されます。

このショートコードはランキング作成にも使用できます。詳しくはこちらの記事をご覧ください。

商品リンクのショートコード化

Amazon・楽天・Yahoo!ショッピング・DMM・もしもアフィリエイトのリンクに関しては、Cocoon設定のAPIにて設定をすると、それぞれの商品リンクをショートコード化できます。

Rinkerやポチップなどのプラグインを入れなくても、画像付き商品リンクを作成できるよ!

今回は、Amazon・楽天・Yahoo!ショッピングの設定について説明します。

商品リンクの初期設定

まず、商品リンクの作成には各リンク先のIDなどをCocoonへ設定することが必要になります。

  • Amazon…アクセスキーID、シークレットキー、トラッキングIDの取得
    • Amazonアソシエイトに登録すれば、トラッキングIDは取得できますが、その他2つは審査に通らないと取得できません
    • 審査に通ったとしても、AmazonのAPIの利用継続も制度が厳しいので、一度公式サイトに目を通しておきましょう。
       →詳細はこちら
  • 楽天…アプリケーション(デベロッパー)ID、アフィリエイトIDの取得
    • 楽天デベロッパーズに登録して、IDを取得しましょう。
       →詳細はこちら
  • Yahoo!…バリューコマース(ASPサイト)に登録し、Yahoo!ショッピングと提携して、sidとpidを取得
    • Yahoo!と提携後、広告作成画面で「MyLink」を選択してMyLinkコードを取得し、コードの中から「sid」と「pid」を探しましょう。
       →詳細はこちら

※詳細リンクは、Cocoon公式サイトです。

IDを取得したら、Cocoon設定のAPIタブを開き、各IDを入力し、保存しましょう。

※保存できない場合は、サーバーのWAF設定を切ってから保存してみてください。


これでショートコードを用いた商品リンクの作成が出来ます。

自分で商品の登録番号を調べて、ショートコードを書くことで設定もできますが、今回はより手早く簡単に設定できる方法を紹介します。

なお、今から紹介する方法は、Amazonと楽天の商品リンクの作成のみで活用できます。

ブックマークレットで商品リンクのショートコードコードを作成

Cocoon作成者のわいひらさんがサイトで紹介していた、ブックマークレットを使った商品リンクの作成方法です。

これは、NAEさんという方が作成した、カエレバというツールのブックマークレット風のものだそうです。※詳細はこちらの記事です。

作成方法は以下になります。

  • 1
    Cocoon公式サイトにてブックマークレットをブラウザに登録
    • Amazon商品リンクを作成する場合はこちらからページをブックマークしてください。
    • 楽天商品リンクを作成する場合はこちらからページをブックマークしてください。
      ※リンクはCocoon公式サイトです。

    もし登録できない場合は、既存のブックマークを編集することで登録できます。以下の手順でやってみてください。

    1. 右クリックでブックマークレットのリンクをコピー
    2. 適当なサイトのブックマークを作成(何のサイトでもいいです)
    3. 登録したブックマーク上で右クリックし、編集
    4. コピーしたリンクをURLに貼り付け、分かりやすい名前を付けて保存

    ※ブックマークレットのリンクはウェブサイトではないので、うまく保存できないブラウザもあるようです。

  • 2
    リンクを作りたい商品の個別ページを開く

    AmazonならAmazonの商品ページ、楽天なら楽天の商品ページを購入するときと同じように開きます。

    今回はこちらの商品のリンクを作成します。
  • 3
    商品ページを開いた状態でブックマークレットをクリック

    商品ページを開いたまま、先程登録したブックマークレット(赤枠)をクリックすると、ダイアログが表示され(黄枠)、自動的にショートコードを作成してくれます。

  • 4
    ショートコードをコピーして記事に貼り付ける

    作成されたショートコードをコピーして貼り付ければOKです。

今回は、以下のようなショートコードが作成されました。

[rakuten id="skagen:10001323" kw="【楽天市場】2021 春の新作 スカーゲン スマートウォッチ ハイブリッドHR メンズ SKAGEN 腕時計 SKT3002 JORN HYBRID SMARTWATCH HR 公式 2年 保証:SKAGEN スカーゲン公式ストア"]

※Amazonでは、ASINという番号がついている商品であれば対応しているとのことです。(一般書籍ではISBN-10という番号がついているものもあるそうで、そちらは対応していないようです)


今回のショートコードは、

  • 画像と商品名をクリックした場合は、今回設定した個別ページ
  • Amazonや楽天のボタンをクリックした場合は、ショートコードのkwに入力した文章で検索したページ

にリンクするよう設定されています。


また、ショートコードにオプションを追加することで表示を改変することもできます。

細かい設定をしたい場合は、Cocoon公式サイトを参考にしてください。

  • Amazonのショートコードオプションはこちら
  • 楽天ショートコードオプションはこちら

他にも詳しい内容はわいひらさんが説明されているので、もしうまくいかなかった場合はCocoon公式サイトをご覧ください。

まとめ

今回は、アフィリエイトリンクに関するショートコードについて説明しました。

無料テーマなのに、商品リンクも作成できるなんてほんとにCocoonはすごいですね!

コードを触るのが得意な人であれば、オリジナルデザインで作成も可能ではないかと思います。

(難しい人はプラグインを使ってみるのもありかもしれませんね。現に私はポチップを試してみています 笑。)

皆さんもいろいろとCocoonを極めてみてくださいね。

それではまた~

コメント