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. Sometimes sites are broken in the Facebook in-app browser.
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, 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 phone. Note: the site works fine in the full Chrome and Safari Apps on the phone – it’s only a problem in Facebook’s in-app browser. See the fixes to debug the facebook in-app browser (in most cases) below!
How to debug and fix images, and other site aspects, not appearing on the Facebook in-app browser
So far, I have seen a few different scenarios that cause things to disappear in the Facebook browser. In most cases, you have mixed content issues. You are serving pages encrypted via https, with an SSL certificate, but some of the content is hard coded with “http” at the start. This might be because you switched from http to https for example. Your options depend on the amount of work involved. If you are able to find and replace in the database, you are best off doing that (after backing it up!). If it’s only a couple of images, then it might be quicker and safer to just reapply them. It might be that you are embedding a 3rd party piece of content (e.g. a Widget) and they don’t use https, in which case, your only option is to remove it or live with it (or ask them to get encrypted).
I’ve seen some cases where there is no mixed content, but portions of the content disappear from the iPhone Facebook in-app browser, but not from the Android Facebook in-app browser. This appeared to be due to wordpress page builders having a fight! Do if you try and use the Elementor page builder with the Divi theme that has its own page builder built-in, it can cause this issue. The solution was to change theme if Elementor was still needed.
Additionally, I’ve seen a case where Elementor was not loading scripts asynchronously, so sliders were being called before their script was ready and thus appearing as blank space. Check Elementor settings for the “async” option.
It also appears that iFrames can cause issues too with the Facebook browser refusing to render it and crashing the whole page with ERR_CONTENT_DECODING_FAILED message.
If this has helped save you lots of time and grief debugging, please consider helping out with a donation towards my next pair of running shoes! Much appreciated.
Also, if this has helped you, please say so in the comments below. 🙂
Read on for more issues with the browser.
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.
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. I’m guessing this is also why there aren’t more posts about this on the web – the geeks haven’t noticed. Most people don’t even know the option to disable the in-app browser 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