Why doesn’t my site display properly in the Facebook in-App Browser?

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!

Site working
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
Site working too
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!

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

You can spot that it’s definitely mixed content causing this by visiting your site in Chrome and checking that you see “https” at the start, but do not see the padlock at the start of the URL. You can use Chrome’s inspection tool to identify the mixed content (normally images or javascript), but it will obviously be the bits that you can’t see in the Facebook in-app browser!

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 none of that seems the issue, try using Chrome’s Inspect tool in mobile mode and check for errors there.

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.

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.

How to open in a browser

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

 

185 thoughts on “Why doesn’t my site display properly in the Facebook in-App Browser?”

  1. thank you for the article. I am having the same issue with my website, however it completely messes up the fonts and some of the pictures. Have you had success in resolving how a website looks through the Facebook browser?

    Thank you and regards

    1. Hi Ivan, no I never put any time into solving it because it hasn’t happened to any of my sites yet. I just put on the list of things to check before go-live. I’m not even sure how to debug it like you would in Chrome on a PC. What theme are you using? What’s your site?

  2. Hello, Charlesr, I used divi built a website, my website address is http://www.pawtrails.ie, it is responsive to mobile screens, but I found when I open the link through facebook social media in my mobilephone, the toggle button is not clickable anymore. It is clickable in google chrome browser.

    What is the cause for this? And what should I do for this please? I tried other social media, such as Wechat, the toggle button has the same problem. Thank you so much, if you could give some suggestions, I really appreciate it!

    https://stackoverflow.com/q/47737878/8468059

    1. Hi. I tried sharing the link in Facebook and then clicking it and I can use the menu and see the shop images ok. It might be you have a local cache issue. Try deleting the facebook and chrome cache. If you have changed something to fix it since yesterday when you asked, please tell me what, in case I come across similar! Thanks. Charles

      1. I didn’t change anything, the problem is that I found it works with some devices, like samsung. I am using iphone6, iphone5, Both of them doesn’t work. Which device are you using? Thank you

  3. Hi Charles, thanks for this article, this is the only one I found.. I just launched a site this week and have encountered this problem for the first time… The site when viewed in Facebook’s in-app browser causes the following issues: mobile menu doesn’t work, the cookies “accept” button doesn’t go away after clicking and I’m missing gaps in the site’s content … what is the best way to get a hold of a human who can respond to this kind of issue at Facebook – via Ads? Thank you kindly!

    1. Hi Steph, I don’t know of any way of addressing this issue. Facebook reply to things I report with “blah thanks blah improving services blah”. However, it might not be their fault. I compared the site on Chrome and the Facebook browser and I they looked the same. I could not see the cookies button on either and the menu worked fine on both. Which mobile device are you using? It might be phone vendors that need to do fixes. Difficult to know.

    2. Taylor Clements

      I am running to the same issue here Stephanie. My navigation and sliders do not show up on FB browser but work fine in every other browser. Did you find a fix to this?

      1. Hi Taylor. Steph probably won’t get a notification of your message because the system wasn’t working at the time she postsed. However, she posted over on stackoverflow that the problem was solved for her when she updated the Divi theme. I think that’s what you are running on yours. Are you able to update it and let us know if it fixes it for you? (Maybe take a backup first).

          1. Would you consider giving me an admin user temporarily so I can have a look around, in case I can spot anything? If so, please email me the details.

  4. Hi Charles
    Thanks for your post about this. I have a custom built gallery feature on my website and the pictures aren’t loading in that facebook browser.
    all the pages show broken thumbnails. Any insight would be greatly appreciated. Jo 🙂

    1. Hi Jo. I wish I knew how to solve it! I can see the problem on my Motorola G5plus. I suggest you report it to Facebook to see what they say. I have reported it using your site as an example – I’ll let you know if they say anything other than usual “we are working on improving the facebook experience blah blah” 😀 Have you tried a different gallery plugin? Also, check out my other post on getting the social sharing pic to look good – your sharing image no Facebook has the bottom and top hacked off.

        1. Oh great news Jo. Please would you share more details on what you changed? Or message them to me if it’s more appropriate.

        2. Facebook’s predictable reply was the copy/paste: “We’ve received your report and appreciate your patience as we work to fix technical problems on Facebook”….

        3. I am also having the same problem. It loads the first of 3 items in a gallery and loads the second 2 as broken thumbnails. The links still work but the image doesn’t load?

          Could you share what you did to fix this issue?

  5. Hi there,

    We get a similar issue, we’ve blog posts being shared on our Facebook timeline and until I installed the FB and to look, we’d not realised that it was loading nothing. This is really affecting views for posts that’ve had a lot of effort put into them. It works fine on all mainstream browsers. My default on my S7 is Chrome and I assume from the above that FB is embedding the content in the app using Chrome, but it’s just not working?

    The latest article to fail is https://www.thehopsack.ie/article/cayenne-a-life-saver

    Coming from a link on the main Hopsack FB page:
    https://www.facebook.com/thehopsack/

    Any pointers would be dearly apprecaited.

    Thanks,

    Duncan

    1. Oh wow. It’s not just bits missing Duncan. It doesn’t work at all 😮 I just get a blank page. I’m not near my PC right now. What software? WordPress? And if so, what theme? If you briefly switch to different theme (like the WordPress default theme) does it start working? Please report back.

    2. Back at my PC now. I see it’s something else, perhaps Drupal. It looks like pretty simple html apart from the script in the header that grabs the css. Is there anything you can disable? Like the popup that appears immediately when you arrive?

      1. Ah ha! I’d forgotten the developers had put that up and didn’t realise it was on every page! Defo going to remove it and see if it helps. It’d make sense. It was a temporary measure until we’d dedicated sign-up page. We’ll just leave it on the homepage for now and see if that helps the articles render properly in FB.

        Thanks so much for your prompt reply and help! I’ll feed back on how it pans out…

  6. Hey I’m having an issue where my coupon code and pricing for my order form won’t show up in fb browser, but it will in chrome and safari on mobile. Any way I can email you my site link? Thanks.

    1. Hi Phil. I replied via the drift messenger. Hopefully it sent you some messages via email. Did you get them OK?
      I tried the link via facebook browser on my phone, but it looked ok to me. Did you fix anything in between?

  7. Hi Charles,
    It’s amazing that you’re the only one who wrote about this bug.
    I too have this same problem. I guess it’s the http-to-https thing.
    1. Is there a way to automatically redirect only FB users to non-ssl version of the site?
    2. Can you take a look at my site and see if you can tell whats wrong? Try any link on facebook(dot)com(slash)knbis
    Thank you!

    1. Hi. I can’t see any mixed content. Try looking at the errors on your page using Chrome’s “inspect” tool (right click on page / inspect, and click the little mobile symbol to view the mobile version your pc) for clues as to what things are broken. Tough to know any more without being an admin. Also in other areas, the PC version of the page is pretty large (5MB), with a high number of data requests (363: https://gtmetrix.com/reports/www.xn--4dbcyzi5a.com/uQrNpMq6) and it is taking a long time to load (11 seconds on a PC with a good connection – the mobile version is much faster though, so that’s good), so you might want to look at improving that too.

        1. Hi, I suggest turning off all your plugins and turning them on again, 1 by 1, and checking Facebook again after each one is turned on. Maybe there is a conflict. If that doesn’t help, you might have to go back to the Jarida theme developers and ask them. 🙁

          Are you using a page builder? Or just the normal wordpress editor?

          1. I just found out how to repeat the exct sme bugs that are on FB in-app browser:
            Try installing and using an app called “Inspect and Edit HTML” – it displays the site EXACTLY like fb browser does.
            Is there something this info helps with understanding about the solution?

          2. Hi Oren, can I just check what you mean? Where does it look like the fb browser? On a PC? Or in the default mobile browser?

            And do you have a site that needs looking at?

  8. Hi,
    It’s an app, so in mobile phone. I use android galaxy.
    My point it that the new app’s browser I mentioned displays the exact same broken structure as Facebook in-app browser.
    My site is on knb.is – when using regular browsing apps (Chrome, FF, Opera etc.) it looks great, but when using FB app browser (links in facebook) it gets broken. I found that the “Inspect and Edit HTML” app breaks the site exactly the same way, so I thought it might give a clue of what’s wrong.

      1. It got solved yesterday somehow.
        I contacted WP-TOUCH which is the plugin I use for mobile, maybe they fixed it.
        Thank you for the efforts and kindness!

  9. fahim al farhan

    please brother help me.please.its very important.
    i have a website. http://wow.nirbik.com
    it is a facebook fun apps website.but its not working in facebook app browser in android.but works well in crome.please see that.in facebook aapp browser its not give you the result.just loading.please help me

    1. Hi Fahim. It’s working fine for me on my Motorola Android in the FB browser. The site loads and as far as I can tell looks the same as the chrome version. Did you fix it already?

  10. Hi! Thanks for writing about this! I’m having issues with the Instagram for iOS in-app browser which I believe is the same as Facebook. There’s no way to “refresh” the browser so after making changes to my site I still see older versions of some of the site pages. This happens to customers too. Is there any way to avoid this? Thanks!

    1. Hi Matias. Never seen that before. Have you tried deleting the app cache on your phone? (You can do this in android – not sure you can in iOS without deleting the entire app and reinstalling). Perhaps also check it’s not a cache plugin or CDN issue at your end? (Delete / flush cache for either of those).

      1. I tried that to no avail. Some customer had the same issue with my site, I think it was related to a cache browser I recently solved. As the in app browser can’t refresh I will be temporarily using other links to my site in the Instagram profile and Ads in order to force it to reload. Thanks

  11. Hi! Thank you for sharing this. I have the same problem and I don’t manage to fix it. My hosting says everything looks ok and in every other browser my website looks fine. But when I open a link on my Facebook page using the Facebook app it doesn’t show the images at all or sometimes it shows a few of them. After refreshing or opening the link again once or a few times it shows the images. Is there any way to fix this? Your help is much appreciated. Thanks.

        1. Is there a particular page / image that has this issue? The homepage looked fine on my first visit via a link on facebook. I’m using an android.
          Off topic, but your favicon.ico is “not found”

          1. Sorry, I can’t see anything wrong with the site. And the favicon.ico is the little 16×16 icon that appears in browser tabs. Chrome brower’s inspection tool is telling me that the site is trying to load it, but it can’t find it. It’s normally in the root folder. If you moved servers or something it probably didn’t get included in the move and just needs dropping back in.

  12. Hi Charles, Thanks for the article.
    unfortunately I have the same problem also on my site… In Chrome and Safari browsers the site works great but in Facebook browser it doesn’t show the images on my website.
    I have tried:
    Turn off all plugins
    I deleted Cash on my site
    If there is anything else that might help I would love to know.
    Anyway this is my website – https://www.magix.co.il

    1. Hi, sorry for the delayed reply – your issue is just a mixed content issue. Change the images to https in divi settings (or better still, remove the domain bit of the url completely) and they will work. If you can’t figure it out, let me know.

  13. Hey, thanks for this article. I was looking for people having the same issue first, so glad I am not alone. Belonging is an important need 😀

    The bad part is, I am not sure, what is my next step. My problem is related to disappearing images and a few aesthetic settings.

    Critical is for example the following page, where I cannot see 4 out of 8 images, while each of them should lead to a product: https://sweetyoushop.com/termekoazis/termekkategoriak/testvaj/

    I do not have such an issue here, where the setup is actually the same:
    https://sweetyoushop.com/termekoazis/termekkategoriak/termeszetes-kremdeo/

    I would be super glad if you can point me to the right direction.

    Thanks
    B

      1. I actually had that installed, but it was set to Simple. I changed to Widget, which fixed the bigger issues. Then I changed to Capture, but no further improvement, and too much risk that I screw up something else, so I think I leave it like this. Thanks. Re the beer – just because you asked so nice 😀 and I worked for a beer company 🙂 Any Paypal option? No fan of credit card payment.

        1. Best fix is a database find and replace for http to https, unless there is something else going on. For example elementor builder has an option to refresh urls after switching to SSL. Use chrome inspect tool to look for further errors! No PayPal. Don’t worry about it 🙂

          1. Im not sure Im confident about touching the database, but thanks a lot for your help! 🙂 Im at a much better place now with my website.

  14. I don’t know if you’ll be able to help but I’m going to ask just in case! My problem isn’t with the facebook app, it’s actually with the Pinterest in-app browser. I’m getting similar problems as this post explains though. My page just isn’t loading as it should, instead, it’s loading in a completely different design and causing lots of errors – Pinterest have no answer and they have told me that other users are experiencing the same issue but Pinterest don’t intend on changing anything. So, I’m desperate and can’t find anything on the internet except for this post being slightly similar. As I said at the beginning, i don’t know if you can help but on the off chance you have some ideas I would so grateful. my website is http://www.justanothermoment.co.uk, you can find me on Pinterest with at https://www.pinterest.co.uk/justanothermoment/ – just a note, I use divi too…

  15. Hi Charles,

    I’m having the same problem as most people on here!

    Helping a friend out with their website – their using a WordPress.org theme. I dabbled in using wordpress when I was at uni, so I knew I could change the simple things as my friend couldn’t.

    I ended up changing the theme, checked if it was mobile responsive, which it it – so I thought everything was perfect.

    So the website is fine on when I go through chrome etc but when I go on to the website via Facebook & Instagram some of images and videos aren’t responsive, the header widget should be white but it’s coming up black hence you can’t see the logo or the menu tab. The footer widget is coming up yellow but it should be black. Lastly the layout of the text is funny too.

    Can you help? I’m way out of my depths here.

    King regards,
    Paige

  16. Hey, Charles!
    Thank you for this great article – very accurate and detailed.
    I wonder if you could have a peek any time soon at one website because we have an issue with it in facebook in-app browser.
    The idea is quite simple – you can post images on panoramas (mostly from Google maps), they are saved and kept, and finally you can share a certain panorama with your pictures as a link to facebook.
    Website:
    selfiepost.me
    Example link (no need to login with facebook):
    https://selfiepost.me/view/e1rh09zl42nr3ummdhr2w1mg2?fbclid=IwAR0mLefU0VxtrX8pZvHKjzC9BTfdzNgdyT0zuBR6wXuxgoezdFLueznGjGQ
    The current problem is as the link is shared to facebook, the users would most likely just click it and will be redirected to facebook in-app browser, as they should not be worrying about copy-pasting it to safari for example.
    But in this browser the “move across streets” arrow buttons don’t work properly, and the most important: the button in the left top corner which is “home” alike – will redirect user to the full website under his login or too the login page, if no authorization credentials were found – does not answer the touch event as well.
    I could really use your help at least finding the direction where to work, since it’s a team project in which I joined recently and don’t know every rope to pull.
    Thank you for your time.

      1. I am not sure whether it is possible to debug facebook in-app browser with chrome – it does not appear in ‘remote target’ section.
        It seems fine when I use safari and the app works properly

        1. Sorry, I just meant when looking at the normal site in chrome. I checked and it didn’t report anything unusual. I couldn’t figure out your issue 🙁 If you solve it, please post the solution in case it helps someone else.

  17. Hi, I have a problem with facebook in-app browser, and it is, that mobile responsive menu have set a background color, which is not shown in facebook, so light buttons are hardly readable on light background … can you help with that?

  18. I have had a few users saying they can’t get my website to load when going through facebook, but for the life of me I can’t duplicate the problem on my own phone. They click on my link and it takes them to my site, the first little vit loads perfectly, then the rest is blank. No more words, a half- loaded picture, and that’s it. What can I try?

    1. Hi. been a bit busy! I can’t reproduce it either. Looks fine in FB browser on my Android. However, there are quite a few styles that appear to be missing according to the chrome inspection tool (right click on the website in chrome on a pc and choose inspect to see the errors). Might be a theme issue.

    1. Sorry for the delay. I don’t know for sure, but there’s an error on the page: “The key “target-densitydpi” is not supported.”
      Maybe Facebook is having an issue with that. I don’t know what it means though. Sounds like a theme thing. Try swapping to a default theme for a bit to see if that displays.

  19. Hey Charles,
    My website link when clicked on my team facebook page displays a net:: ERR_CLEARTEXT_NOT_PERMITTED. It only happens on the mobile app, not if I use facebook.com. the link I am using is simply:
    http://www.ASUFC.com/
    The page is:
    ArizonaStateSoccer

    1. Do you have FB instant app for your site? Anyway, if you install an SSL certificate and change all http to https, it should resolve the issue.

  20. having issues with ‘buttons’ being clickable on slider revolution – but other buttons just in the content area are fine. have you seen this before?

    1. Hi, there are a couple of errors on that page they are as follows:

      Failed to load resource: the server responded with a status of 404 () https://togotrendy.com/wp-content/themes/awaken/images/dotted-line.png
      and
      The resource https://pagead2.googlesyndication.com/pagead/js/r20190626/r20190131/show_ads_impl.js was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

      If you fix those, it might help.

  21. Hey, I’m having issues with formatting which i ruining my site! Any ideas for why the font looks different and the layout is incorrect when compared to chrome/safari?
    site is:
    ecstarts.com

    1. It looks fine to me. Same in FB browser and chrome browser. There’s something very weird when you load the page though – it says the page url while waiting for the rest of the page to load. Not seen something like that before.

      1. I know! I can’t quite figure that out yet! Its a tag that’s in the headed but it shouldn’t be displayed.
        Glad it’s working for you! I’m on an android Huawei p30 so maybe it specific to mine. Thanks for helping! What device are you on?

        1. MotoG5plus

          Is there meant be anything under the initial screen? It lets me scroll down but it’s all just black?
          There are a lot of scripts loaded at the start, but the body seems to be obfuscated in a script load – was this deliberate? Seems highly inefficient way to generate a page.

          And page size is 5MB, but there’s almost nothing on the page. Not sure how this is possible.

        2. As an addition to my other reply just now…. One of the page scripts is half a MB on its own. My entire homepage size is 800KB. Plus there’s a 4MB image on the page(!!), the one with all the hands. That needs fixing asap. It could be 200KB progressive jpg and still look good enough. It could be something as simple as the FB browser getting bored of loading such a large image on mobile phones.

  22. Hi Charles!!

    Thank you for this article, it’s very helpful. We are struggling with our web app loading/rendering within FB in-app browser using FB iOS app (it works fine in android app). We tried adding meta tags but we receive a blank page when opening the link (https://vales-dev.club). We are receiving a 206 status in FB debugger. Any ideas? We are using Vue js framework. Thank you!

  23. Hello Charles, thanks in advance for your help. My issue is that on Facebook browser, the link from Facebook to my website (www.bento-box.it) is opening properly, but in some devices you cannot scroll the page, you can click on the links you see in the first part but not scroll. Do you have any idea what could be? Thank you

    1. Yeah, difficult to diagnose. It works fine on my phone. You might be better off on the Magento forum – I’m more familiar with WordPress. However, when I used the chrome inspection tool, it found a lot of jquery warnings, so you might want to start there.

  24. Hello Charles, I seem to be having the same issue as mentioned above. We share a link through Facebook and users go through the Facebook app to click it. Some of the users are seeing the page load on the top and then sort of cut in the bottom half where it just shows white. This does not happen when using any browser other than the Facebook in-app browser.

    Here is an image of whats happening: https://gtech.sfo2.cdn.digitaloceanspaces.com/images/custom/81849883_1006802209717320_5872661422663532544_n.jpg

    I’ve checked mixed content, but everything is over https. This is a custom site, no wordpress or anything.

    This is preventing people from being able to view the site from Facebook because of these issues. Can you take a look and see if you see anything?

    Thank you

    1. Hi Sean. There’s nothing I specific I can see that might cause the issue. However, I don’t see that particular bit of wording, which looks a lot like it might be a pop-up subscription modal. If so, are you able to disable it and see if it’s just that that is causing the issue? It all looks fine on my phone in the FB browser.

      1. Thanks for the reply. I don’t have a modal that pops up, but now that you mention it, it apears it’s not loading the cookie banner correctly. I lazy load this cookie banner and I think that’s the issue after researching how Facebook browser handles assets that load after the document is done.

        I’ve disabled the lazy loading and require it to load when the document loads. I havent’ had anyone say that have the issue since then, but it doesn’t happen to everyone. I’ll keep an eye out and update here if I find anything. Maybe it will help someone else.

        1. Ok, figured it out! Hopefully the below can help someone out.

          The issue was Amazon Native Shopping Ads. These were causing the Facebook browser to stop loading once it hit these ads. The page would just get cut off and the page would also freeze once you tapped on it, anywhere.

          I removed the Native Shopping Ads and the page loaded for everyone. Now people can access and interact with our website!

          Hopefully this can help someone out before they pull their hair out like I did.

  25. Hey Charles,

    Great post, however I’m really struggling here. I’ve posted a link to facebook and my home page loads with a huge gap and missing almost the whole page of content. How do I identify what is causing this problem?

    1. What’s the url Andrew? My first step would be to inspect it in Chrome browser inspect tool in mobile mode and see if any errors.

      1. Hey Charles,

        Thanks for the reply. The website url is https://andrewmilesphotography.com/

        I inspected it using the browser inspect tool and it does seem to have some errors. I’m not tech savvy in the slightest so not sure what it means. But it showed Failed to load resource: the server responded with a status of 403 (Forbidden) and 19 warnings of cookies.

        It actually looks like the gap is being displayed there on mobile view – so lost.

        Many thanks,
        Andrew

        1. Hi, just tried on my android and it seems fine in the facebook browser.
          I can’t see the errors in inspect tool either. Did you fix it? Weird

  26. Hi Charles – sterling effort on all the help you’re giving people.

    I’m trying to test Gloria Food’s online ordering system, which is supposed to integrate with Facebook. I configured the “Shop Now” button to point to the URL they directed (https://www.foodbooking.com/api/fb/4b_pl_b) – it works fine on desktop and mobile browsers, but from the in-app browser on the Facebook app on Android, nothing but a blank page appears.

    Have you encountered this before?

    Thanks

    1. It appeared fine on my Android. However, when I inspected the code in Chrome’s inspect tool, I see a warning from Facebook (in MASSIVE FONT!!) saying “STOP. This is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Facebook feature or “hack” someone’s account, it is a scam and will give them access to your Facebook account. See https://www.facebook.com/selfxss for more information.”

      So I guess you aren’t supposed to insert that sort of API link into buttons like that. But I’m not sure.

      1. Thank you for taking the time to look into it.

        I discovered that when viewing the page within the Facebook app and clicking my “Shop Now” link as a *different* user than the one that created the page, it worked fine.

        However, when I tried to “test this button” as the same user who created the page, it just failed silently. Undocumented “feature” of Facebook I guess, but not very helpful 🙂

        I believe that the warning you mention will always appear in Chrome when you open developer tools with facebook.com as the current domain.

  27. Hi Charles,

    Great write up on this issue and the fact that there are still issues with this shows how unresponsive Facebook has been to it’s users – They will lose traffic at this rate.

    I have a bit more of a grave issue in that our website (www.teachsa.co.za) does not load within the Facebook browser on mobile devices.

    Other links that I load on my Facebook page work fine but only our website seems to be rubbing Facebook up the wrong way. Would appreciate any input you would have on this as well as any recommendation you could make on helping to resolve it.

    Thanks

    We have tried to take this up with Fa

        1. Sadly not. It’s a FB app setting. They don’t want you leaving FB. The best you could hope for would be a pop up that suggests chrome. It could probably be set to detect FB browser. It would be a rubbish experience for users though

          1. Hi Lucy. On my phone (Android), the site looks the same in the FB browser as it does in Chrome browser. What happens (or doesn’t happen) when you try in FB that makes you say it is not working?

    1. Hi Charlesr.

      We have been facing similar issues in facebook browser and have been trying to incorporate all the mentioned solutions but the problem still exists. The logo and videos are missing in facebook browser but it runs perfectly in other browsers. Will really appreciate if you can help us out.

      Thanks,
      Ramish

      1. Sohanur Rahman

        Finally i can solve this problem. This occur for Misscontent error in http and https. Replace all http with https. You can use go live plugin for replace all url

  28. Thanks for your post. I’m also having issues through the iPhone Facebook browser.

    I have an option to download a vcf (vcard) file so that my companies contact info can be saved to the users mobile device.

    It works find on Androids facebook browser, and works fine in safari, but not an Apple’s Facebook browser. It seems to open the file as a txt file and goes on for many many pages.

    Do you know how to fix this?

  29. Hi,

    I have suddenly had this issue appear. It wasn’t a problem until I checked a new post on my website that I posted today.

    Whenever I publish a new post I always check that it works right across all devices and it was working up until some point in the last 3 weeks.

    Now no images are showing on any page when launched through the FB app.

    The link to my latest post is https://travelsinflipflops.com/same-faces-different-places/

    I have checked my images and all are https and I have the Easy HTTPS (SSL) Redirection plug in running as well.

    Any thoughts on where I might look to fix this would be very much appreciated.

    Thanks

      1. Hi charlesr,

        Thanks for checking.

        That’s good to know. I updated my theme as had been using a child theme that I hadn’t updated for a while.

  30. In case it helps anyone…
    This morning I was alerted that one of our client’s websites was broken. The domain wouldn’t load at all, but instead was giving a 410 Gone error.

    The website was alive and well in all the browsers I checked, but I could tell from the screenshot my client sent, they were using one of Facebook’s in-app browsers.

    Still, the website loaded properly (using an iPhone 6) from Facebook’s desktop app, in Facebook’s mobile app, and even from the Facebook Messenger *desktop* app.

    However, the error showed up when I tried to navigate to the website from the *mobile* Facebook Messenger app.

    I finally figured out we were blocking the crawl bot Facebook’s Mobile Messenger app needs to return our clients’ websites. We use the .htaccess file for blocking bots, and the specific UserAgent we were blocking was called:

    speed

    (Doesn’t that sound Facebook-specific?)

    As soon as I removed |speed from our list of bot-blocks, the website’s showed up normally in the app.

    Hope this helps someone!

  31. I just realized that my blog when viewed from a messenger browser shows some problem. In the middle of zooming into and viewing an image, it suddenly jumps back to the top on its own. Anyone else has had this problem?

  32. I HAD THIS PROBLEM UNTIL TODAY , ALTHOUGH THIS FIX MIGHT HAVE BEEN POSTED ALREADY SO I APOLOGISE IF IT HAS ,
    GO TO SETTINGS AND PRIVACY OPTION ON FACEBOOK
    THEN SELECT SETTINGS
    THEN SCROLL TO MEDIA & CONTACTS
    THEN SELECT THE LINKS OPEN EXTERNALLY OPTION
    IT WORKED PERFECTLY FOR ME , HOPE THIS HELPS

    1. That opens links for you in a major browser instead. So whilst it works for you, it doesn’t really solve the problem because something still needs to be fixed on the website to get it to work in the Facebook browser (for everyone else). Developers have to get it to work for everyone (most of whom will not use that external links option).

  33. I am facing one minor glitch from instagram in-app browser. First image is loading not properly as it is being loaded in normal browser.

    and I guess it is only from ios.

    I have already checked for mixed content and any other issues, but I can not see anything there.
    here is website link: https://www.jeanpierredomingue.com/

  34. I think my last comment was removed in moderation. Can you let me know what was the reason ?

    If you are thinking about the content of website link (for which I am facing issue), then it is photographer’s website so it is just art and not nudity.

    but I am seriously facing issue that I mentioned there.

    Can you help me out ?

    1. Hi. I moderate all comments manually and I’ve been busy since yesterday. I had a look on my android phone and it seems to work in the facebook and instagram browsers for me. Off topic, in the facebook browser there is some kind of messenger sharing bar at the bottom on mobile that covers the images to choose from. It’s hard to tell if any code is wonky because you right-click on PC is disabled and my usual workaround doesn’t workaround… You should also change the message that is shown when someone right-clicks 🙂 Charles

      1. Thanks a lot for your time and response. Really appreciated.

        Yeah, even I didn’t find any issue from android phone, but my client is facing issue on iPhone instagram app.

        Is there any way to trace issue there ?

        Thanks for pointing out other off-topic points.

        1. I don’t have an iPhone to test on, but if you temporarily disable right click protection, I could have a look at the code. It’s pointless anyway because anyone can grab the pictures with a screenshot or by a site trawling app.

          1. Hi. I can’t see anything wrong with it. If possible I always try and avoid sliders though. They take ages to load due to large amounts of javascript.

  35. Hi Charles, I’ve chanced upon this thread as I too am stuck in a Facebook app breaking some functionality on a website and just wondered if you might have a clue as to how to fix.
    The issue is that even though the website in question views fine in the FB App browser, as its a WooCommerce store we have product filters in place, using an AJAX plugin, they work fine on mobile and desktop – but when clicking the sites link in FB app if you click ANY product filter then all we get is a blank page…?
    I’ve asked the plugin developer and they say as its using AJAX the FB app breaks it…?
    There must be a work-around somewhere, its especially important as that client site is using targeted FB ads to promote the site – and as soon as a use clicks to filter any product it’s then broken.
    The link in FB is https://www.facebook.com/JOJOSKICOM – any suggestions very gratefully received.
    Many thanks in advance
    Nic

    1. I can’t see anything particularly wrong. Could you temporarily switch to a permanent filter (when you press one, it reloads the page, instead of ajax queries) and see?

  36. Hi Charles, thanks for this article, no one else has written about it.

    I want to ask you a question, have you ever seen an error with facebook (instagram) changing the background color? If you know how to solve it, it would really help me a lot.

        1. I can’t see anything wrong on Android. I don’t have an iPhone to test with, but I frequently see people saying that their issues only appear on iPhones and not Android. There’s an expired license on “promise, tracking”, causing an uncaught exception. I don’t know which plugin that is for, but maybe it will be obvious to you. Try disabling it briefly and see if that fixes it.

          1. Hi Charles, thank you very much for your help. I hadn’t noticed the “promise, tracking” error. I fixed the error by applying the direct background white color with css on the body tag and in the most important css classes.

            Now I have to check all the websites that I manage that use constructors to verify that everything is functional.

            If it weren’t for you, I wouldn’t have seen the light of day to fix the problem, I appreciate your help.

            Greetings! of a Venezuelan-Spanish living in Santiago Chile to the UK!.. 😀

  37. Hey Charles.. I’ve managed to crawl my way all the way to the bottom of this thread 😅.

    In my case I currently Have 2 websites using Elementor Pro & Slider Revolution..

    https://www.easya-media.com/

    When opened in the messenger browser doesn’t display the content on my first slide… yet it shows it in regular browsers and even twitter! (tested that after you recommended it)

    Been an ongoing thing that I noticed for awhile inside Facebooks messenger browser so this entire thread has been amazing.

    Just want to thank you for everything you’ve done with this thread.

    Also http://www.limitsdigital.com/

    (im currently building this site, so that’s why there is no SSL) but this has the same issue, but instead its on the second slider … pretty annoying stuff!

    Maybe theirs something you could help me with.

    -Spencer

    1. Hi Spencer. I couldn’t see anything obvious. Do you even need sliders on that page? The code is a million lines long, but there doesn’t seem to be anything that couldn’t be done without a slider. Unless I’m misunderstanding how the page works.

    1. Not that I know of. I guess you could run a script that detects FB browser and displays a warning prompt with instructions.

  38. Mate, i cannot thank you enough. There is no place in the world wide web where this issue is mentioned.
    It was the http(s) issue.

    Thank you soooo much!

  39. Hi Charles!

    I’m slowly loosing my mind to find the solution for this issue…
    After trying to publishing my first blog post and accessing it from facebook app, the background images don’t appear.
    If I checked properly, it is not the http issue.
    Do you suggest any specific solutions?
    The website is: https://pumpinghealth.com/

    Could it be the fault of the template/theme I use or perhaps too wide size of the images?

    Thank you in advance for suggestions!

    1. Mixed Content: The page at ‘https://pumpinghealth.com/’ was loaded over HTTPS, but requested an insecure element ‘http://pumpinghealth.com/wp-content/uploads/2021/06/1622012176213-1-2220-scaled.jpg’
      Login and go here: https://pumpinghealth.com/wp-admin/admin.php?page=elementor-tools#tab-replace_url
      In the first box put http://pumpinghealth.com/ (note NO “s”!!)
      In the second box put https://pumpinghealth.com/ (note the “s”!!!)
      Press replace url.

      If that doesn’t fix it, you’ll have to run a database find/replace for http:// with https://

      If this helped you, please consider this: https://charlesr.co.uk/say-thank-you/

  40. Thank you very much for detecting what’s been wrong!
    I needed to make some manual corrections of http problem, but now it’s solved 🙂

    Have a great day!

  41. Hi Charles, Thank you for sharing your knowledge of this! I have been going around in circles trying to work out why my site intermittently loads without any CSS via the Facebook browser. This is not constant and will show my site perfectly to some android phone users whilst showing the style-less scramble to others at the same time. My site is http://www.firespiralslings.co.uk
    Here is a link to the scrambled version that we’re getting sometimes https://snipboard.io/eFBvk8.jpg
    Here is a link to how it should render (this was also captured from the Facebook browser, but a different device) https://snipboard.io/HhNORe.jpg
    We would be more than happy to contribute to your new shoes fund if you can help! Thank you!

    1. Sorry Tamsin, I can’t spot anything wrong with the code. When I’ve seen similar output without style code (not just in FB browser, but any browser), it has normally been due to server resources timing out. You might want to check with your host if it happens again and give them timestamps, or if you have access to error logs, take a look yourself.

  42. Hi Charles, Thank you for all the knowledge you are sharing.
    I’m facing an issue with IG and FB browser from mobile, my site doesn’t work on this browser but with chrome and safari i have no problem.
    If you Can check my site https://333ntini.it/

    Thank you in advance

    1. Hi. I can see that the menu doesn’t appear properly on FB browswer. Is that the issue you see too? I suspect your theme is the cause of the issue. There are a few errors in the console {Each dictionary in the list “icons” should contain a non-empty UTF8 string field “type”} so you might like to see if eliminating that helps too – switch theme and see if it the error goes away, or disable plugins one by one till the error goes away. Then check if that fixes FB.

  43. Hi there, hopefully you’ll be able to help me figure out a fix. I can’t seem to find any help on Google, or from Divi and Divi FB groups. My site http://www.victoryapostolicstgeorge.com shows totally fine in all main browsers, desktop and mobile. It shows fine in the FB browser when on an iphone. However, in the FB browser on Android, the footer is white where it’s supposed to be black. All the text is white so it’s causing it all to disappear. Do you have any idea what the problem could be? That’s the only thing that is being messed up. Thanks!

    1. Hi Bridgett, this is hopefully an easy one. Your footer background image is set to http, not https (so browsers are ignoring it sometimes, since mixed content). The easiest way to fix would be to download it locally from the media area (if you don’t have it already), delete it from media area, and then find where it is specified in Divi settings/customizer and add it again (since your site is now https, it should get it right. You’ll have to clear any cache if you are using one. If this helps you, please consider saying thank you (see the option in my menu).

  44. Thank you, that seems to have worked! I changed the one photo, and it still kept uploading as http. So I looked at all the other photos and they were all http. I didn’t even realize that my whole site in the WordPress settings still said http instead of https. So once I changed that and cleared my cache, it showed up. Thanks again!

  45. Hello Charles,

    Our website is working fine on Chrome, Edge, Safari on desktop, tablet and mobile devices.

    However, we have issues with the in-app browsers of FB, IG and LinkedIn.
    The website is on the Hello Elementor theme with Elementor Pro.
    Some content is not appearing. Mainly on the homepage (background video not loading, lots of text fields not shown), but also on other pages (e.g. Posts loop).
    On Samsung this seems to work fine. On Apple (iPhone/iPad) not.
    There is no mixed content.

    I have asked Elementor to look at it too.

    Thanks!

    1. Hi Erwin. Thanks for confirming the fix. For anyone else searching, here it is:
      “the JS optimizations in PhastPress. The in-app browsers apparently do not like these optimizations.”

  46. hey, same goes for my site too. It doesn’t load my owl carousel and font awesome and my designs looks so messy. please help me what should I do?
    The site url is appleentertainment.com.np

    1. I suspect this is a hosting issue – things load eventually, but it takes almost a minute to finish loading some bits of the page. I suggest you a) get faster server, and b) use nitropack

  47. hi. my site is americanschoolbusglamping.com which comes out all over the place from a facebook link! i am not techy – and do not understand a lot of the fix comments on here….can anyone help please? thanks

    1. Hi Andy. It does look slightly different on FB browser to Chrome browser. For example the “book [image] here” button with the big heart in between the two words (on mobile, or a bus on PC) rolls on to the next line because it’s been made with “no space” gaps which don’t render on some browsers properly and is a dirty hack basically. I recommend getting rid of the image between the words and just putting a normal button. A: people will know it’s a button and want to press it. B: it will look better. C: it won’t break. Was there anything else specifically?

  48. Hiya,

    Thank you so much for writing this, one of the only decent bits of info I could find to help with my issue! Sam as everyone else, my website loads fine everywhere accept on Facebook browser and it’s doing my head in because I can’t share it or have it on my Instagram profile as it loads up in the same browser there too and its for my business. I have no clue what I’m doing and can’t find a way to fix it – I spent 6 hours researching yesterday! Please help, its for my business!

    https://www.jadeeleanor.com/

    Thank you so much!

    1. Hi. If you try moving left and right in the facebook browswer, you’ll notice there is an extra white bar down the right hand side. Is some of the content inserted via an iframe from another provider? If so, I think it’s something to do with that.

      1. Thanks so much for getting back to me.

        The form at the bottom is inserted using a iframe but I just took it out and tried to view again and its exactly the same.

        Thanks!

          1. Yep, I’ve literally tried EVERYTHING. I’ve posted in groups, emailed Web Developers, spoken to Squarespace and Facebook, and done my own research, which is how I ended up here. No one knows a thing about it or can seem to fix it. It’s doing my head in and I can’t share my website because it does it on Instagram too, but not Twitter, weirdly.

  49. Hello Charles,
    Thank you for the great work you are putting for the communicty,

    Basically I’m facing the same problem where my website works on all browsers ( opera, chrome safari ) both for mobile and the web.
    The only problem is that It’s a blank page when it opens in the builtin browser for IOS devices.
    This is the website https://www.tunlease.com
    I would appreciate if you help me out with this

      1. I’ve actually took all the extra post requests that are returning 401, and still same blank screen on the iphone built in browser

        1. How was the site created? When you view the page source, there’s nothing there apart from: [div id=”app”] but the resulting full code can be seen in the inspection tool. Are you using some sort of unusual security tool?

          1. Its build on top of vueJS so you will only find a div with app ID. And that’s where I spawn the vue app.
            Other than that I’am not using any security tool. ( I’am just using a library called helmet but thats in the backend side of things ).
            For the frontend side there is no unusual security tool. This is the list of dependencies I use.
            “@headlessui/vue”: “^1.7.0”,
            “@heroicons/vue”: “^2.0.10”,
            “@tailwindcss/forms”: “^0.5.3”,
            “@vuelidate/core”: “^2.0.0”,
            “@vuelidate/validators”: “^2.0.0”,
            “autoprefixer”: “^10”,
            “axios”: “^0.27.2”,
            “browser-image-compression”: “^2.0.0”,
            “core-js”: “^3.8.3”,
            “firebase”: “^9.15.0”,
            “jspdf”: “^2.5.1”,
            “postcss”: “^8”,
            “tailwindcss”: “^3”,
            “v-calendar”: “^3.0.0-alpha.5”,
            “v-lazy-image”: “^2.1.1”,
            “vue”: “^3.2.13”,
            “vue-router”: “^4.0.3”,
            “vue-tel-input”: “^6.0.5”,
            “vue3-carousel”: “^0.1.46”,
            “vuex”: “^4.0.0”

          2. Sorry, that’s a bit beyond my ken. I’m wondering if chrome page source tool can’t see the spawned app, maybe the in-app browser can’t see any code either.

  50. Hi CharleSR,

    Passing week to understand a fbclid issue and today found you great site. Would you face the following situation a day or repported by someone?

    Situation:
    A I a link to my facebook page, here is the one :
    https://maximisetonpotentiel.com/e-mo-sion/

    FB transforme it on this link :
    https://maximisetonpotentiel.com/e-mo-sion/?fbclid=IwAR3cQUoOva9FPZKgBijty-dXxzMLy4PsIxpa2T4mjVVYMtOj2n19RPek6jQ_aem_AVwd4JCImRrFNJBlsVbXMMuOSpob6YOj1Zodl0xWFn1Qoi4vg0TmBEXP4J_cGfjkseD4g4AD7eKNqEZPntc0Q8zt

    On computer everything is fine, but on smartphone the page is a nightmare of characters, like below: (same on ChromeDevTool)

    ���M��F�(��%��h�HY�”��N2��z�K�>�#u��=3Gҥ�@0�*�0�R�iv�wyVw7v7w4������M��#�

    Looks like the new FB app do not recognize the code on Smartphone.
    The website is hosted on WordPress with Elementor Pro and Swift Performance cache plugin.
    May have you an idea to fix that point?
    Thank you very much for your help.

    Cheers,

    Eugénie

    1. Hi Génie, I am viewing the site on a Google pixel phone in the Facebook in-app browser and the site looks fine to me. I do not see the strange characters. What phone are you using in testing?
      Note: you can ignore the fbclid parameter that facebook adds – it will not affect the code on your site and just allows you to easily track if a visitor arrived from Facebook.

      1. Hi Charlesr,

        Thank you for your great feedback.

        Just fixed by installing the plugin WPTouch and also re-initialized the Cache plugin Swift Performance. Those both actions fixed the issue. Would be probably interesting for all users.

        Also a big thanks for all your usefull quality shared information.

        Cheers,

        Génie

  51. Finally an article that deals with the problem. But why does the problem still exist years later?

    On our site, the photo gallery is affected. https://fotos.rot-blau.com is displayed “empty” with all images (including the large view of images such as https://fotos.rot-blau.com/inc/popup.php?cid=4871&order=picture_name&ASC&ad=ASC&pos=48).

    The actual page (yes, it is a bit old-fashioned) works in the in-App Browser. Does anyone know why the photo page is not displayed? I am desperate.

    1. There are huge numbers of errors on the page. Deprecated content warnings. Mixed content warnings. Failed requests. Certificate Transparency issues (Expect-CT Header). I’d start with fixing those. But the software looks beyond my knowledge 😀

Leave a Reply to Oren Cancel Reply

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

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