UIWebView to display both local image and facebook comment

Question

I'm facing an issue on an UIWebView. I got a WebView which display an html string. This html string contains :

Html text
Local images
fb:comments

At first i only had Html + local Image so I was using th well known method :

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webview loadHTMLString:htmlString baseURL:baseURL];

Everything worked perfectly. But then i had to implement facebook comments http://developers.facebook.com/docs/reference/plugins/comments/

Since my old BaseURL wasn't working anymore for facebook i tried to load with

NSURL *baseURL = [NSURL URLWithString:@"http://www.facebook.com/"];

This made my facebook work but the local image aren't displayed within the webview, even with absolute path.

Any help would be appreciate. Thanks for your time

Through my trials with something similar I was unable to get a web view to reference both local and web based content at the same time. It was a one or the other, not both situation. Hopefully someone will have an answer to this or at least confirm if it's just not possible. — Mark Reid, May 23 '12 at 00:12

score 2 · Accepted Answer · edited May 23 '17 at 12:27

There's a solution to use the img tag with base64 encoded image data instead of the url. That should not be a problem as you have the image locally, see the html sample.

To test it quickly you can use the online encoding service (50kb limitation)

The original answer is here

And the truncated base64-sample for future reference:

<html>
<body>
<div id="fb-root"></div>
FB1
    <script>
        window.fbAsyncInit = function() {
            FB.init({
                    appId      : null,
                    channelUrl : null,
                    status     : true,
                    cookie     : true,
                    xfbml      : true 
                    });

        };

        (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>

    FB2
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh......lAmeQ/IAAAAASUVORK5CYII=" alt="Screen Shot 2012-05-23 at 6.53.28 AM.png" />

    <div class="fb-comments" data-href="http://facebook.com" data-num-posts="2" data-width="470"></div>

</body>
</html>

UIWebView to display both local image and facebook comment

1 Answers1

Linked