Facebook plugins not working on content/template pages

问题

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).

回答1:

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.

来源：https://stackoverflow.com/questions/29456424/facebook-plugins-not-working-on-content-template-pages

标签

javascript

html

facebook

aurelia