Facebook插件不适用于内容/模板页面 [英] Facebook plugins not working on content/template pages

问题描述

我很喜欢Facebook插件编程。我是指快速入门文件。

在我的网站上，我有一个布局页面和几个内容页面。只有布局页面包含完整的html-head-body结构，其余的内容页面包含部分html元素（可以被认为是模板）。

我有将 FB.init（）脚本放在布局页面中，就在正文标签之下：

 < script> 
 window.fbAsyncInit = function（）{
 FB.init（{
 appId：'MY-APP-ID'，
 xfbml：true，
 version：' v2.3'
}）; 
}; 
 
（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; 
 fjs.parentNode.insertBefore（js，fjs）; 
}（document，'script'，'facebook-jssdk'））; 
< / script> 
  

，并尝试使用我的一个内容页面中的类似插件测试集成：

 < div class =col-sm-10 fb-like
 data-share =true
 data-width =450
 data-show-faces =true> 
  

但是我发现当我将它放在内容/模板页面上时，它不起作用。请注意，在这种情况下，我甚至没有在浏览器控制台中发现任何JavaScript错误。但是，当我直接在Layout页面中输入相同的作品时，相同的作品。

请让我知道我在这里缺少什么。

PS：同样适用于fb登录（在布局上工作但不在模板上）

解决方案

在$模板添加到DOM之前，$ init 正在运行。您为 aurelia 标记了您的问题，所以我假设您有一个支持模板的视图模型。考虑利用您可以使用的生命周期回调 -

附加 - 此回调一次被调用模板已被渲染，虚拟机已经被附加到它。把你的 FB.init（）放在这里就够了。您可以根据您的设置在父母或孩子中执行此操作。

I am quite new to Facebook plugin programming. I am referring the quick start document.

In my web site I have a layout page and few content pages. Only the layout page contains the full html-head-body structure and rest of the content pages contain partial html elements (those can be thought of as templates).

I have put the FB.init() script only in layout page, just below the body tag:

<script>
window.fbAsyncInit = function () {
    FB.init({
        appId: 'MY-APP-ID',
        xfbml: true,
        version: 'v2.3'
    });
};

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

and trying to test the integration using the like plugin in one of my content page:

                <div class="col-sm-10 fb-like"
                 data-share="true"
                 data-width="450"
                 data-show-faces="true">

But I found that it is not working when I put it on content/template pages. Note that I have NOT even found any JavaScript error in browser console in this case. However, the same works when I directly put the same in Layout page.

Please let me know what I am missing here.

P.S.: Same applies for fb login (works on layout but not on template).

解决方案

Sounds like the init is running before the template has been added to the DOM. You tagged your question for aurelia so I am assuming that you have a view model backing the template. Consider taking advantage of the life cycle callbacks that are available to you -

attached - This callback is called once the template has been rendered and the VM has been attached to it. Putting your FB.init() in here should be sufficient. You can do this either in the parent or the child depending on your setup.

这篇关于Facebook插件不适用于内容/模板页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！