Unable to load full Facebook comment plugins inside an iOS UIWebView

Question

I have a simple ViewController to load FB comments plugins inside a UIWebView

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIWebView * webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320.0f, 1505.0f)];

    NSString * html = @"\
    <!DOCTYPE html>\
    <html xmlns:fb='http://ogp.me/ns/fb#'>\
    <head>\
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>\
    </head>\
    <body style='background-color:red;'>\
    \
    <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=xxx';\
    fjs.parentNode.insertBefore(js, fjs);\
    }(document, 'script', 'facebook-jssdk'));</script>\
    \
    <fb:comments href='http://example.com' num_posts='10'></fb:comments>\
    \
    </body>\
    </html>\
    ";

    [webView loadHTMLString:html baseURL:nil];
    [self.view addSubview:webView];

I can see the comments being loaded, but just the height is strange, seems auto resize failed? I can view the whole comments if I am using mobile safari.

Screenshot from Simulator

Have you been able to find an appropriate solution for this? — benuuu, Sep 12 '13 at 22:03

Nithinbemitk · Answer 1 · 2013-03-28T04:38:06.850

you can use this code for displaying the fb comment in iOS UIWebview

  UIWebView *fbWebview=[[UIWebView alloc]initWithFrame:CGRectMake(0, 0, 320, 1505)];
  [fbWebview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.facebook.com/Levis"]]];

CGRect scrollViewFrame = CGRectMake(0, 0, 320, 1024);
UIScrollView  *scrollViewMain = [[UIScrollView alloc] initWithFrame:scrollViewFrame];
CGSize scrollViewContentSize = CGSizeMake(320, 1505);
[scrollViewMain setContentSize:scrollViewContentSize];
[scrollViewMain setBounces:NO];
[scrollViewMain setScrollEnabled:YES];
[scrollViewMain setShowsVerticalScrollIndicator:YES];

[scrollViewMain setBackgroundColor:[UIColor redColor]];
[scrollViewMain addSubview:fbWebview];

[self.view addSubview:scrollViewMain];

instead of "https://www.facebook.com/Levis" use your FB URL

this may help you

This really isn't the same thing as the FB comments plugin and is a completely different functionality than what he's looking for. You can't use this to receive comments about the URL example.com — Andy McSherry, Apr 01 '13 at 10:36

score 2 · Answer 2 · answered Mar 26 '13 at 07:10

2

You need to specify a baseURL

[webView loadHTMLString:html baseURL:[NSURL URLWithString:@"http://www.example.com"]];

answered Mar 26 '13 at 07:10

Andy McSherry

4,676
3
26
36

score 0 · Answer 3 · answered May 17 '13 at 11:42

@Howard you can use http://www.facebook.com/plugins/comments.php?href=http://www.google.com' scrolling='yes' profile='yes' frameborder='0' style='border:none; overflow:hidden; width:300px; height:30px;' data-href='http://www.google.com' allowTransparency='true'>"

score 0 · Answer 4 · edited May 23 '17 at 12:10

Same problem here. The solution was not to use a local HTML file (or HTML string). Upload the HTML file to an server and use:

NSURL *url = [NSURL URLWithString:@"http://www.blablblab.com/yourfile.html"]; 
[self.webview loadRequest:[NSURLRequest requestWithURL:url]];

instead of:

[self.webview loadHTMLString:localString baseURL:nil];

I didn't discovered yet why there is a difference in the layout when the file is on a server, but when it is a local file, the height of my Facebook Comments View was always reduced to "height:160". Apparently it's because of the "all.js" facebook script (accordingly to this question).

Unable to load full Facebook comment plugins inside an iOS UIWebView

4 Answers4

Linked