読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

【追記あり】アフィリエイトリンクURLを内部リンク化で短縮や隠す方法、リダイレクトにPHP使えなくてもOK

web制作 JavaScript はてなブログをカスタム 自作した ブログ戦略

アフィリエイトの長いURLを短縮したり隠したりするのに、PHPを使えないブログサービスでも利用できる方法を紹介する。自分のブログ内のURL(内部リンク)でリダイレクトできるので、他のサーバーを使うよりも利便性がいい。

2015年6月19日追記:ブログ運営会社の規約に抵触するとのことで、このページで公開していたコードはすべて削除した。コードや修正前のこのページの内容は次のページで確認できる。

はてなブログで使うとブログを強制停止されるので注意!

作動メカニズムの概要

内部リンクとリダイレクト先のペアを書いたJavaScriptのコードをhead内もしくは記事内に追加する。方法は二通りあるが、どちらか一方だけでいい。

head内に入れる場合

ブログ内で記事がないページにアクセスすると404になるがテーマ部分(共通部分)は読み込まれる。この特性を生かしリダイレクト用の内部リンクとして使う。

記事内に入れる場合

記事URLにIDやパラメーターを付与することで転送先を切り替える。

売れ筋ランキング: JavaScript の中で最も人気のある商品です

JavaScriptコード

次のコード内で背景色がある部分を適宜編集してhead内もしくは記事内に追加する。著作権の部分を削除しない限りは自由に改変して使える。

削除

head内に追加する場合の編集具体例

コード

次のコードをコピペでhead内に入れて作動を確認できる。

削除

編集した部分の解説

背景色がある三行それぞれを当ブログに当てはめて解説すると次のとおり。

削除

2015年6月現在のはてなブログでは上記3パターンはいずれも機能する。行数に制限はないのでコピペで必要なだけ増やし同じ要領で編集する。(当ブログではhead内から上記コードを削除しているので、上記3つのURLにアクセスしてもリダイレクトされない。)

ブログサービスによっては記事が存在しないページへアクセスすると自動でエラーページへリダイレクトするものがある。その場合でも3行目の「?」を先頭に持ってきたURLでは大丈夫かもしれない。

特定のディレクトリを指定しておく

リダイレクト用の内部リンクのディレクトリを指定しておくことも可能。たとえば次のようにリダイレクト用のURLには毎回to/を入れる場合を考える。

削除

追加部分to/を入れれば、内部リンク末端にはhapilaki-subだけを入れるだけでいい。to/hapilaki-subとしなくていいので少しだがコードを短くできる。

headに追加する場合の長所と短所

長所

  • head内でコードを読み込むのでリダイレクトまでの時間が短い。
  • リダイレクト用の記事を作成する必要がない。

短所

リダイレクトの数が多くなればなるほどheadが大きくなる。リダイレクトと関係のない普通の記事ページでもコードは読み込まれるので、全ページの読み込みが若干遅くなる(体感するほどではないかもしれないが)。

売れ筋ランキング: JavaScript の中で最も人気のある商品です

記事内に追加する場合の編集具体例

コード

次のコードをコピペで任意の記事内に入れて作動を確認できる。

削除

リダイレクト具体例

次のリンク先に飛ぶとリダイレクトされるのを確認できる。

削除

IDやパラメーター、もしくはその両方を設定してリダイレクト先を切り替えられる。

削除

記事内に追加する場合の長所と短所

長所

リダイレクト用の記事をひとつ決めておけば、headにコードを追加する必要がない。

短所

  • 内部リンクURLが長くなる。記事ページのURL+パラメーターもしくはIDになるので。
  • 記事部分でコードを読み込むのでheadに追加する時よりもリダイレクトに時間がかかる。リダイレクトされるまでの間に記事が表示されるので、CSSでbody{display:none;}などをコードの前に設定しておくのもあり。

補足

PHPリダイレクトと比較して

サーバーに置いたリダイレクト用のPHPファイルにアクセスする方法だと、そのサーバーが落ちているとリダイレクトされなくなる。当ページの方法であればそのリスクがない。

JavaScriptを無効にしていると機能しない

ブラウザの設定でJavaScriptを無効にしているとリダイレクトされない(下記ページ参照)。この点はPHPでリダイレクトする場合に劣る。

低スペックPCのブラウザでタブ99個開いても快適に閲覧するおすすめ簡単設定 - はぴらき合理化幻想

リンク先の管理が楽ちん

記事ページごとにアフィリエイトリンクを入れている場合、そのリンクURLが無効になるとページごとにリンクを張り替える必要がある。

内部リンクでリダイレクトしていれば、その内部リンクのリダイレクト先を変更するだけでよく、各記事ページのリンクを張り直さなくていい。

まとめ

404ページをリダイレクトページとして有効活用したり、記事ページURLにIDやパラメーターを付与したりすることで、ブログサービス内でリダイレクト用のページを作成できる。

追記

2015年6月17日

自動でリダイレクトするのはブログサービスによっては規約違反になるかもしれないので注意!

はてなブログはダメみたい><

2015年6月19日

ブログ運営会社からの指摘により、規約に抵触する部分を当ページ内からすべて削除した。

2015年6月24日

運営会社とのやりとりを次のページにまとめた。

はてなブログ利用規約違反で運営から警告されたが記事を修正して問題解決したまとめ - はぴらき合理化幻想

売れ筋ランキング: JavaScript の中で最も人気のある商品です

てすとてすと