Embedded Facebook post does not shows properly in UIWebView

Question

I'm trying to show facebook embedded post inUIWebView. I get sample code from facebook developer portal and load it into UIWebView. And see only blank screen.

Then I put this code in local html file and opened it in Chrome. Still nothing, but i see that embed appeared in half second and then vanished. I try many different embedded html examples with same result.

Here is my code:

<html>
<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 = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.3&appId=334367389999440";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500">
    <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"><p>Be the first to know
            when we release a new video by subscribing to our official Facebook Developers YouTube channel!
            http://www.youtube.com/facebookdevelopers</p>Posted by <a
                href="https://www.facebook.com/FacebookDevelopers">Facebook Developers</a> on <a
                href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553">29 Май 2013 г.</a>
        </blockquote>
    </div>
</div>
</body>
</html>

I'm having the same problem. When loading a local html file with this content into Chrome didn't work I put it on an actual server and hit it like any other website and the video finally showed up. It must have something to do with trying to load the html with a protocol that isn't "http(s)". — tkburbidge, Aug 21 '15 at 05:56

score 0 · Answer 1 · answered May 19 '15 at 12:30

I don't find any reason of adding script in the HTML, as you said you have found sample code in FB docs.

Below code is working fine:-

<html>
<body>
<div id="fb-root"></div>

<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500">
    <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"><p>Be the first to know
            when we release a new video by subscribing to our official Facebook Developers YouTube channel!
            http://www.youtube.com/facebookdevelopers</p>Posted by <a
                href="https://www.facebook.com/FacebookDevelopers">Facebook Developers</a> on <a
                href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553">29 Май 2013 г.</a>
        </blockquote>
    </div>
</div>
</body>
</html>

Yes, this code works fine but post shows with out any "facebook style". Only plain text. And I want to embed post like many websites do. As I understand, script needs to load facebook css, loading images and handle actions. — hex, May 19 '15 at 12:31

MingalevME · Answer 2 · 2015-11-11T12:02:28.317

The only way to resolve the problem is create a proxy service with facebook-embed. Before insert your HTML-code into UIWebView check it for fb-post and fb-video:

// Facebook Video Embed
if ([HTMLcontent rangeOfString:@"fb-video"].location != NSNotFound) {
    [self appendFBEmbed:htmlContent type:@"video"];
}

// Facebook Post Embed
if ([HTMLcontent rangeOfString:@"fb-post"].location != NSNotFound) {
    [self appendFBEmbed:htmlContent type:@"post"];
}

... // Your some code before </body></html>

[htmlContent appendString:@"</body></html>"];
[[self webView] loadHTMLString:[self HTMLcontent] baseURL:nil];

...

- (void)appendFBEmbed:(NSMutableString*)html type:(NSString* )type
{
    NSString *locale = getYourCurrentLocaleIdentifier();
    [html appendFormat:@"<script type=\"text/javascript\">"];
    [html appendFormat:@"var items = document.getElementsByClassName('fb-%@');", type];
    [html appendFormat:@"for (i=0; i<items.length;i++) {"];
    [html appendFormat:@"    var item = items[i];"];
    [html appendFormat:@"    var url = item.getAttribute(\"data-href\");"];
    [html appendFormat:@"    var src = 'http://YOUR-APP-HOST/facebook/emded.html?type=%@&url=' + encodeURIComponent(url) + '&locale=%@&width=%d';", type, locale, getYourCurrentDisplayWidth()];
    [html appendFormat:@"    item.innerHTML = '<iframe class=\"facebook fb-%@\" frameborder=\"0\" src=\"' + src + '\"></iframe>';", type];
    [html appendFormat:@"}"];
    [html appendFormat:@"</script>"];
}

And my remote page source code (PHP Phalcon Controller):

// FacebookController.php
<?php

class FacebookController extends \Phalcon\Mvc\Controller
{
    public function indexAction()
    {
        $type = trim($this->request->get('type'));

        if (in_array($type, ['post', 'video']) === FALSE) {
            throw new \Exception('Unknown fb-post type');
        }

        $url = trim($this->request->get('url'));

        $host = parse_url($url, \PHP_URL_HOST);

        if ($host === FALSE) {
            throw new \Exception('Invalid URL'); // URL is not URL
        }

        if ($host !== NULL /* related URL */ && $host !== 'facebook.com' && $host !== 'www.facebook.com') {
            throw new \Exception('Forbidden URL'); // Not a Facebook-URL
        }

        $locale = trim($this->request->get('locale'));

        if ($locale) {
            if (strlen($locale) > 10) {
                throw new \Exception('Invalid Locale'); // 
            }

            $localesXML = new \SimpleXMLElement(ROOT_PATH . '/../data/facebook-locales.xml', NULL, TRUE); // Where ROOT_PATH . '/../data/facebook-locales.xml is a local copy of https://www.facebook.com/translations/FacebookLocales.xml

            $result = $localesXML->xpath('//representation[.="' . htmlentities($locale) . '"]');

            if (count($result) > 0) {
                $locale = (string) $result[0];
            } else {
                $locale = NULL;
            }
        } else {
            $locale = NULL;
        }

        if ($locale === NULL) {
            $locale = "en_US";
        }

        $width = intval(trim($this->request->get('width')));

        if ($width < 100 || $width > 3000) {
            throw new \Exception('Invalid width param');
        }

        $viewData = [
            'type' => $type,
            'url' => $url,
            'width' => $width,
            'locale' => $locale,
        ];

        foreach ($viewData as $k => $v) {
            $this->view->setVar($k, $v);
        }
    }
}

<!-- /views/facebook/index.phtml -->
<html>
    <body>
        <div class="fb-<?= $type ?>" data-href="<?= $url ?>" data-width="<?= $width ?>"></div>
        <script src="https://connect.facebook.net/<?= $locale ?>/sdk.js#xfbml=1&version=v2.3"></script>
    </body>
</html>

Example (blured text is my HTML over fb-embed):

Umm, isn't that a Twitter embed in the screenshot? – Jeremy Hicks Nov 10 '15 at 21:15 — Jeremy Hicks, Nov 10 '15 at 21:15

Embedded Facebook post does not shows properly in UIWebView

2 Answers2

Example (blured text is my HTML over fb-embed):

Linked