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

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 & CSS parts, put it somewhere in your footer.php


<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>

.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:


<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!





See you with good news!

FuSuSu wrote 09/10/2019. Updated 10/10/2019. In Wordpress Tips & Codes.

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

Thank for your visit, I have a gift for you…

Leave a Reply

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

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!