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

公開:2015年6月13日

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

追記:このページは次の元ページを転載したもの。ブログ運営会社からの指摘により、転載後に元ページを修正した。

作動メカニズムの概要

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

head内に入れる場合

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

記事内に入れる場合

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

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

JavaScriptコード

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

<script>
/*
 * Blog Redirect v1.0.0
 * Date: 2015-06-12
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;
var blogURL='http://'+location.hostname+'/'+'追加部分';//ブログURLとディレクトリを指定
var redirectList=[
['内部リンク末端','リダイレクト先URL'],//内部リンク末端とリダイレクト先のペア
['内部リンク末端','リダイレクト先URL'],//内部リンク末端とリダイレクト先のペア
];
var redirectListLength=redirectList.length;
var locationHref=location.href;
for(var i=0;i<redirectListLength;i++){
  if(locationHref==blogURL+redirectList[i][0]){
    document.write('<scr'+'ipt>location.replace("'+redirectList[i][1]+'");</scr'+'ipt>');
    break;
  }
}
</script>

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

コード

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

<script>
/*
 * Blog Redirect v1.0.0
 * Date: 2015-06-12
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;
var blogURL='http://'+location.hostname+'/'+'';//ディレクトリは未指定
var redirectList=[
['entry/hapilaki-sub','http://hapilaki.geo.jp/'],//URL末端とリダイレクト先のペア
['yahoo','http://yahoo.co.jp/'],//URL末端とリダイレクト先のペア
['?google','http://google.co.jp/'],//URL末端とリダイレクト先のペア
];
var redirectListLength=redirectList.length;
var locationHref=location.href;
for(var i=0;i<redirectListLength;i++){
  if(locationHref==blogURL+redirectList[i][0]){
    document.write('<scr'+'ipt>location.replace("'+redirectList[i][1]+'");</scr'+'ipt>');
    break;
  }
}
</script>

編集した部分の解説

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

  1. http://hapilaki.hateblo.jp/entry/hapilaki-sub にアクセスで当ブログの補足サイトへ
  2. http://hapilaki.hateblo.jp/yahoo にアクセスでヤフーへ
  3. http://hapilaki.hateblo.jp/?google にアクセスでGoogleへ

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

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

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

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

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

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

長所

短所

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

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

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

コード

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

<script>
/*
 * Blog Redirect v1.0.0
 * Date: 2015-06-12
 * Copyright (c) 2015 http://hapilaki.hateblo.jp/
 * Released under the MIT license:
 * http://opensource.org/licenses/mit-license.php
 */
;
var blogURL='http://'+location.hostname+'/'+'entry/blog-redirect';//
var redirectList=[
['#hapilaki-sub','http://hapilaki.geo.jp/'],//URL末端とリダイレクト先のペア
['?yahoo','http://yahoo.co.jp/'],//URL末端とリダイレクト先のペア
['?google#google','http://google.co.jp/'],//URL末端とリダイレクト先のペア
];
var redirectListLength=redirectList.length;
var locationHref=location.href;
for(var i=0;i<redirectListLength;i++){
  if(locationHref==blogURL+redirectList[i][0]){
    document.write('<scr'+'ipt>location.replace("'+redirectList[i][1]+'");</scr'+'ipt>');
    break;
  }
}
</script>

リダイレクト具体例

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

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

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

長所

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

短所

補足

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

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

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

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

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

リンク先の管理が楽ちん

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

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

まとめ

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

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

Amazon.co.jp 売れ筋ランキング: アフィリエイト/ネットビジネス の中で最も人気のある商品です

AdSenseコードを残したまま特定のページで広告を非表示にするJavaScriptプラグイン「AdSense Filter」を自作した - はぴらき合理化幻想

不可能を可能に!はてなブログのプロフィールページをカスタムできるJavaScriptプラグインを自作した - はぴらき合理化幻想

チョマテヨ「ちょ待てよ!jQueryの2回読み込み、プラグインあるからさ」 - はぴらき合理化幻想

JavaScriptで要素の移動/複製はappendChild・insertBefore・cloneNodeを使う、jQueryに依存しない - はぴらき合理化幻想

追記

2015年6月17日

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

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