Send to Messenger Button not showing up in Android Webview

Issue

Context: I'm trying to link an authenticated user in my android app to a Facebook fanpage PSID using the "Send to Messenger" Plugin to be able to send messages to that specific user on certain events that responds to the user actions in other systems.

I figured the best way to achieve this (since said plugin only works with the Facebook Javascript SDK) was to open a WebView Activity in my app, loading a website with the plugin button.

The website includes the following to load the SDK and the button:

<script>
    window.fbAsyncInit = function() {
        FB.init({
          appId            : '<<Here I put my FB App ID>>',
          autoLogAppEvents : true,
          xfbml            : true,
          version          : 'v2.12'
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-send-to-messenger" 
messenger_app_id="<<Same FB App ID>>" 
page_id="<<FB fanpage ID>>" 
data-ref="<<user identification>>" 
color="blue" 
size="standard">
</div>

Here's the onCreate method of the Webview Activity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    WebView webview = new WebView(this);

    getWindow().requestFeature(Window.FEATURE_PROGRESS);

    setContentView(webview);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }

    webview.getSettings().setJavaScriptEnabled(true);

    final Activity activity = this;

    webview.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onProgressChanged(WebView view, int progress) {
            // Activities and WebViews measure progress with different scales.
            // The progress meter will automatically disappear when we reach 100%
            activity.setProgress(progress * 1000);
        }

        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            Log.d("WEBVIEW_CONSOLE", consoleMessage.message() + " -- From line "
                    + consoleMessage.lineNumber() + " of "
                    + consoleMessage.sourceId());
            return super.onConsoleMessage(consoleMessage);
        }

    });
    webview.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {

            Toast.makeText(activity, "Oh no! " + description, Toast.LENGTH_SHORT).show();
        }
    });

    webview.loadUrl(getString(R.string.authenticated_webview_url_example), headers);

Expectation: The facebook Send to Messenger Button should load in the WebView, allowing the user to register a PSID on my Facebook fanpage/App.

Problem: When I load the website on the Android WebView, the button is not shown.

Details: Using Chrome Remote Debugging, I was able to determine the Facebook SDK was working and almost all the elements of the buttons were loaded, except for the content of the iframe generated.

Tested the Facebook jssdk by using a Like button, which worked and was shown.

No errors in website console or logcat.

Why is WebView not showing that particular button? Testing website: https://www.vsdesigns.cl/debug/login.php

Edit:

Here is an image of the testing website from a desktop browser. It shows the button.

Here is another image with the testing website being loaded by the WebView. It's actually a representation of the chrome remote debugger, but it's the same as what my smartphone screen shows. It doesn't show the button.

Thanks in advance.

Solution

I figured out the Facebook Cookies weren't loading at all, and Facebook doesn't render the plugin if the App is in development and the user is not previously logged in, so I implemented the following code to accept Third party cookies. (Only works on SDK version 21 Lollipop and up)

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    cookieManager.setAcceptThirdPartyCookies(mWebview,true);
}

mWebview would be the variable storing the actual WebView.

Answered By - Victor