Instagram In-App Browser breaks Flutter Web Page - flutter

We used Flutter Web to develop our website and we encounter one issue only in the browser integrated in the Instagram app. If a user opens a link to our website in Instagram, the In-App-Browser shows the page totally strange (see https://i.stack.imgur.com/5geUn.png for the broken version and see here https://i.stack.imgur.com/2eDwb.png for how it should look like). This only happens on iOS and only if you open the link for the first time.
We have tried changing the web renderer but this introduces other layout issues (also only Instagram). If the user is reloading the page it fixes the problem, but if we do it programmatically with html.window.location.reload() it does not change anything. Do you have any idea what the problem could be or what else we could try to fix this problem? Thank you!

Related

Flutter Instagram WebView renders incorrectly

I recently built and deployed my new personal website using Flutter Web. The website loads completely normally on any desktop or mobile browser. However, when launching the website on Instagram's own web browser on iOS, the widget rendering is completely wrong.
Expected Website UI
Error Website UI on Instagram WebView
I don't know if this would be an Instagram issue or a Flutter issue, but all other websites seem to be running normally on instagram browser. The new Flutter website seems to run fine on the WebView window from Facebook as well.
I even tried deploying the Flutter Demo Home Page, and similar errors happened on the Instagram browser as well: the top and bottom gets completely cut off.
Error Screenshot 1
Additionally, it seems as if the website had been stuck on loading:
Error Screenshot 2
All errors go away on second launch for some reason, after I exit background and re-opened Instagram.
Has anyone encountered similar issues? I really don't know if there are errors with my code or it is just a bug with either Instagram or Flutter.

Mobile users unable to access Facebook custom page tab [duplicate]

I followed the instructions in this post: Mobile users unable to access Facebook page tab to try and get my Custom Page Tab to appear in mobile browsers, and mobile Facebook apps for Android and IPhone. However, it does not work. I fear that all these posts are dated and no longer apply to Facebook API 2.7.
Currently the Page Tab application works fine in a PC browser, except there seems to be no way to make this Page Tab the default one. That would be ideal. More problematic though is that I can't get the tab to appear at all in mobile browser or mobile FB application. Furthermore if I go to my redirect page: https://www.libertylive2016.com/facebook/Redirection.aspx?fb the redirect doesn't seem to work on m.facebook.com. The page comes back as unauthorized or unavailable.
Is there a 2016 way of solving this issue? I have the beginnings of a slideshow at: https://www.libertylive2016.com/facebook/TabLibertyLive2016.aspx which I want to put on a custom tab that is accessible to all. The facebook page is http://www.facebook.com/libertylive2016. The custom tab is called "Liberty Live 2016"
Thanks In Advance!
I guess the answer is that it is impossible. Pretty pathetic indictment of Facebook's technology.

Facebook Custom Tab Unavailable in Mobile

I followed the instructions in this post: Mobile users unable to access Facebook page tab to try and get my Custom Page Tab to appear in mobile browsers, and mobile Facebook apps for Android and IPhone. However, it does not work. I fear that all these posts are dated and no longer apply to Facebook API 2.7.
Currently the Page Tab application works fine in a PC browser, except there seems to be no way to make this Page Tab the default one. That would be ideal. More problematic though is that I can't get the tab to appear at all in mobile browser or mobile FB application. Furthermore if I go to my redirect page: https://www.libertylive2016.com/facebook/Redirection.aspx?fb the redirect doesn't seem to work on m.facebook.com. The page comes back as unauthorized or unavailable.
Is there a 2016 way of solving this issue? I have the beginnings of a slideshow at: https://www.libertylive2016.com/facebook/TabLibertyLive2016.aspx which I want to put on a custom tab that is accessible to all. The facebook page is http://www.facebook.com/libertylive2016. The custom tab is called "Liberty Live 2016"
Thanks In Advance!
I guess the answer is that it is impossible. Pretty pathetic indictment of Facebook's technology.

Facebook Mobile page tab error: This page is for an app that doesn't work on mobile devices (tried ref=ts)

Previously I was able to get to my app on my Page Tab on mobile devices by appending ?ref=ts to the end of the app url on the page tab. Suddenly this has stopped working and i am now getting the following error message when trying on the iphone/android facebook apps:
"This page is for an app that doesn't work on mobile devices. Please try visiting it the next time you use Facebook on your computer"
Has anyone come across this issue and does anyone know what I can do to solve this problem please.
I've used this in the past as well and just realized it was no longer working. I found a little work around but who knows how long it'll work.... I created a bitly link and redirect through there. Worked for me.

How can I make Facebook App page visible on mobile?

On my client's Fanpage, a third party app is running for a contest. How can I make this FB contest page available on mobile? I read the answer here:
http://facebook.stackoverflow.com/a/10833366/461119
also
Facebook SDK : Page Tab App returns not found in mobile Facebook App
I do not understand it clearly.
Is the query parameter ?ref-ts which we have to add at the end of URL?
What does it mean by "It helps in the browser but not the app itself."?
Will it help to see the App on mobile and click on it to go to the contest page on FB?
Also, I found this answer:
Works as advertised! Thank you. I was getting 404, but simply adding
ref=ts in my redirect URLs (I force users to use my app as a page tab)
fixed it! – Guillaume Boudreau
under the first link above but what is forcing users to use app as a page tab?
How can I set App as a page tab?
little bit confused.
I searched the web vigorously but did not get any clear explanation.
My observations about this issue:
Seems like it's an ANDROID issue, Work OK on iPhone's
Work with the link redirection services like Bit.ly (where the bit.ly link included the ref=ts)
I sent an email to Facebook for ANDROID developers.
Hi,
my iPhone's user colleagues can open links to page tab app with ref=ts
parameters but on Android we can't ;-(
The only way we've been able to do it is when the link to the app is
under a bit.ly redirection link
The problem is only when the links are open through the Facebook App.
Thanks
Let us know
Max*
You can access to your app using the next link https://apps.facebook.com/YOUR-APP-ID
In this way, you can access from a desktop or a mobile with no problem.