Question

问题：

所以我有一个简单的网页，其中嵌入了youtube视频和1个facebook帖子。除了点之外，youtube视频加载精美，但是当我将嵌入的facebook帖子放在我的页面上时，“facebook post”会在页面上加载。更不用说它甚至没有在移动设备上加载。

我如何获得嵌入式facebook帖子：

我只是简单地去了facebook上的一个帖子并点击右上角的箭头，他们有一个“嵌入帖子”的选项，然后给我一个代码放在我的网站上。它给了我这个。

<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0" data-width="300"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"><p>Live to tweet about it. #SANANDREAS #NowPlaying</p>Posted by <a href="https://www.facebook.com/sanandreasmovie">San Andreas</a> on&nbsp;<a href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0">Sunday, June 14, 2015</a></blockquote></div></div>

（索引）我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Theme</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1200, initial-scale=0.3">
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome-4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<header></header>

<!—embedded facebook post that loads terrible for some reason—>
<div class="eq-content fb-content”><!— this container has a large background image with the width of 2000px—>
<div class="dynamic-content-3">
<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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0" data-width="300"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"><p>Live to tweet about it. #SANANDREAS #NowPlaying</p>Posted by <a href="https://www.facebook.com/sanandreasmovie">San Andreas</a> on&nbsp;<a href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0">Sunday, June 14, 2015</a></blockquote></div></div>
</div>
</div>

<footer> </footer>

<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.js"></script>
<script src="assets/js/main.js"></script>


</body>
</html>

我目前无法提供示例链接，因为我遇到了服务器问题。但无论如何我不相信真的需要一个例子。这个概念很简单，你可以像我一样拥有一个带有大背景图像的div，并在中间生成你的嵌入式facebook帖子，你会看到我看到的同样的东西。也像我说它很少在移动设备上加载，并且在我的IMAC（桌面）上加载速度非常慢。

我不知道为什么facebook会花费不合理的时间来装载这样的东西，但唯一可能的解决方案我可以确定是可能有类似的javascript预装载器所以我可以加载先页面然后显示内容。这只是我的一个小想法，但任何其他解决方案/想法将不胜感激，谢谢。

Answer 1

尝试以下链接。通常，嵌入的视频/帖子会从主机中获取整个数据，从而占用加载时间。但是，使用一些JS你可以修复它（它实际上是一个黑客）因此，您创建一个显示视频图像的div，用户应该知道它是实际视频。单击视频div后，进行js调用以将div内容替换为实际的嵌入帖子。

如果你想展示很多嵌入式帖子，这对整个页面的加载时间有很大帮助。

https://medium.com/@BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3

干杯。：）

为什么当我在我的网页上加载“嵌入式”facebook帖子时加载速度很慢？

1 个答案: