いまさらカエレバ的なリンク生成フォームを作った

いまさらですが、「カエレバ」的なリンク生成フォームを作りました。いまさらカエレバといわれても (カエレバ的なリンク生成フォーム)

慣れないJavascriptで書いたので、慣れている人は笑っちゃうコードだと思います。

できること

以下の商品リンクが生成できます:

  • Amazonリンク
  • 楽天リンク
  • Yahoo!ショッピング(バリューコマース経由)リンク

なぜ作ったか

  • Amazon APIを使うほどのことがない
  • WordPressプラグインはAPIが変わるといろいろ手間がかかりそう…。
  • プラグインの商品検索がいまいちで結局Amazonなどで検索している

使い方

以下を入力して生成ボタンを押す
  • 商品名など
  • 画像のリンク
  • Amazonのアソシエイト・リンク(テキストのみ)
  • (オプショナル) 楽天の商品リンク
  • (オプショナル) バリューコマースの商品リンク

Amazon

商品ページの上にあるアソシエイト・ツールバー→リンク作成→テキストからリンクを取得します。

画像URLはAmazonの商品の画像のURLをコピーしてきます。

楽天

楽天アフィリエイトのページから商品リンクを作ります。 リンクタイプは「リンクのみ」を選びます。

バリューコマース

少し面倒です。

  • 広告→提携状況→提携済みを選んでプログラムを選択。
  • 広告タイプはMyLinkを選んで再検索
  • 広告を作成 MyLinkコードを取得で出来たMyLinkコードをコピーする。
  • LinkSwitchタグとMyLinkで作ったリンクを両方入れます。
<script type="text/javascript" language="javascript">
    var vc_pid = "XXXXXXXXXX";
</script><script type="text/javascript" src="//aml.valuecommerce.com/vcdal.js" async></script>
<a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=ZZZZZZZZZ&pid=XXXXXXXXXXXXX&vc_url=https%3A%2F%2Fpaypaymall.yahoo.co.jp%2Fstore%2Fboox%2Fitem%2Fbk-4041081645%2F%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title" rel="nofollow"><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=ZZZZZZZ&pid=XXXXXXXX" height="1" width="0" border="0">Yahoo!</a>

LinkSwitchタグは自分のサイトでheaderなどで読み込んでいるなら不要です。

自分のサイトに設置する場合

  • kaerebaLike.js(GitHubリンク)をサイトに読み込みます。 WordPressなどの場合は検索すれば正しいお作法での読み込み方が見つかります。
  • カエレバのcssを設定しておきます。
  • 次のようなhtmlを書きます:
    <div id="form_affl"></div>
    

おことわり

  • 自分のために作ったものを、使いたい人がいればと考えて公開するものです。ですから無保証です。使用する場合は自己責任でお願いします。
  • ぼくから使って下さいと頼むものではありません。ですので、文句がある方は使用しないで下さい。スキルがあるなら自分で勝手に修正なりして下さい。
  • バグレポートや要望はコメント欄に書かないで下さい(その類いのコメントはすべてゴミ箱行きです。あまりしつこい場合はブロックします)。ぼくが困ったところがあれば直しますが、他人のためには直しません。