Question

我正在开发一个项目，您可以从Facebook，Twitter，Pinterest等查看几个嵌入代码。我通过ajax加载嵌入代码。但是我遇到了facebook嵌入代码的问题。 Facebook有一个非常混乱的嵌入系统。常规嵌入代码由2部分组成;脚本部分和嵌入部分。

脚本部分

<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

嵌入部分

<div class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=667590506599208&amp;set=a.155534741138123.32906.153667584658172&amp;type=1" data-width="550">
<div class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/photo.php?fbid=667590506599208&amp;set=a.155534741138123.32906.153667584658172&amp;type=1">Post</a> by <a href="https://www.facebook.com/cumhuriyetgzt">Cumhuriyet Gazetesi</a>.
</div>
</div>

我在head标签之间加入了脚本部分。正如我所说，我通过ajax加载嵌入代码，当我这样做时，我也加载了这个

<script type="text/javascript"> FB.XFBML.parse(); </script>

代码使facebook嵌入可以重新分析。我遇到的问题是;在页面上加载facebook嵌入代码不起作用（即使它们加载了ajax）。当我重新加载嵌入代码（重新加载按钮，触发ajax加载），然后他们工作。有时在同一页面上有twitter或pinterest嵌入代码时它们不起作用。

任何人都知道可能会发生什么？我应该在哪里以及如何包含脚本和重新分析代码？

谢谢

编辑：我认为问题可能与加载顺序有关。因此，如果脚本在加载DOM元素后加载，则不会影响嵌入代码。也许如果我确保在加载页面之前加载脚本，它将起作用。只是一个想法...

Answer 1

在您的javascript文件中的任何位置添加以下FB javascript。

(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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));

然后

window.fbAsyncInit = function() {

            FB.XFBML.parse();
          }

在加载FB嵌入内容后2或3秒调用上述功能。

setTimeout(function() {
    if (typeof(FB) != 'undefined') {

       window.fbAsyncInit();

        } 
       }, 2000)

Facebook嵌入行为奇怪

1 个答案: