Site icon Tips Note by TAM

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

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の公式発表に十分ご注意ください。