50のてならい

50のてならい

50になってからネットについて色々と検証していくブログです。

はてなブログ カエレバの登録と商品紹介の方法

  • f:id:jr0704japan:20170518110851j:plain

  • 商品を紹介する場合、楽天とアマゾンの両方で一度に紹介出来たら便利だと思いませんか?

    楽天ポイントを貯めている人は楽天で買い物がしたいですし、Amazon会員の人はAmazonで買い物がしたいですよね。

    そこで、利用者のニーズを考えてカエレバに登録をしてみました。そのブログパーツのカスタマイズについての紹介をしたいと思います。

  • カエレバでアマゾンと楽天の連携リンクを作成する

    カエレバ の説明ですが、商品紹介用のブログパーツです。

    これについては、カエレバ のサイトにある、開発者:かん吉さんのコメントで良くわかります。

    「カエレバ」ブログパーツは、ブログ上で、特に量販品を紹介するためのブログパーツです。アマゾン、楽天市場Yahoo!ショッピングなどの複数のネットショッピングモールへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます

    楽天ポイントを貯めている人はAmazonでは買いません。彼らは、あなたが紹介した商品を買おうと思っても、楽天へのリンクがなければ、楽天市場へ移動して探します。報酬率を意識して楽天を紹介しないことは、読み手のニーズ無視した、無意味な機会損失です!

    出典 http://kaereba.com/

    商品リンクの見本

    私が目指す商品リンクは、以下のような感じで代表的なAmazon楽天市場・Yahooショッピングが網羅されているものです。わかりやすくて、スマートでカッコいいですね!

    カエレバでは、もしもアフィリエイトに登録していれば、もしもアフィリエイト経由で楽天とアマゾンの商品を紹介することが簡単に出来ます。

    カエレバ ユーザーデーター入力の方法

    カエレバを使用するには、サイトに行ってユーザーデーター入力の作業が必要です。

    カエレバでのユーザーデーター入力の登録方法ですが、結構手こずりました。

    カエレバで、楽天AmazonとYahooの商品をもしもアフィリエイト経由で紹介する場合にはそれぞれのもしもIDが必要となります。

    私の場合には、もしもアフィリエイトで提携済みだった楽天のもしもIDは、すぐにわかりましたので、そちらを先に入力しました。

    その間にもしもアフィリエイトからAmazonとの提携申請をしていました。

    その後、Yahooショップピングのリンクも作成したかったので、バリューコマーズアフィリエイトにも登録しました。

    それらを順番に紹介していきます。

    1. 楽天のもしもIDの取得
    2. AmazonのもしもIDの取得
    3. YahooショッピングのIDの取得

    楽天のもしもIDの取得

    カエレバのユーザーデーター入力の、楽天の画面を切り取ってます。

    楽天サービスのIDはご自身が楽天を利用する際のIDです。

     楽天サービスを利用していない方は、楽天会員に登録して下さい。

    並立リンク用というのがわかりにくかったので説明します。

    もしももわかりにくかったので説明します。

    並立リンク用の探し方

    まずは、楽天アフィリエイトの会員になります。

    楽天アフィリエイトはブログの審査とかないので、楽天会員ならばすぐに利用可能です。

     楽天アフィリエイトトップページの右上部にある「ページのURLを入力」の欄に以下のアドレスをコピーして貼り付けます。

    http://search.rakuten.co.jp/search/mall/%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0/-/

    カエレバの解説にあった上記のURLですが、ちなみにガンダムでした!(^^)!

    ② 貼り付けたら、右側の「リンク作成」をクリックします。

    「リンク作成」をクリックすると、次の画面の下側にソースをコピーして掲載するのソースが表示されていると思います。

    その中の「http://hb.afl.rakuten.co.jp/hgc/ ~ /?pc=」の「~」部分をコピーして、ユーザーデーター入力の欄に貼り付けてください。

    字が小さくて見えずらい場合には、画面表示を大きくして見ましょう。

    拡大してみますね!  1行目の部分にあります。

    <a href=”https://hb.afl.rakuten.co.jp/hgc/****c*ae.*c*****.*aee**fa.***ecff*/?

    上は、数字の部分を*印にしてます。アンダーラインの部分の文字をコピーして、ユーザーデータ入力に貼り付けて下さい。

    もしものa_idの探し方

    もしもアフィエイトにログインして、楽天市場 商品購入」と入力して検索をクリックして下さい。

    2件表示されました。

    下の楽天市場 商品購入」広告リンク取得をクリックします

    ここからです、この広告リンク内のa_id=******の 6桁の数字を探しましょう。

    この6桁の数字をコピーして、そのままカエレバのユーザーフォームに貼り付けましょう。

    AmazonのもしもIDの取得

    カエレバのユーザーデーター入力の、Amazonの画面を切り取ってます。

    ① アマゾンアソシエイトにログインした場合右上にあります。

    アソシエイトID:******-22  となっています。(***は貴方が決めたidとなります)

    ② もしもアフィエイトにログインして、amazon.co.jpと入力して検索をクリックして下さい。

    1件表示されました。

    下のAmazon.co.jp」商品購入」広告リンク取得をクリックします

    ここからです、この広告リンク内のa_id=******の 6桁の数字を探しましょう。

    この6桁の数字をコピーして、そのままカエレバのユーザーデーターに貼り付けましょう。

    Yahoo!ショッピングのもしもIDの取得

    カエレバのユーザーデーター入力の、Yahoo!ショッピングの画面を切り取ってます。

    カエレバにも、調べ方は載っていたのですが、画面が変わっており解りにくかったので私がやった調べ方の詳細を書きます。

    バリューコマース アフィリエイトのサイトに行って会員登録して下さい。

    会員登録出来たら、バリューコマースアフィリエイトにログインしてください。

    下のような画面になります。

    右下のほうにあるYahoo! ショッピング」のバーナーをクリックしてください。

    バリューコマースアフィリエイトは、Yahoo!ショッピングと最初から提携されています。

    「広告作成」をクリックします。

    「広告作成」をクリックします。

    サイトは審査中でしたが広告作成は出来ました。

    ここからです、この広告タグのsid=*******の 7桁の数字を探しましょう。

    その後ろにpid=*********の9桁の数字を探しましょう。

    このsidとpid桁の数字をコピーして、そのままユーザーデーターに貼り付けましょう。

    カエレバのユーザーデータ入力フォームを完成させる

    楽天・アマゾン・Yahooのa_idを入力して完成させます。

    全ての項目を調べられたら、「保存」をクリックして下さい。

    カエレバのhpに保存したデータの移動方法が載ってました。

    他のブラウザ、他のパソコンにデーターを移動したい方は、登録データーバックアップ&バックアップデーター復活をご利用ください

    出典 http://kaereba.com/#userform この機能は、便利ですね。かん吉さんありがとうございます!

     

    追記です。カエレバで「AmazonアソシエイトID」や「楽天ID」が登録されている場合、「もしもアフィリエイトID」が優先されてリンクされるようです。
    「もしもアフィリエイト」を利用しなくなったら、「もしもアフィリエイトID」をカエレバのユーザーデーター入力から削除すればOKです。

    カエレバでのブログパーツ作成方法

    ① 商品キーワードに入力してクリック

    ② ブログパーツを作る」をクリック

     図のように【amazlet風-2(cssカスタマイズ用)】を選択してください。

    ようやく、商品リンクが出来ました!

    この、スタイルにするには、スタイルシートCSSを貼り付けてカスタマイズしないとこの形にならないので次の項目で紹介します。

    スタイルシートを追加して希望のブログパーツにする

    カエレバの作者のかん吉さんのページに、カエレバのカスタマイズの方法がのっています。

    Amazlet風-2(cssカスタマイズ用)というデザインに、外部CSSを当てることで、ヨメレバ・カエレバ系サービスのデザインをカスタマイズできます。

    出典ヨメレバ・カエレバのスマホ対応 ユーザーさんが考えてくれたカスタマイズまとめ

    かん吉さんのHPに、ユーザーの方々が色々とカスタマイズされたカエレバのブログパーツがありますので、自分の好みの表示方法で使われたら良いと思います。

    2018.2.5 追記

     

     これまで、はてなブログでのカエレバのコードがわからずに苦労していました。

    しかし、ようやく、はてなブログでのPC版での店舗名を横に並べる方法がわかりました。

     

    これまでは、主婦ライフちゅんこさんのカエレバのコードを使わせてもらっていたのですが、PC版ではどうやってもボタンが縦方向に並んでいました。

    ちゅんこさんに質問もしてみたのですが、はてなブログで作成されている方のを参考にしてみて下さい。と言われました。そりゃ、そうですよね。同じ環境を作れないですからね。

     

    そこで、今回主婦ライフちゅんこさんのカエレバコードを改変されたもっちさんのカエレバコードに差し替えました。

     

    もっちさんに質問すると、スマホ版の表示も改良してくださり希望通りの表示となりましたので、私も差し替えました。特に、PC版できちんと横に並ぶなので気にいってます。4店舗ならば横2列となります。色々な人の要望に答えられて配慮された設定だと思います。

    クリックすると明確に色が変わるようにされていて視覚的に分かりやすいです。

     

    特徴を記載します。

    • ショップボタンにカーソルに合わせると色変わる

    • すべてのショップのボタン化に対応

    • 画像を中央表示に

    • スマホ表示のボタンを大きくしました(2018.2.2)

    happylife-tsubuyaki.hatenablog.com

    詳しい説明と貼り付けするコードについては、もっちさんの記事を参考にされて下さい。

    コードはレスポンシブ対応のテーマのはてなブログなら、デザイン>カスタマイズ>デザインCSSの一番下にいれましょう!

     

    なお、wordpressのSimplicytyをテーマにしている記事はこちらに書いてます。

    chan-biku.club

     

    表示にひと手間加えてクリック率をあげる方法

    途中に自分なりのメッセージを入れてみると、クリック率があがります。控え目ですけど目にとまると違いますよね。

    カエレバからコピーしたcssにメッセージを追加

    1. カエレバからコピーしたCSSテキストエディタにはりつけます。
    2. テキストエディタカエレバという文字をさがします。
    3. カエレバ</P></div></div> の後ろにメッセージを追加
    4. <a> メッセージ </a>といれます。

    <div class=”cstmreba”>
    <div class=”kaerebalink-box”>
    <div class=”kaerebalink-image”><a href=”//af.moshimo.com/af/c/click?a_id=765353&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;s_v=b5Rz2P0601xu&amp;url=http%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB00IEA5210%2Fref%3Dnosim” target=”_blank” rel=”noopener”><img style=”border: none;” src=”https://images-fe.ssl-images-amazon.com/images/I/51K-9AHP51L._SL160_.jpg” /></a><img style=”border: none;” src=”//i.moshimo.com/af/i/impression?a_id=765353&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062″ width=”1″ height=”1″ /></div>
    <div class=”kaerebalink-info”>
    <div class=”kaerebalink-name”><a href=”//af.moshimo.com/af/c/click?a_id=765353&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062&amp;s_v=b5Rz2P0601xu&amp;url=http%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB00IEA5210%2Fref%3Dnosim” target=”_blank” rel=”noopener”>ザバス ホエイプロテイン100 ココア味【50食分】 1,050g</a><img style=”border: none;” src=”//i.moshimo.com/af/i/impression?a_id=765353&amp;p_id=170&amp;pc_id=185&amp;pl_id=4062″ width=”1″ height=”1″ />
    <div class=”kaerebalink-powered-date”>posted with <a href=”http://kaereba.com” target=”_blank” rel=”nofollow noopener”>カエレバ</a></div>
    </div>
    <a>ココア味なのですこし甘いですけど疲れた時にはおすすめ!</a>            追加場所

    まとめ

    これで、私も念願であった、一つの商品を楽天AmazonとYahooショップで紹介することが出来るようになりました。

    ただ、はてなブログでの表現方法が私には理解出来ませんでした。スマモ表示は良いのですが、PC表示の場合のボタンが縦方向に並んでしまうのが気にいりませんでした。

    ようやく、PC版でのボタン表示も希望の形となったので、記事を追加してます。

     

    カエレバの存在を教えてくれたのは、こちらの記事です。

    美雪さん、どうもありがとうございました。

    www.kansai-banzai.com

     

    今回は、もしもアフィリエイトとカエレバの紹介でした。