Cocoon商品リンクを楽天で作成する方法＆カスタマイズ

Cocoonの商品リンクはとっても便利！！

▼こんなことが簡単にできちゃいます

 

ただ一つの難点は、Amazonで作成する商品リンクは「APIを通して報酬発生していないと使えない」こと。

 

だったら楽天で商品リンクを作成しましょう！

 

商品リンクの作成から設置、デザインをカスタマイズする方法まで掲載しているので、この記事を読むだけで一通りのことができると思います。

 

 

楽天会員登録する

アプリケーションID・アフィリエイトIDを取得するためには、楽天会員登録が必要です。

 

まだ会員登録していない方は、下記のページから登録できます

楽天会員登録｜会員費無料

楽天会員の登録はこちらから。楽天会員とは、楽天のサービスをお得に便利にご利用いただける楽天グループ共通のIDです。楽天会員に登録すると、1ポイント1円（相当）としてご利用いただける楽天ポイントを貯めることができます。

www.rakuten.co.jp

 

楽天アプリケーションIDの取得

➊ 下記の「Rakuten Developersの」ページを開きます

Rakuten Web Service

楽天ウェブサービス(WEB SERVICE)は、WEBアプリケーションを構築するデベロッパー向けのサイトです。楽天グループのデータや機能を開発者様、企業の皆様にAPIやSDKを通じて提供いたします。

webservice.rakuten.co.jp

 

➋ どちらでもいいので、矢印が示すリンクをクリック

（どちらも同じページが開きます）

 

➌ アプリ名とアプリURLを入力

アプリ名には「サイト名 商品リンク」と入力しておくと分かりやすいです。

※他の項目は任意なので入力しなくてもOK

 

➍ 認証画像に表示された英数字を入力

→「規約に同意して新規アプリを作成」をクリック

 

➎ できました。

アプリID/デベロッパーIDが「アプリケーションID」です

アフィリエイトIDも発行されます

 

下記のページからも、アフィリエイトIDの確認ができます

 

※楽天にログインしていないと、ログイン画面が表示されます

ログイン - 楽天

ログイン - 楽天

webservice.rakuten.co.jp

楽天アフィリエイトにサイト登録する

➏ 楽天アフィリエイトのページを開きます

※楽天にログインしていないと、ログイン画面が表示されます

ログイン - 楽天

ログイン - 楽天

affiliate.rakuten.co.jp

 

➐「サイト追加登録」をクリック

 

➑ 「運営サイト名」「運営サイトURL」を入力 → 保存

 

➒ 順位を選択し、保存

 

Cocoon　API設定

➓ 左メニュー「Cocoon設定」→「Cocoon設定」

 

⓫ タブ「API」を選択

 

⓬ 楽天の項目にアプリケーションIDとアフィリエイトIDを入力

 

⓭ 設定を保存

 

ここまでで、楽天の下準備は終わりです！

AmazonやYahoo!ショッピングも使いたい方は、また別個に設定が必要となります。

Cocoon商品リンクを楽天で作成する

 

ブックマークコードをお気に入りに登録する

➊ Cocoon公式サイトにて配布されている「ブックマークレットコード」（灰色の部分）をコピーします

 

▼ 下記ページにて準備して下さっています

楽天商品リンクブックマークレットの使い方

楽天商品リンクショートコードを手軽に作成するための「楽天リンク作成ブックマークレット」の登録方法と、使い方の解説です。

wp-cocoon.com

 

➋ このコードを「お気に入りに登録」します。

今回はGoogleで説明します。

まず「新規タブ」を開き、お気に入り登録します。

 

➌ ブックマークバーの「新しいタブ」の上で右クリック → 編集

 

➍ URLの部分に、➊でコピーした「ブックマークコード」を貼り付け → 保存

※名前は「楽天商品リンク」な度に変更すれば分かりやすいかも

 

 

記事に楽天商品リンクを挿入する

➎ 「ショートコード」から「楽天商品リンク」を選択

（商品タイトル変更）なら、記事タイトルを変更できるのでオススメ！

 

 

➏ 楽天市場のサイトへ行きます

【楽天市場】Shopping is Entertainment! ： インターネット最大級の通信販売、通販オンラインショッピングコミュニティ

楽天市場はインターネット通販が楽しめる総合ショッピングモール。楽天ポイントがどんどん貯まる！使える！毎日お得なクーポンも。食品から家電、ファッション、ベビー用品、コスメまで、充実の品揃え。

www.rakuten.co.jp

 

➐ 商品リンクを作成したい商品のページをひらき、ブックマークバーに設置した「楽天商品リンク」をクリック

すると下記のコードが表示されるので、rakuten id をコピー

 

➑ ショートコードの「rakuten id」の部分に貼り付け

 

▼ ちなみに商品タイトルなしだと、このように長いタイトルが表示されてしまいます。

ですので、自分で短いタイトルをつけると見やすくなります。

 

▼ タイトルを自分でつければ、こんな感じです

 

また、"キーワード" に入力した内容が、ボタンを押したときの検索キーワードになりますので、忘れずに設定しておきましょう。

商品リンクをカスタマイズする（CSSコピペOK）

Cocoonの商品リンクは、デフォルトでは▼こんな感じです。

 

これを、▼こんな風にカスタマイズします！

 

画像を小さくする

➊ 左メニュー「外観」→「テーマファイルエディター」を選択

 

➋ 下記CSSコードをコピーします。

 

➌ 以下の場所に貼り付け →「ファイル更新」をクリック

 

枠線の太さを変更する

➊ 左メニュー「外観」→「テーマファイルエディター」を選択

 

➋ 下記CSSコードをコピーします。

 

➌ 以下の場所に貼り付け →「ファイル更新」をクリック

 

料率を非表示にする

➊ 左メニュー「外観」→「テーマファイルエディター」を選択

 

➋ 下記CSSコードをコピーします。

 

➌ 以下の場所に貼り付け →「ファイル更新」をクリック

 

金額＆ロゴを非表示にする

➊ 以下左メニュー「Cocoon設定」→「Cocoon設定」

 

➋ 上のタブから「API」を選択

 

➌ 楽天の項目にある「価格を表示する」「ロゴを表示する」からチェックを外す

 

➍ 左下「変更をまとめて保存」をクリック

 

ボタンの色を変える

ボタンの色をカスタマイズする方法は、たくさんの方がが出しておられるので、ピックアップサイト様を紹介します。

 

▼CSSコードで変更したい / うぇぶあしび様　

※私もお借りしています！！

【Cocoon】Amazon、楽天の商品リンクをカスタマイズする方法

Cocoonに実装されたAmazonと楽天の商品リンクが貼れるショートコード、めちゃめちゃ良いですね。価格まで表示されるようになってるし。このブログでは今までカエレバを使ってまして、最近人気のあるRinkerにしようかな〜なんて思ってたけど

web-ashibi.net

 

▼プラグインで変更したい / fillnote様

【カスタマイズ】Cocoonの商品リンクボタンを管理プラグインRinkerの色にしてみた

みなさんは、商品リンク管理プラグインRinkerを使っていますか？ 私はRinkerが出た当初にインストールはしました。 ⇒【報告】Cocoonにカエレバ代替Rinkerプラグインを導入してみたよ！ ただ、最近はCocoon標準で同様のこと

fullnoteblog.com

 

完成

こんな感じで表示されれば完成です！ ※上記は画像です

 

 

 

▼ 実際の商品リンクはこちらです