カエレバをブログに設置する方法
2016/05/22
おすすめ記事個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス裏話 | vdeep
こんにちは、okutani(@okutani_t)です。私は当ブログvdeepで、Amazonの商品をたまーに紹介しています。
今まではAmazonJSプラグインを使っていたのですが、Amazon以外にも楽天やYahoo!ショッピングのリンクも利用できるカエレバにしてみました。
今回は「Amazon」と「楽天」の2つをカエレバに登録して利用する方法を紹介します。参考にしてみてください。
スポンサーリンク
もくじ
カエレバを利用する前準備
では、カエレバの利用方法をみていきましょう。下記のカエレバ公式サイトにアクセスします。
LINK商品紹介ブログパーツ カエレバ
下にスクロールすると「ユーザーデータ入力」フォームがあります。ここに自身のアフィリエイトIDを入力していきましょう。
AmazonアフィリエイトIDをカエレバに登録
AmazonアフィリエイトのIDをカエレバに登録していきましょう。ちなみに入力したIDはクッキーに保存されるので、一度入力して「保存」ボタンを押しとくだけで、次回から省略できます。
「サイト名」「AmazonのアフィリエイトID」を入力。
AmazonアフィリエイトIDがわからない方は、次の方法で調べてみましょう。
AmazonアフィリエイトIDの調べ方
AmazonのアフィリエイトIDは、公式の管理ページにログインして確認できます。
このトラッキングIDをカエレバに登録すればOKです。
楽天アフィリエイトIDをカエレバに登録
次に楽天アフィリエイトのIDをカエレバに登録しましょう。
同じく、IDの調べ方を載せておきます。
楽天アフィリエイトIDの調べ方
楽天アフィリエイトのIDの調べ方は下記の手順で進めてください。
メインリンク用IDの調べ方
メインリンク用のIDはこちらから確認できます。
このコードをコピーして利用しましょう。
並列リンク用のIDの調べ方
並列リンク用IDの調べ方はちょっとややこしいので、ゆっくり見ていってください。
まずは、楽天アフィリエイトTOPページに移動します。
LINK楽天アフィリエイトTOP
右上の「ページURLを入力」に「http://search.rakuten.co.jp/search/mall/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0/-/」を入力し、リンク作成(PCモバイル共通)ボタンをクリック。
少し下にスクロールしたあと、「リンクを掲載する」にある「http://hb.afl.rakuten.co.jp/hgc/ 〇〇 /?pc=」の「〇〇」部分をコピーしましょう。ここが並列リンク用IDになります。
並列リンクについてよく分からなかったので調べてみると、並列リンクはリンクが切れていた場合に「キーワード検索結果」のページへ移動する仕組みのことらしいです。
カエレバでは、メインリンクと並列リンク両方を設定しましょう。両方設定しないと利用できないようなので注意してください。
ブックマークレットをお気に入りしておく
設定をブックマークレットでお気に入りにしておけば、すぐにアフィリエイトリンクが作成できて便利です。
先ほどのID設定フォームの少し上に「カエレバブックマークレット」リンクがあるので、ブラウザのツールバーやお気に入りに追加しておきましょう。
こんな感じでブックマークしておきました。
カエレバを使う前準備はこれで完了。
商品リンクを作成する
では、商品リンクを作成してみましょう。作成方法は2通りあり、「商品ページを開いた状態でブックマークレットを起動」もしくは「カエレバ公式サイトで商品を検索する」方法があります。
今回は、ブックマークレットを使ったリンクの生成方法についてみていきます。
ブックマークレットを使ったリンク生成
まずは、リンクを載せたい商品ページを開きましょう。今回はAmazonで商品ページを開きましたが、楽天でもOKです。
かわいいハリネズミのマグカップにしてみました。この画面で先ほど追加した「カエレバブックマーク」をクリック。すると、自動で商品情報がカエレバに表示されます。
「商品キーワード」に商品に関係あるキーワードを手動で入力、「Amazon」「楽天市場」にチェック。
デザイン等も変えられるので好きにいじってみましょう。今後、CSSでデザインをいじりたい方は「amazlet風-2(cssカスタマイズ用)」を選んでおくと良いですね。
設定が済んだら「更新」ボタンをクリックし、下のコードを丸ごとコピーします。
コピーしたコードを自分のブログに貼り付ければ、カエレバを使った商品リンクが表示されます。
また、次回以降はAmazonと楽天にチェックがすでに入っているので、商品キーワードを入力したら「更新」ボタンを押すようにしましょう。
リンクを確認する
貼り付けたリンクを確認してみましょう。
かわいいはりねずみのマグカップが表示されました。
※リンク右の矢印アイコンは外部リンク表示のプラグインを使っているためついています。普通はついていません
では、1,2,3と番号を振った、それぞれのリンク先を確認してみましょう。
①商品名リンク先はブックマークレットを使ったページ
1の商品名のリンクをクリックしてみましょう。
Amazon商品ページが開きました。
商品名のリンク部分は、ブックマークレットを使ったサイトの商品ページになっています。なので、楽天のページを開きながらブックマークレットを起動すれば、楽天の商品ページのリンクになります。
ブックマークレットを起動するのはAmazon、楽天どちらでも良いですが、リンク切れが少ないAmazonのページでおこなう方がオススメですね。
②Amazonリンクは検索画面が表示される
2のAmazonリンクをクリックしてみます。
これから分かるように、Amazonのリンクをクリックすると、カエレバサイトで入力した「商品キーワード」の検索結果画面が開きます。
なので、なるべく商品名に近いキーワードが望ましいです。
③楽天リンクも検索画面が表示される
3の楽天リンクをクリックします。
同じく商品キーワードに入力したキーワードで、検索した商品ページが表示されました。
商品キーワードは適切につける必要があるため、なるべくなら商品キーワードは商品名にしてあげるのが良いですね。
カエレバの設置方法＆使い方は以上です。お疲れ様でした。
まとめ
カエレバを使うことで、複数のアフィリエイトリンクを扱うことができました。
ブックマークレットを使ってかんたんにリンクを作成することができ、商品キーワードは適切なものを入力することが望ましいです。
関連記事
CSSでレイアウトを整えたい方はこちらの記事もどうぞ。
iTunesの商品を紹介するポチレバも記事にしてます。合わせてどうぞ。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
