Embedded Facebook post does not shows properly in

2019-06-23 22:30发布

站内问答 / iOS
592 2 4

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>

2条回答
beautiful°
2楼-- · 2019-06-23 23:20

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>
查看更多
0人赞 添加讨论(0) 举报
The star\"
3楼-- · 2019-06-23 23:20

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):

enter image description here

enter image description here

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)