Embed Facebook page into site
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&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 answers
solution1
0 2018-03-25 21:18:03
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&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>
solution2
0 2018-03-26 12:40:32
Ok, so I'm an idiot. I tried Chrome on 3 different computers with the same result. 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. So, I turned the ad blocker off and reloaded the page, and it worked fine. So, will have to figure out something for that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.