【Facebook】1つのURLで、PC・スマホページを振り分ける

JavaScript

Facebookページ内で「いいね！」している方向けのキャンペーンページなどを作成する際、
PC用・スマホ用とURLを分けてタイムラインに投稿することが多いと思いますが、
今回は、リダイレクトファイルを使用することで URLを 1つにまとめた事例をご紹介いたします。
　

【目的】

PC・タブレットからは、PC版Facebookページ（タブページ）へ、
スマホからは、モバイル版公式サイト（※Facebookページではありません）へ遷移させたい。
　

【解説】

リダイレクトファイルを使用することで
OGP情報も生かしたまま、PCとスマホを振り分けつつ URLを 1つにすることができます。
告知や情報をシェアをする場合も、このリダイレクトファイルのURLをお知らせするだけで大丈夫です。
　

【リダイレクトファイルのコード】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="【タイトル】" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="【アプリID】" />
<meta property="og:url" content="【このリダイレクトファイルのパス】" />
<meta property="og:image" content="【OGP画像のパス】" />
<meta property="og:site_name" content="【サイト名】" />
<meta property="og:description" content="【description】">
<title>【ページタイトル】</title>
<script type="text/javascript">
function checkDevice(device) {
   var ua = navigator.userAgent;
   if (device == 'apple') { return RegExp('iphone|ipod|ipad', 'i').test(ua); }
   else if (device == 'android') { return RegExp('android', 'i').test(ua); }
   else if (device == 'mobile') { return RegExp('iphone', 'i').test(ua) || (RegExp('android', 'i').test(ua) && RegExp('mobile', 'i').test(ua)); }
   else if (device == 'tablet') { return RegExp('ipad|android', 'i').test(ua); }
   else if (device == 'android mobile') { return RegExp('android', 'i').test(ua) && RegExp('mobile', 'i').test(ua); }
   else if (device == 'android tablet') { return RegExp('android', 'i').test(ua); }
   else { return RegExp(device, 'i').test(ua); }
}

if (checkDevice('iphone')) {location.href = 'https://【モバイル用ページ】';}
else if (checkDevice('ipad')) {location.href = 'https://www.facebook.com/pages/【遷移先のFacebookページ】';}
else if (checkDevice('android mobile')) {location.href = 'https://【モバイル用ページ】';}
else if (checkDevice('android tablet')) {location.href = 'https://www.facebook.com/pages/【遷移先のFacebookページ】';}
else{location.href = 'https://www.facebook.com/pages/【遷移先のFacebookページ】';}
</script>
</head>
<body>
</body>
</html>

※『https://www.facebook.com/pages/【遷移先のFacebookページ】』部分は
実際は以下のような形式になります。
『https://www.facebook.com/pages/（Facebookページ名）?sk=app_000000000000000（タブページのアプリID）』
　

（参考）

UAごとにリダイレクト／表示切替する方法（ Javascript編 / PHP編）｜ superChemical
http://zxcvbnmnbvcxz.com/%E3%83%86%E3%82%B9%E3%83%88/
　

　

こちらでご紹介しました情報は、2013年7月10日現在のものです。仕様変更により正常に動作しなくなることも考えられますので、今後のFacebookの公式発表に十分ご注意ください。