Adding facebook comment box plugin for web based phonegap app - facebook

Question

I am trying to add the facebook comment box to my web based app but it does not show up when I install on my phone. Is there some special plugin or methodology for getting the facebook comment plugin to work with phonegap and/or ionic? I currently have this plugin in my config:
<gap:plugin name="com.phonegap.plugins.facebookconnect" version="0.9.0">

Answer 1

I managed to do it with iframe also.
I solved resizing with https://github.com/davidjbradshaw/iframe-resizer
for login i had to change the native code.
iOS: MainViewController.m
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if (![url isFileURL] && (navigationType == UIWebViewNavigationTypeLinkClicked))
{ //this is for loading links in external browser
if ([[UIApplication sharedApplication] canOpenURL:url]) {
[[UIApplication sharedApplication] openURL:url];
return NO;
}
} else if ([[url absoluteString] containsString:#"m.facebook.com"] && [[url absoluteString] containsString:#"login"]) {
NSString *forceInAppBrowserJS = [NSString stringWithFormat:
#"var loginWindow = cordova.InAppBrowser.open('%#', '_blank', 'location=yes');\n\
loginWindow.addEventListener('exit', function(){\n\
window.fbIframe.src = window.fbIframe.src;\n\
});", url]; //reload the iframe after login, you have to assign the iframe in js
[theWebView stringByEvaluatingJavaScriptFromString: forceInAppBrowserJS];
return NO;
}
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
Android: CordovaWebViewClient.java
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (!url.contains("file://")) {
if (url.contains("m.facebook.com") && url.contains("login")) {
String forceInAppBrowserJS = String.format("var loginWindow = cordova.InAppBrowser.open('%s', '_blank', 'location=yes,hardwareback=yes'); loginWindow.addEventListener('exit', function(){window.fbIframe.src = window.fbIframe.src;});", url);
view.evaluateJavascript(forceInAppBrowserJS, null);
return true;
}
if (!url.startsWith("http://") && !url.startsWith("https://"))
url = "http://" + url;
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
view.getContext().startActivity(browserIntent); //open link in external browser
return true;
}
return helper.shouldOverrideUrlLoading(view, url);
}

Answer 2

The best solution I have found so far is to call the comments box from inside an iframe. The only problems with this methodology so far is logging in and setting the iframe height. I am still working on a solution