将Facebook页面嵌入网站
[英]Embed Facebook page into site
问题描述
Back with another question, but nothing to do with SQL this time!! 
回到另一个问题，但是这次与SQL无关！
I am creating a site to allow users to register and make posts. 我正在创建一个网站，以允许用户注册并发布帖子。 When they register, they can enter a Facebook Page name, and I want to be able to embed the page into their profile page so when people view their profile, the Facebook Page will show up in a small window. 当他们注册时，他们可以输入Facebook页面名称，而我希望能够将页面嵌入到他们的个人资料页面中，以便当人们查看其个人资料时，Facebook页面将显示在一个小窗口中。 I went to Facebook's Page Plugin page, but I'm not sure this is the best way to accomplish what I want. 我去了Facebook的Page Plugin页面，但是我不确定这是否是实现我想要的最好的方法。 I've done plenty of searching, but haven't had any luck. 我已经做了很多搜索，但是没有任何运气。
I tried putting just a single page's code in the site, but it just keeps coming up blank. 我试图在站点中仅放置一个页面的代码，但是却一直空白。 This is what I got from the Page Plugin site: 这是我从页面插件站点获得的：
<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>
Any help is appreciated. 任何帮助表示赞赏。
EDIT 编辑
Ok, so the problem is actually something with Google Chrome. 好的，问题实际上出在Google Chrome。 I tried it in IE 11 and Firefox, and the page loaded fine. 我在IE 11和Firefox中进行了尝试，并且页面加载正常。 Still need to figure out why it isn't loading in Chrome. 仍然需要弄清楚为什么它无法在Chrome中加载。
2nd EDIT 第二次编辑
Ok, so this is weird. 好的，这很奇怪。 I have 3 different items being displayed using iframes. 我有3个使用iframe显示的不同项目。 The Facebook page, a Strava Activity log, and a Trailforks Activity log. Facebook页面，Strava活动日志和Trailforks活动日志。 The Strava and Trailforks items show up fine, but the Facebook Page doesn't for some reason. Strava和Trailforks项显示正常，但Facebook Page出于某种原因未显示。 This is only in Chrome, the Facebook works fine in Firefox and IE. 这仅在Chrome中有效，Facebook在Firefox和IE中可以正常工作。 Here is my code: 这是我的代码：
<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>
3rd EDIT: Full Code 第3次编辑：完整代码
Here is my complete code. 这是我完整的代码。 I stripped the page down to the bare minimum, and am still having the issue. 我将页面剥离到最低限度，仍然存在问题。 I have tried multiple computers, and it still doesn't show in Chrome while working in Firefox and IE. 我已经尝试了多台计算机，但是在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&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>
</body>
</html>
2 个解决方案
解决方案1
0 2018-03-25 21:18:03
All your HTML is invalid. 您所有的HTML无效。 At a minimum, you need to put values for properties in quotes. 至少，您需要将属性的值放在引号中。 You should also escape any reserved entities like & as & 您还应该转义任何保留的实体，例如& as & . 。
<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>
解决方案2
0 2018-03-26 12:40:32
Ok, so I'm an idiot. 好吧，我是个白痴。 I tried Chrome on 3 different computers with the same result. 我在3台不同的计算机上尝试使用Chrome，结果相同。 I happened to glance up at the right hand corner, and saw my ad blocker had blocked something, when the iframe was the only item on the page. 当iframe是页面上唯一的项目时，我碰巧瞥了一眼右上角，发现我的广告拦截器拦截了一些东西。 So, I turned the ad blocker off and reloaded the page, and it worked fine. 因此，我关闭了广告拦截器并重新加载了页面，效果很好。 So, will have to figure out something for that. 因此，将不得不为此寻找一些东西。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.