How to detect if a user is using the Facebook In-App Browser with Javascript

Have you ever needed to check if a visitor/user is browsing your application using Facebook’s in-app browser? This can actually be achieved rather easily with a bit of Javascript.

We can use navigator.userAgentto check which type of user-agent the user is using.

The navigator.userAgent property returns a string that represents the user agent for the current browser. We can use the match() method to search this string for the presence of either "FBAN" or "FBAV", which are unique to the Facebook in-app browser. If either of these strings is found, we can conclude that the user is using the Facebook in-app browser.

if (navigator.userAgent.match(/FBAN|FBAV/i)) {
  // Facebook in-app browser detected
} else {
  // Not using the Facebook in-app browser
}

However, it's important to note that the user agent string can be easily spoofed, so this method is not foolproof. A user could intentionally or unintentionally modify their user agent string to appear as if they are using a different browser."

There are also a couple of other ways to check if the user is using the in-app browser:

It is possible to check for the presence of the FB_IAB or FBAV objects: The Facebook in-app browser exposes certain objects in the global scope that you can check for. For example, you could use the following code to detect the presence of the FB_IAB object:

if (typeof FB_IAB !== 'undefined') {
  // Facebook in-app browser detected
} else {
  // Not using the Facebook in-app browser
}

Another way is to check for the presence of the in-app-browser class on the html element: When the Facebook in-app browser is used, it adds a class of in-app-browser to the html element. You can use this to your advantage by checking for the presence of this class using JavaScript:

if (document.documentElement.classList.contains('in-app-browser')) {
  // Facebook in-app browser detected
} else {
  // Not using the Facebook in-app browser
}

Keep in mind that both of these methods have their limitations and may not always work reliably. For example, a user could potentially modify the DOM to remove the in-app-browser class or add the FB_IAB object to the global scope, so it's always a good idea to use multiple methods for detecting the Facebook in-app browser.

To make it more foolproof, you can use several of these methods to detect it, this will make it a bit safer.

Thanks for taking the time to read this article and I hope you liked it! If so, please help support me by hitting that clap button.

P.S.: First, you should get my posts in your inbox. Do that here!

Secondly, if you like to experience Medium yourself, consider supporting me and thousands of other writers by signing up for a membership. It only costs $5 per month, it supports us, writers, greatly, and you have the chance to make money with your writing as well and reach 1000s of people with your writings. By signing up with this link, you’ll support me directly with a portion of your fee, it won’t cost you more. If you do so, thank you a million times.

If you’d like to catch up with me sometime, follow me on Twitter | LinkedIn, or simply visit my website.