FB.init (of Facebook web app) doesn't seem to get called when running on mobile - mobile

I have a Facebook web app that runs on canvas. The canvas URL is configured as http://apps.facebook.com/myApp (example). This URL has an FB.init that helps me identify and login the user by getting his name and FB user id. This app runs fine on a PC or a laptop.
This page is very simple with some JavaScript but with routine HTML tags like <p>, <input>.
I configured the same URL as Mobile Site URL under Mobile Web. Since then I can now see the link for this app on my mobile device (an Android phone). But when I click on the link, the first page of the app opens in my mobile browser but it seems that FB.init can't run there. I can't get the user id and use name.
What is the reason and what is the solution, i.e., how to make the same app run on users' mobile phones?
Thanks.

Related

What is causing my web app to look zoomed in?

Scenario: I have a web app and when I am developing I am using Ubuntu Linux and viewing my web app in Firefox. The web app looks great. It is styled using tailwind-css all pages are set to the same max-w-6xl. When I dual boot back into windows(to watch movies), it I go to my web app(same device, same browser) it appears to be zoomed in, the navbar stretches all the way across the screen.
I would submit screenshots, but I don't won't the post to get removed for promoting!

React app not loading in IOS Facebook in-app browser

I have a full stack web application. The backend is built in Django and the front end is built in React. Everything works fine.
But the only problem is when I send that website's link to someone on Facebook/Messenger and when they click on that link, it opens in the Facebook in-app browser but it shows blank page.
But If I copy that same link and paste in Safari or any other browser, it loads without any issue.
What might be the issue? Why doesn't it work on IOS Facebook in-app browser?

Opening new default browser window in plain React on a Mobile while using Facebook browser

Folks,
We are in a unique situation here. Our React site integrates with Signicat for identity solution. Most of our user base comes from Facebook i.e. they use the Facebook app, look at our posts and click on links we post which redirect to certain sections in our website which require identification.
So an example link posted on Facebook group https://example.com/en/startpage-in-english/ is converted into https://l.facebook.com/l.php?u=https%3A%2F%2Fexample.com%2Fen%2Fstartpage-in-english%2F%3Ffbclid%3DIwAR3loYqYOvom5k8_mOww89p5tun5H9HqIIKE1ebwwCcB3PD4jzxpTVyZGCk&h=AT1E3p1ejYWH9l2KhUo8D_RVjl_EzKBat4woeMHgRv7yXpT9Y-EZoBcK26sQtjjBBwAQt7Pt83a-i_k5JCGuvOBWfgB9pZ7Uv8LnDlyphNKc1Og0nl6QIqWd_nFEAva3OWN-PZ3byqsU7K0I5A&__tn__=-UK-R&c[0]=AT0-5n51iPMlSYghORXW8qxYXJQEejQTAhfiDQ3P3DK_ZTZM3GWbN4zXYKf-nyD_hWJdxQccenDp-5VgphfWuD6ZQ0ikeXq4lv4bjLbSJVFP9k4IxeMBT5mDa9jNdYnYlNs-DkXOM-LiPhhl-Obra9CAbtvihe-G7-8. When users click on the link, Facebook by default opens the link in its own Facebook browser. The subsequent steps in our portal need the user to identify himself and when the identification is completed and in the final step the request to Signicat hangs forever.
We identified that this issue is only happening with Facebook browser and hence one of the workarounds was to Open the default browser with the link to our website.
Note that:
a. this is not a React-Native app, our website is built using plain React hence the WebView solution does not work.
b. Facebook browser suppresses "window.open" with "newwindow" call and simply displays the site in the same Facebook browser instance.
So bottom line is, we need a way to Open the default OS Browser from Facebook App/Browser with the link to our site. Hope somebody can help!
Thanks in advance...
SG

Force stripe checkout modal on mobile?

I'm building a web app with Stripe checkout. On desktop it loads a nice modal when you go to pay, but on mobile it brings the users off to a Stripe page, and then back. I want it to look like the user is never leaving our site.
Is there a way to force the modal to be loaded on mobile? I'm building the web app in ionic at the same time, so if I want to turn it in to an app I can. Ionic uses a WebView on the phone and that loads the modal fine, so there must be some setting that is allowing it?
Anyone have any ideas? Thanks.
edit If I 'request desktop site' on my mobile it loads the modal fine
As Stripe makes these determinations based on the User-Agent you could try changing the User-Agent of your webview to match that of a desktop browser, (I did a similar thing except I needed to force mobile behavior in the desktop).
It should be stated, that this is definitely not recommended by Stripe nor supported and could break at any time. They'd recommend you just build a custom form using Stripe.js
How i can set User Agent in Cordova App has how to set the User-Agent in iOS and Android.

iOS web app to call mobile safari share function?

This is a longshot, but is it possible via HTML/JavaScript e.g. For a standalone iOS web app to call the share function found in mobile safari?
E.g on a web page a user clicks a link that then calls for share to fb, twitter, email screen to pop up.
No. There is no access to that functionality from a webpage or a standalone web app. You can, of course, add FB/Twitter/etc sharing to your pages yourself.

Resources