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
the screen after clicking the OK button
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
Visit the Like Box page on the Facebook developer page. Copy the URL from the Facebook page you want to use with the Like Button. Copy the code, and paste it onto your webpage where you'd like the button (there are two sections of code, both go in the body section of the webpage).
To generate a Facebook Share Button, visit https://developers.facebook.com/docs/plugins/share-button and specify the URL you want people to share as well as the width. Then generate the code, and paste it into your site where you want the button to appear.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With