Facebook Like button redirecting to facebook site in android

Asked 26/6, 2012 at 13:30 Answered 11/10, 2012 at 6:42

I am developing facebook like button to integrate with my application.Here is the html code copied from developers.facebook.com

<html>
<body>                   
    <div id="fb-root"></div>
    <script>
        (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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=my_app_id";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <fb:like data-href="http://www.facebook.com/facintegra" data-send="true" data-width="450" data-show-faces="false" data-font="tahoma"/>
</body>

My android activity code

mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);
    mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    mWebView.loadUrl("file:///android_asset/FacebookLikeView.html");

    m_cObjFacebook = new Facebook("Your_id");

    authorizefacebook();

}

private void authorizefacebook(){
    m_cObjFacebook.authorize(this, m_cPermissions, new DialogListener() {
        @Override
        public void onComplete(Bundle values) {
            m_cAccessToken = values.getString(Facebook.TOKEN);

        }

        @Override
        public void onFacebookError(FacebookError error) {
            System.out.println(error.toString());
        }

        @Override
        public void onError(DialogError e) {
            System.out.println(e.toString());
        }

        @Override
        public void onCancel() {
            System.out.println("Cancel");
        }
    });
}
}

When application starts it checks whether I am logged in to the facebook or not. If not, it displays facebook log-in screen to log-in and then after log-in successful, it goes to my facebook page instead of my android app page.

If it founds me logged in, then it gives the screen as below.

Please help me where i am going wrong

First screen of my app

my first screen

the screen after clicking the OK button

2nd screen

when clicking the like button in my webview, its redirecting to the link facebook.com/connect/connect_to_external_page_reload.html. Please help me what should I do?

Thanks

Vinegarish answered 26/6, 2012 at 13:30 Comment(2)

I used the same procedure as you did, but it didn't show the like button on my webView, do you know how can I handle this issue? I posted a Question here #16260822 – Grisby 30/4, 2013 at 10:30

check this post, there is well-formed library to solve this issue: https://mcmap.net/q/664379/-how-to-add-to-my-android-application-a-button-than-do-like-to-a-facebook-page – Mudcat 12/6, 2014 at 14:12

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.

Koal answered 26/6, 2012 at 13:45 Comment(6)

Thanks for reply. I will definitely try this. Will I must need to create my own Like buttn? – Vinegarish 26/6, 2012 at 14:50

You might need to, but first check the 2nd solution I gave you (the code thing). If that does not work you might need to implement your own button. – Koal 26/6, 2012 at 15:1

Nitzan sorry for disturbing you again. Please help me a bit. Your 2nd option I checked but it is also not working. Now a new problem arises. Please see my edited screen shots. Please at least guide me a bit on your first option. Thanks. – Vinegarish 28/6, 2012 at 12:52

Nitzen the code is same only. I changed this code with your code once but as it didn't help. So I change to my previous code. But the thing is last time the first screen shot I have not posted. – Vinegarish 28/6, 2012 at 13:25

But the code I gave you was not tested, it was a general idea. Maybe you made a mistake implementing it, or maybe it's just not possible. If that's the case you'll need to implement your own like button. – Koal 29/6, 2012 at 7:53

Nizan I progressed a bit on this. I found that if the mobile has facebook application installed, then when application runs, it goes to the facebook app login page to login. And in this case the above problem arises. But in case if the facebook app is not installed in my mobile, then when the app starts, it asks for login details is the browser facebook login page and here it works as expected. So can you please say why this happens or please say how to make my app always ask for login details in the browser facebook login page instead of facebook app login page. – Vinegarish 29/6, 2012 at 8:40

I tried first option but i can see only blank webview nothing else in my android app

Messer answered 11/10, 2012 at 6:42 Comment(0)

Edit

2nd Edit

Recommended topics

Hot tags