Have you noticed that the Facebook App uses an “in-app” Internet Browser? This means that when you click a link on a Facebook post, instead of opening in the main Chrome or Safari App (or whatever your phone’s default browser is), the target site actually opens inside a Facebook window. On Android devices, this behaviour can currently be turned off in Facebook App settings, so links open in your chosen browser as normal. On Apple devices, it cannot be turned off.

Why has Facebook done this?

Facebook says that it speeds up the user experience because they don’t have to switch to the full browser. They might have a point on older phones, but the difference on modern fast phones between opening a site in the in-app browser and opening it in Chrome, for example, is negligible.

I expect the real reason is that Facebook doesn’t want you to leave. You are the product that Facebook is selling to its advertisers and if it can stop you from leaving Facebook and serve more adverts to you, it makes more money. This might also explain the difference between it being optional (but default) on Android and mandatory on Apple phones – on Android, there is a “Back” button that navigates between apps, so pressing back from the site in Chrome will go back to Facebook, but that facility doesn’t exist on Apple.

How does this alter the site visitor experience?

There are no benefits to users. However, there are a few downsides to this behaviour:

  • Sites displayed incorrectly
  • Google Analytics data incomplete
  • Basic browser features missing like History and Bookmarks

Site displayed incorrectly

The most important potential issue is that the site might not display as intended, leading to confusion for the visitor and loss of revenue for the site owner. Facebook is using the main browser app (e.g. Chrome or Safari) inside Facebook, so in theory, sites should look right. In practice, it doesn’t work out like that.

I have seen a few examples. Things I’ve spotted so far are buttons appearing in the wrong place and background images not appearing at all. I expect this site will be fixed soon, so I’ll describe it too. https://www.tarrier.com/ Currently, if you paste that link into a Facebook post and then follow the link from that post, it looks fine on a Samsung S4 Mini, but on a Moto G4Plus, the homepage is missing some background images which is a huge problem. White text is readable on a dark background image, but it completely disappears on the MotoG. Note: the site works fine in the full Chrome and Safari Apps on the MotoG – it’s only a problem in Facebook’s in-app browser.

Here’s the working Chrome version

Site not working 1 Facebook in-app browser

Here’s what the same site looks like on the MotoG in the in-app Facebook browser

Again, here’s the working Chrome Version

Site not working 2 Facebook in-app browser

And here’s the Facebook in-app version with the text completely invisible because it’s white on white!

Google Analytics data incomplete for Facebook in-app browser

The next issue is that it messes up the “technology” section of Google Analytics. Safari has a reporting section for “in-app”, but Chrome doesn’t make the split.

in-app browsers in Google Analytics

You can fix this by creating a custom dimension, applying it to your website and then adding it to reports in Analytics. Fiddly, but useful.

Basic browser features missing

Within the in-app browser, Facebook only gives you the option of “save” for a link, which saves it in Facebook’s own app. The history does not sync to the main browser app either, so If you use Google Chrome, there will be no record of the site in Google’s history and no way of adding it to your Google bookmarks.

In both Android and Apple, from the in-app browser, there is the option to open the link again in the default browser. It’s a bit of a faff, but if you want to add it to your bookmarks and history, it’s the quickest way.

Testing websites for in-app browser experience

As a  website creator, I like to test websites on a wide selection of possible display combinations. However, as a geek, the first thing I did when installing Facebook and Twitter apps on my Android devices was to disable the in-app browser. Most people don’t even know this option exists, so with the rise in the use of social platforms, I have had to turn the in-app browsers back on to ensure sites look good in those too, so now I test in:

  • Devices: PC, Android tablet, Apple iPad, phone.
  • Screen sizes: PC vs Laptop. Small phone vs big phone. Small tablet vs Big tablet
  • Browser: Chrome, Safari, Android browser and now, Facebook browser and Twitter browser

 

Previous post
Previous post
What if I told you that two lines of code…

Pin It on Pinterest