13

I am trying to incorporate Facebook Comments Plugin into my native app.

The Facebook Comments Box is presented alright.

enter image description here

but when I press "Login to Facebook to Post a Comment", nothing happens. I am trying to catch the event with this function: func userContentController(userContentController: WKUserContentController,didReceiveScriptMessage message: WKScriptMessage) but it's not working.

Here is my code:

import UIKit
import WebKit

class FacebookCommentsViewController: UIViewController, WKScriptMessageHandler{


    var webView: WKWebView!

    override func viewDidLoad()
    {
        super.viewDidLoad()

        // WKWebView
        let contentController = WKUserContentController();
        contentController.addScriptMessageHandler(self,name: "callbackHandler")

        let configuration = WKWebViewConfiguration()
        configuration.userContentController = contentController

        webView = WKWebView(frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height), configuration: configuration)
        webView.scrollView.bounces = false
        self.view.addSubview(webView)

        let facebookCommentsURL = "<!DOCTYPE html><html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> </head> <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=\"http://connect.facebook.net/en_US/all.js#xfbml=1&appId=527957123932456&status=0\"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script> <div class=\"fb-comments\" data-href=\url-to-my-item data-width=\"470\" data-num-posts=\"5\"></div></body></html>"

        webView.loadHTMLString(facebookCommentsURL, baseURL: NSURL(string:"my base url"))
    }

    func userContentController(userContentController: WKUserContentController,didReceiveScriptMessage message: WKScriptMessage)
    {
        print(message.name)
    }
}

What am I doing wrong?

Cœur
  • 32,421
  • 21
  • 173
  • 232
Luda
  • 9,237
  • 11
  • 67
  • 121

3 Answers3

3

Fount it!

I've replaced WKWebView with UIWebView and everything worked!

When login was successful refresh webView:

func webViewDidFinishLoad(webView: UIWebView)
    {
        let currentURL : NSString = (webView.request?.URL!.absoluteString)!
        if (currentURL.containsString("/login_success"))
        {
            self.reloadFacebookComments()
        }

        self.updateFramesAccordingToWebViewcontentSize()
    }
Luda
  • 9,237
  • 11
  • 67
  • 121
0

Is your JS malformed? The code generator generated this for me:

<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/sdk.js#xfbml=1&version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

<!DOCTYPE html>
<html>

<head>
  <meta name=\ "viewport\" content=\ "width=device-width, initial-scale=1.0\">
</head>

<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 = \"http://connect.facebook.net/en_US/all.js#xfbml=1&appId=527957123932456&status=0\"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
  </script>
  <div class=\ "fb-comments\" data-href=\url-to-my-item data-width=\ "470\" data-num-posts=\ "5\"></div>
</body>

</html>

From what I can tell it looks like it is?

edit: oh, maybe not. The other parts of the string are taken out of context.

0

There is no needed to change webviews. The main problem is facebook script is trying to open this page in new page(_blank) therefore script is not works in webview. To prevent this problem in WKWebView you need to have implemantation of WKUIDelegate in your controller and you need to add _webView.UIDelegate = self this code in your viewDidLoad method.

Then call this delegate method to prevent this issue:

in Objective C

- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
{

  if (!navigationAction.targetFrame.isMainFrame) {

    [webView loadRequest:navigationAction.request];
  }

  return nil;
}

in Swift

optional func webView(_ webView: WKWebView, createWebViewWithConfiguration configuration: WKWebViewConfiguration,
   forNavigationAction navigationAction: WKNavigationAction,
        windowFeatures windowFeatures: WKWindowFeatures) -> WKWebView?{
  if navigationAction.targetFrame.isMainFrame == nil {
      webView.loadRequest(navigationAction.request)
  }

  return nil
}
miletliyusuf
  • 376
  • 3
  • 8