『Cocoon』の機能で、『楽天アフィリエイトの商品リンク』をブログに貼り付ける！備忘録

始めは楽天アフィリエイトのサイトで生成できるURLを使っていました。
が、デザインがどうしても好きななれず…
Cocoonに付いている機能を使った方が、すっきりきれいで私好みの見た目になりました！

１回作業すればOK！まずは下準備

【楽天アプリケーションID】と【楽天アフィリエイトID】を取得

1. まず楽天の下記リンクページを開きます。
   Rakuten Developers
   右上の【＋アプリの発行】をクリック後、自分の楽天のIDでログインします。
   持っていない方はこの機会に楽天IDを取得しましょう！
   

   

2. アプリ新規作成フォームの下記画像①から③まで入力します。
   他は任意なので空欄でも大丈夫！
   入力できたら青いボタンをクリック。
   

   

3. すると【①アプリID】と【②アフィリエイトID】の英数字が発行されました！
   この後すぐ使用するので、この２つの英数字はメモ帳などにコピペしておきましょう。
   

   

ゲットした【楽天アプリケーションID】と【楽天アフィリエイトID】を【WordPress(Cocoon)】に登録

1. WordPressのダッシュボードにログインします。
   【Cocoon設定】の【API】のタブを開きます。
   

   

2. 下にスクロールすると、楽天の入力欄が出てきます。
   先ほどメモした【①アプリID】と【②アフィリエイトID】を入力。
   チェックボックスはお好みで変更してください！
   さらにスクロールして、いちばん左下にある【③変更をまとめて保存】をクリックします。
   

   

3. 以上で【Wordpress(Cocoon)】での設定は完了です！
   次は【希望する楽天商品のアフィリエイト用のリンク】を取得する手順に入ります。

【Cocoon公式サイト】から【ブックマーレット】を取得

1. 下記リンクページを開いて、下の方へスクロールするとこのような表示が出てきます。
   Cocoon公式サイト「楽天商品リンクブックマークレットの使い方」
   

   

2. 「Run Pen」をクリックすると表示が変わります。
   

   

3. 中央に出てきた赤いリンクを、ブラウザのブックマークバーへドラッグ＆ドロップします。
   下図の赤枠部分にのように追加されれば完了です！
   私はChromeを使用しています。
   

   

商品リンクを貼るたびに必要な作業！

【ブックマーレット】を使って【希望する楽天商品のアフィリエイト用URL】を取得する

1. 【楽天市場】からリンクを貼りたい商品を探して、商品ページを表示します。
   今回は例としてこの時楽天ランキング１位だったクリスタルガイザーを使います！
   楽天市場
2. 商品ページが表示されている状態で、ブックマークに登録した【ブックマーレット】をクリックします。
   ブックマークバーにある【楽天商品リンク作成(…】です。
   

   

3. メッセージウインドウが開いたら成功です。
   生成された文字列が該当商品のアフィリエイト用のリンクになります。
   全てコピーして下さい！
   

   

いよいよ【Wordpress(Cocoon)】にリンクを入れる！

1. 【Wordpress(Cocoon)】の投稿画面で、先ほどの文字列を表示したい箇所に貼り付けます。
   

   

2. プレビューで確認してみてください。
   下記のようにリンクが表示されていたら完了です！

楽天アフィリエイトのURL生成ツールを使わない理由

楽天アフィリエイトで作成すると、商品リンクを入力するだけで簡単！
でも見た目が…汗

カスタマイズもできるのですが、自由度が非常少ないです。
CSSで調整してもいいけど、作り的にめんどう…

こちらが【楽天アフィリエイト】で生成したリンクです。

クリスタルガイザー 水(500ml*48本入)【rdkai_04】【クリスタルガイザー(Crystal Geyser)】 楽天で購入

こちらが【Wordpress(Cocoon)】で設定したリンクです。

やっぱり後者の方が、CSSをいじらなくても見た目がきれい！
前準備は楽天アフィリエイトより手間がかかりますが、その後の手間は大して変わらないので私は断然Cocoon派です。