Android Webview for Facebook Like Button

Android WebView for Facebook Like Button

To get past the blank page you do this:

 webview.setWebViewClient(new LikeWebviewClient(this));

 private class LikeWebviewClient extends WebViewClient {        
    @Override
    public void onPageFinished(WebView view, String url) {
        Log.d(TAG, "onPageFinished url: " +url);
        // Facebook redirects to this url once a user has logged in, this is a blank page so we override this
        // http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php?............
        if(url.startsWith("http://www.facebook.com/connect/connect_to_external_page_widget_loggedin.php")){
            String redirectUrl = getFacebookLikeUrl();
            view.loadUrl(redirectUrl);
            return;
        }
        super.onPageFinished(view, url);
    }
}

Facebook like button opens blank page in android

The problem is that in Android, the webview and the browser does not share cookies, so the webview does not know the Facebook identity of the user. See this answer here Android WebView for Facebook Like Button

Android and Facebook like button using webview - login required

One approach would be to get an instance of the WebView cookie manager and copy its cookies into your HTTP client cookie store, so that the HTTP client uses the cookies set by the login when subsequently talking to Facebook. Something like this...

CookieManager cookieManager = CookieManager.getInstance();
String cookieString = cookieManager.getCookie("m.facebook.com");
CookieStore mCookieStore = new BasicCookieStore();
mCookieStore.setCookies(cookieString, ".facebook.com", "//");
mCookieStore.sync();

Note that getCookie only gets the cookie's name=value portion, so you will have to add in the domain name and path for the cookie to work in the HTTP client.

Another approach would be to use the Single Sign On (SSO) option on the Facebook SDK authorize function, which will not require a user login if the Facebook app is present and logged in.

Facebook Like button redirecting to facebook site in android

My guess is that the webview in which you load the fb js sdk just does not have the cookies and so the user is not authenticated.

How are you authenticating the user? is it using SSO (that is, is the fb app installed?) if that's the case then the browser (webview) is not aware that the user is authenticated and when you click it it just tries to redirect you for authentication.

Read the new official blog post: Bringing Like to Mobile.

---

Edit

Well, this looks exactly as I guessed. You see that it says "Sign up to see..." meaning that the js sdk does not recognize that the user is logged in and authenticated.

You have two options that I can think of:

1. As I wrote use the new Like action and create your own "like button".

2. When calling FB.init pass the authResponse parameter with what you have from android, will look something like:

Java part

m_cObjFacebook = new Facebook("Your_id");
m_cObjFacebook.authorize(this, m_cPermissions, new DialogListener() {
    @Override
    public void onComplete(Bundle values) {
        String response = m_cObjFacebook.request("me");
        JSONObject json = Util.parseJson(response);
        showWebView(json.getString("id"));
    }

    ....
});

private void showWebView(String userid) {
    mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);
    mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

    StringBuilder url = new StringBuilder("file:///android_asset/FacebookLikeView.html?");
    url.append("token=").append(cObjFacebook.getAccessToken());
    url.append("&expires=").append(cObjFacebook.getAccessExpires());
    url.append("&user=").append(userid);

    mWebView.loadUrl(url.toString());
}

Html / Javascript part:

<script type="text/javascript">
    window.fbAsyncInit = function() {   
        var data = {},
            query = window.location.search.substring(1);

        query = query.split("&");
        for (var i = 0; i < query.length; i++) {
            var pair = query[i].split("=");
            data[pair[0]] = pair[1];
        }

        FB.init({
            appId: "YOUR_APP_ID",
            xfbml: true,
            authResponse: data
        });
    };

    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
</script>
<div class="fb-like" data-href="http://www.facebook.com/FacIntegra" data-send="false" data-width="450" data-show-faces="false" data-font="tahoma"></div>

I'm not 100% sure that this trick will work, since one of the parameters in the authResponse is the signedRequest which you don't have, but it's worth a try.

---

2nd Edit

When the facebook application (katana) exists on the device then the authentication is done using it, which means that the cookies on the default browser are not created and so when you open a webview with the like button the js sdk is not aware you are logged in, you can think of it like logging into facebook on firefox, and then open a facebook on chrome and see that you are not logged in.

When the fb app is not installed the sdk authenticate the user using a dialog with a webview, which creates the cookies that can be later used by the js sdk, that's why it works "as expected" in this scenario.

The workaround I gave you in my 1st edit tries to pass the authentication data to the sdk when it's being initialized.

As I wrote then, I'm not sure it will work, maybe you also need to pass it a signed request aswell, but since you don't have it you'll need to create it, if you want to try that just do the exact opposite of what's described here: Singed Request, and then pass it to the FB.init along with the access token and expire parameters.

Another option you have is to always use the dialog for authentication, for that read this: How to disable Facebook single sign on for android - Facebook-android-sdk.

I advise against using that method since it results in bad user experience, after all typing email and password on mobile devices is not a fun thing to do.

facebook like button not showing in webview (ios and android)

Resolved when i added https: to //connect.facebook.net/en_US/all.js#xfbml=1

Cordova Facebook Like Button Overrides Webview

You should create custom Like button & follow this. It is right now possible using graph API.

---

Related Topics