background fususu logo boat

[Solved] How to detect Facebook in-app browser by Javascript...

small_logo 5739 views

Recently, I’ve received some reports from my readers. They said about some issues on my website that wouldn’t let them finish the order. After hours of searching, I’ve found out that they had used the Facebook in-app browser. So how to detect Facebook in-app browser and display a note to tell your reader?

What is Facebook in-app browser and how it will affect your website?

In the past, when someone opens your link posted on Facebook, they will be redirected to your website with a Web Browser like Safari or Chrome. Of course Facebook don’t like it. So they developed something that causes the link open in their own mini browser, as you can see in the picture (with Share button on top).

Due to my opinion, this Facebook in-app browser has many downsides:

1 – Sometimes the your pages won’t load properly, or they may crash and make your readers sad.
2 – Your readers can’t bookmark a site as a web browser does. 
3 – Your readers can only see one page at a time, and they can’t open new tabs.
4 – If your website allows reader to login, they have to retype their password again because in-app browser does not store login infos.
5 – And many other downsites, I believe.

A bad news is on mobile, which is mostly used for web surfing today, you can’t force user to open your link in normal web browser. Good news is you can notice your reader. So how to detect Facebook in-app browser and give your user better experience. That took me hours to find out how.

So how to detect Facebook in-app browser by Javascripts?

After hours of searching, I came up with many javascripts code but they didn’t work. Facebook did something that make their in-app browser looks like Chrome. That’s why many web browser js codes gave me false results. Until I found this code, the issue was solved.

<script>
 function isFacebookApp() {
        var ua = navigator.userAgent || navigator.vendor || window.opera;
        return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
    } 
    if(isFacebookApp()){
         // your action here if user using Facebook in-app browser
        alert('Are you using Facebook Browser? To get better experience, try press [...] and Open the blog in Chrome or Safari. Thank you!');
    }
</script>

You can just put the codes above to footer.php in your wordpress themes folder. It will show an alert to let user know that they can get better experience when open your link in web browsers.

Of course, if you don’t like an alert message box, you can make a notice bar.

Make a notice bar to show users when detect Facebook in-app browser?

HTML part, put it somewhere in your footer.php in your theme folder, before the body tag.


<div id="susu-fb-inapp" class="notice-bar">Are you using Facebook in-app Browser? To get better experience, please open the link with Chrome/Safari web browser (see the [...] button on the upper-right?) <br />
<span class="ok-button">OK, I understand</span></div>

This css part, put it in your custom css theme. You can put it in footer.php, but need wrapping it by a style tag.


.notice-bar {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20px;
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    z-index: 99999;
}
.ok-button {
    padding: 10px; 
    background: red; 
    border-radius: 10px;  
}

Now the JS part, make the notice bar fade-in when detect Facebook in-app browser, put in the footer.php:


<script>
function isFacebookApp() {
        var ua = navigator.userAgent || navigator.vendor || window.opera;
        return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
    } 
    if(isFacebookApp()){
         // fade in notice bar when detect Facebook in-app browser
          $('#susu-fb-inapp').fadeIn();
         // fade out notice bar when user press OK
          $('#susu-fb-inapp').on('click', function(event) {
              $('#susu-fb-inapp').fadeOut();   
          });
    }
</script>

Note: If you get a js error “$ is not function”… try to replace all $ with jQuery and it’ll be fine.

That’s how to detect Facebook in-app browser and notice your reader!

I hope you enjoy this blog, if you find it useful, just try and share. Feel free to comment below if you have any question!

TREASURE CHEST

!!!



You can wait for to get the hidden content, or just share to see it now. Sharing is the key to succeed!

UNLOCK NOW!

Have a good day!
Fususu wrote on 09/10/2019. Updated 28/09/2020.



P.s. To motivate me, you can google this keyword how to detect facebook in-app browser, find my blog there then comment the position. Thank you so much!

Wow, there are (12) Awesome Comments!



Leave a Reply

Your email address will not be published. Required fields are marked *

  1. avatar Novad

    Hi! can you detect the difference between Facebook and Messenger in-app browser? (And additionally Zalo in-app browser as well) ?

  2. avatar Alex

    Please For The First Code, How Do I Stop The JS Alert Box From Closing On Background Click?. When Someone Clicks On The Website Background, The JS Alert Box Closes. I Want It To Close Only When You Click On The ‘Ok’ Button.

    And Secondly, The Second Code Doesn’t Work For Me…. After Placing The HTML And CSS In Footer.php , Where Do I Put In The JS Code?

    • avatar Mr. Susu

      1. The first code is just to show an alert box which is browser default, you can do nothing with it. If you want to close only when click ‘ok’, use the second code, then add a little css to make it hovering on the background.
      2. Please right click by using Chrome, choose Inspect Element and see which error you get in the console? There is another chance that Facebook has changed after its update recently. I’ll test the code again.

      • avatar Alex

        Okay… Thanks Alot… Please Update Me After You Test The Second Code Again… I Will Check Back Later. Thank You So Much For Your Help.

      • avatar Mr. Susu

        The code still work. Can you test again, inspect the element, then screenshot for me the error you get?

      • avatar Alex

        Please Where Exactly Do I Put The Second Code… Or If You Can Put Me Through The Steps Of How To Install The Second Code. I Use WordPress… Maybe Am Putting The Code In The Wrong Place.

      • avatar Mr. Susu

        The css part you should put in to your themes custom css. The others you can put in the file footer.php in your theme folder, before tag. If it wont work, please screenshot or video your steps so I can take a look for you. You should also right click on chrome, inspect element to see if there are any conflict or error in the themes, screen shot them, I’ll take a look.

      • avatar Alex

        Thank You So Much, It’s Working Now… I Was Placing The Code At The Wrong Place… So I Followed Your Instructions And It Worked. I Also Had To Replace all $ with jQuery For It To Work. And I Added A Code To It, To Enable It Detect Instagram In Built Browser As Well… I Saw The Instagram Code Via The Link You Shared… Thanks Alot…

  3. avatar Sebastian Velandia

    Thanks for sharing this, but how can we just debug the issues in facebook in-app browser? my website just loads pretty bad, it works but CSS and responsive is just incorrect.

Share
Bài Tiếp Theo (15)
X