Meta Business Extension

Mobile

You have the following options to launch FBE on mobile:

m-Browser

FBE has the ability to authenticate via mobile apps or mobile browsers.

We recommend using the URL approach when launching Business Login for FBE.

  1. Replace www with m in the Facebook URL. Specifically, use https://m.facebook.com/ instead of https://www.facebook.com/.

If you pass https://facebook.com without a www or m, Facebook automatically loads the proper m or www URL based on the browser or platform of origin.

User Interface Examples

The following UI examples show how FBE looks when loaded on m-site.

WebViews (Android) or WK/UIWebviews (iOS)

Android

We strongly recommend you pass the DEFAULT UserAgent string for webviews WebSettings() in the code (webview.getSettings().setUserAgentString("< user_agent>")). Do not change it through the setUserAgentString() method. If the user agent string is modified, it can lead to rendering issues.

The following examples show the default UserAgent values for Google Nexus 4 and Samsung Galaxy S9 mobile devices. Get the UserAgent value using getUserAgentString():

Google Nexus 4 — Android version 5.1 (API 22) 768x1280

Mozilla/5.0 (Linux; Android 5.1; Google Nexus 4 Build/LMY47D) 
AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
Chrome/39.0.0.0 
Mobile Safari/537.36

Samsung Galaxy S9 — Android v8.0 (API 26) 1440x2960

Mozilla/5.0 (Linux; Android 8.0.0; Samsung Galaxy S9 Build/OPR6.170623.017; wv) 
AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 
Chrome/58.0.3029.125 
Mobile Safari/537.36

In both cases the UI was rendered as expected. See the following screenshots for the Samsung Galaxy S9:



The following is a code sample that sets a Webview with minimal updates, which properly renders the above UI:

WebView webView;
webView = (WebView) v.findViewById(R.id.webview);
webView.loadUrl('<FBE2.0 URL>');
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// Sample log to see the Default UserAgent string - Log.i("UserAgent", ""+webSettings.getUserAgentString());
webView.setWebViewClient(new WebViewClient());

You could also pass the following settings without causing rendering issues:

  • setLoadWithOverviewMode()
  • setUseWideViewPort()
  • setDomStorageEnabled()
  • setJavaScriptCanOpenWindowsAutomatically()
  • other non-UI changing settings options

If there is a business need to have a custom UserAgent passed, we strongly recommend that you append it to the default UserAgent string returned by getUserAgentString(). To avoid rendering issues, do not modify the existing portion of the UserAgent string.

You should avoid passing additional rendering settings, because it can lead to rendering issues. For example, if you pass setLayoutAlgorithm() in Android Webview, it reorganizes the HTML and and negatively impacts rendering.

iOS

The Android approach described above also works for iOS UIWebview/WKWebviews.

Here is sample code to get the default UserAgent on iOS:

// Sample example - appending UserAgent - Please see latest iOS docs for approach to pass this param
webView.customUserAgent = (UIWebView().stringByEvaluatingJavaScript(from: "navigator.userAgent") ?? "") + "/Custom agent"

For iOS, follow the same best practices mentioned above for Android. The key is to use the default UserAgent and to avoid passing any potential render settings that impact Webviews.