Question

我正在尝试通过Facebook Page Plugin将facebook集成到我的网站上，但是创建的iframe/span的大小存在问题。我正在使用以下代码段测试页面插件（我从代码段中删除了我的AppID）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Facebook Page Plugin Test</title>
    <meta name="description" content="Test">
    <meta name="author" content="Peter">
    <style>
        .fb-page, .fb-page:before, .fb-page:after
        {
            width: 500px;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
</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 = 'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v3.1&appId=...';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
        <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
            <a href="https://www.facebook.com/facebook">Facebook</a>
        </blockquote>
    </div>
</body>
</html>

问题在于该插件在加载页面时不会显示，因为其内部width和height设置为0。使用Chrome开发人员工具更改这些值时，将显示页面插件，但这不是解决方案。我已经尝试过将div包装到另一个已定义的width和height的包装中，但这没有帮助。另外，如代码段中所示为.fb-page指定样式也不起作用。到目前为止，我尝试过的所有解决方案都会得到以下结果：

<span style="vertical-align: top; width: 0px; height: 0px; overflow: hidden;">
    <iframe name="f37b63f71303c9" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v3.1/plugins/page.php?adapt_container_width=true&amp;app_id=127309047310662&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2Fmp2v3DK3INU.js%3Fversion%3D42%23cb%3Df2bfb9892342ec8%26domain%3D%26origin%3Dfile%253A%252F%252F%252Ff38080ee563c438%26relation%3Dparent.parent&amp;container_width=502&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&amp;locale=de_DE&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false&amp;tabs=timeline" style="border: none; visibility: visible; width: 0px; height: 0px;"></iframe>
</span>

您可以清楚地看到width元素的height和span被设置为0。有人知道导致问题的原因并且可以提出解决方案吗？

Answer 1

我能够通过添加以下CSS代码段来解决此问题：

keystore-file: Path to your keystore-file
 storepass: storepass
 alias: alias

也许将来有人会需要此信息。我最终没有使用该插件，因为facebook使其很难集成，并且我认为这是不值得的。

Facebook页面插件问题

1 个答案: