Question

Back with another question, but nothing to do with SQL this time!!

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. I went to Facebook's Page Plugin page, but I'm not sure this is the best way to accomplish what I want. 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. I tried it in IE 11 and Firefox, and the page loaded fine. Still need to figure out why it isn't loading in Chrome.

2nd EDIT

Ok, so this is weird. I have 3 different items being displayed using iframes. The Facebook page, a Strava Activity log, and a Trailforks Activity log. The Strava and Trailforks items show up fine, but the Facebook Page doesn't for some reason. This is only in Chrome, the Facebook works fine in Firefox and 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

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.

<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

All your HTML is invalid. At a minimum, you need to put values for properties in quotes. You should also escape any reserved entities like & 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是页面上唯一的项目时。所以，我关掉广告拦截器并重新加载页面，它工作正常。所以，必须找出一些东西。

Embed Facebook page into site

2 个答案: