Kirabaはシンプルで使いやすい写真素材ライセンス販売サイ…
サイト制作後ブラウザチェックも済まして公開した後にFacebookアプリでシェアして紹介したところ、ちょっと挙動がおかしい。cssのactiveの挙動がデスクトップ版のFirefoxだけ他のブラウザと異なっていたため、PHPで判定してデスクトップ版Firefoxだけ異なるcssを適用していたのが、なぜかFacebookアプリ内ブラウザにも適用されていました。
そのため、facebookアプリ内ブラウザをphpで判定して解決したのでその方法を紹介します。
シェア7.6%意外と多いFacebookアプリ内ブラウザ
アメリカ国内の統計データではモバイルブラウザの7.6%のシェアがあるとのことです。シェアが意外と多いというのもありますが、Facebookで紹介しないと見てもらえない人というのもいます。HP制作実績などを紹介する時は誰も検索してまで見てくれません。その場合は100%近いユーザーがFacebookアプリで閲覧する可能性が高いので影響は大きいです。
Safariの背後に「Facebookブラウザ」が急接近
User Agentの確認
User Agentを確認します。 “FB”という文字列が入っているのはFacebookアプリ内ブラウザ固有だったので、これを使って判定していきたいと思います。
Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16C101 [FBAN/FBIOS;FBAV/204.0.0.31.101;FBBV/138239255;FBDV/iPhone9,2;FBMD/iPhone;FBSN/iOS;FBSV/12.1.2;FBSS/3;FBCR/ド-コ-モ-;FBID/phone;FBLC/en_US;FBOP/5;FBRV/139187324]
PHPで判定
PHPで判定していきます。
if ( isset($_SERVER['HTTP_USER_AGENT']) && strpos($_SERVER['HTTP_USER_AGENT'],'FB') === true ) : // facebookアプリブラウザの場合の処理 endif;
trueをfalseに変更すればfacebookアプリ内ブラウザでない場合の条件判定ができます。