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