Facebook Comment box is not displaying in Android webview

Question

In HTML file I have used Facebook Social comment plugin and it is working perfect, but when I tried display same file in android using webview then it is displaying only comments not the comment box and it is showing a button "Login to facebook to Post a comment". When I tried to Login by clicking on that button instead of showing comment box; the page is being redirected to facebook profile.Please help...

Here is the code:

HTML Code:

 <head>
 <meta content='website' property='og:type'/>
 <meta content='http://graph.facebook.com/username' property='fb:admins'/>
 <meta content='http://example.com/test.html' property='og:site_name'/>
 <meta content='415944175093180' property='fb:app_id'/>
 <meta content='Browser Detect' property='og:title'/>
 <meta content='Tells about Early days' property='og:description'/>
 <meta content='http://example.com/test.html' property='og:url'/>
 <meta content='http://example.com/test.html' property='og:image'/>
 </head>
 <body>
 <div id="fb-root"></div>
 <script>
 window.fbAsyncInit = function() {
    FB.init({
    appId: '415944175093180', status: true, cookie: true, xfbml: true,oauth: true}); };
    (function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
  }());

  (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> 
  <fb:comments href="http://example.com/test.html" num_posts="20" width="470" />    
  </body>

Android code:

public class SimpleActivity extends Activity {

WebView web1;

ViewPager awesomePager;
    Context cxt;
    List<WebView> data;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.main);
    cxt = this;
    data = new ArrayList<WebView>();

    awesomePager = (ViewPager) findViewById(R.id.viewPager);
    awesomePager.setOffscreenPageLimit(10);

    WebView web1 = new WebView(cxt);
    web1.loadUrl("http://example.com/test.html");
            WebSettings webSettings1 = web1.getSettings();

            webSettings1.setJavaScriptEnabled(true);

    data.add(web1);
            awesomePager.setAdapter(new AwesomePagerAdapter(this,data));

}

Simple html page which is uploaded in the server like http://example.com/test.html It works fine if I check in the browser but same link if get opened in android it is not showing comment box as well as not allowing to edit. — Prax, May 29 '12 at 04:52

Shine · Accepted Answer · 2012-07-25T14:12:14.927

It may be that in "standard" html, using a web-browser, the session is somewhat saved so that you're logged-in to facebook and you can leave comments as a logged users, even if you close your browser and fire it up again (cookies, "keep me logged, etc).

Android browser, on the other hand, may not cache/save the session, the app may have been killed, etc. So you're less prone to have an "always-on" session.

Of course facebook will recognize this and present you the login form, 'cause you can't leave comments as an anonymous user.

AFAIK a solution would be to use Facebook API instead of Javascript log-in, so that your app permanently gets authorized to access user data/ post comment as a logged user.

Facebook Comment box is not displaying in Android webview

1 Answers1