将Facebook页面嵌入网站

Question

回到另一个问题，但是这次与SQL无关！

我正在创建一个网站，以允许用户注册并发布帖子。 当他们注册时，他们可以输入Facebook页面名称，而我希望能够将页面嵌入到他们的个人资料页面中，以便当人们查看其个人资料时，Facebook页面将显示在一个小窗口中。 我去了Facebook的Page Plugin页面，但是我不确定这是否是实现我想要的最好的方法。 我已经做了很多搜索，但是没有任何运气。

我试图在站点中仅放置一个页面的代码，但是却一直空白。 这是我从页面插件站点获得的：

<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/en_US/sdk.js#xfbml=1&version=v2.12';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-href="https://www.facebook.com/KeenesListcom-126649220715963/" 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/KeenesListcom-126649220715963/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/KeenesListcom-126649220715963/">KeenesList.com</a></blockquote></div>

任何帮助表示赞赏。

编辑

好的，问题实际上出在Google Chrome。 我在IE 11和Firefox中进行了尝试，并且页面加载正常。 仍然需要弄清楚为什么它无法在Chrome中加载。

第二次编辑

好的，这很奇怪。 我有3个使用iframe显示的不同项目。 Facebook页面，Strava活动日志和Trailforks活动日志。 Strava和Trailforks项显示正常，但Facebook Page出于某种原因未显示。 这仅在Chrome中有效，Facebook在Firefox和IE中可以正常工作。 这是我的代码：

<iframe src=https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmountainbikingintheus%2F&tabs=timeline&width=350&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId width=350 height=400 style=border:none;overflow:hidden scrolling=no frameborder=0 allowTransparency=true></iframe>

<iframe height=160 width=300 frameborder=0 allowtransparency=true scrolling=no src=https://www.strava.com/athletes/21039441/activity-summary/947ebf6e987358db8c8785041ad46b5a4d4ea7c5></iframe>

<iframe width=400 height=277 frameborder=0 src=https://www.trailforks.com/widgets/ridelogs/?userid=1306231&w=400px&h=277px&map=0&stats=1></iframe>

第3次编辑：完整代码

这是我完整的代码。 我将页面剥离到最低限度，仍然存在问题。 我已经尝试了多台计算机，但是在Firefox和IE中使用Chrome时仍然无法显示。

<html>
    <head>
        <title>Test IFrame</title>
    </head>
    <body>
        <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmountainbikingintheus%2F&amp;tabs=timeline&amp;width=350&amp;height=400&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId" width="350" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    </body>
</html>

Answer 1

您所有的HTML无效。 至少，您需要将属性的值放在引号中。 您还应该转义任何保留的实体，例如& as & 。

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fmountainbikingintheus%2F&amp;tabs=timeline&amp;width=350&amp;height=400&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId" width="350" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

<iframe height="160" width="300" frameborder="0" allowtransparency="true" scrolling="no" src="https://www.strava.com/athletes/21039441/activity-summary/947ebf6e987358db8c8785041ad46b5a4d4ea7c5"></iframe>

<iframe width="400" height="277" frameborder="0" src="https://www.trailforks.com/widgets/ridelogs/?userid=1306231&amp;w=400px&amp;h=277px&amp;map=0&amp;stats=1"></iframe>

Answer 2

好吧，我是个白痴。 我在3台不同的计算机上尝试使用Chrome，结果相同。 当iframe是页面上唯一的项目时，我碰巧瞥了一眼右上角，发现我的广告拦截器拦截了一些东西。 因此，我关闭了广告拦截器并重新加载了页面，效果很好。 因此，将不得不为此寻找一些东西。

将Facebook页面嵌入网站

问题描述

2 个解决方案

解决方案1
0 2018-03-25 21:18:03

解决方案2
0 2018-03-26 12:40:32

将Facebook页面嵌入网站

问题描述

2 个解决方案

解决方案1 0 2018-03-25 21:18:03

解决方案2 0 2018-03-26 12:40:32

解决方案1
0 2018-03-25 21:18:03

解决方案2
0 2018-03-26 12:40:32