Question

我正在尝试在我的Angular / Ionic App（PWA）中添加Facebook Comment Box和Messenger Plugin。

单独包含Messenger插件时，效果很好。但是使用下面的代码，我尝试将两者结合在一起，使Messenger无法加载，并且控制台中没有错误。

index.html

<!-- Load Facebook SDK for JavaScript -->
<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/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
    fjs.parentNode.insertBefore(js, fjs);

    js = d.createElement(s); js.id = id + '1';
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1423348794345669&autoLogAppEvents=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-customerchat"
    attribution="setup_tool"
    page_id="838973246246775"
    greeting_dialog_display="hide"
    logged_in_greeting="Hi! How can we help you?"
    logged_out_greeting="Hi! How can we help you?">
</div>

仅信使工作代码@ https://change.grassrootsapp.in/ 组合的破损代码@ https://alpha4.uat.grassrootsapp.in/

chat.html

<ion-content id="event-chat-content" *ngIf="cEvent">
    <div id="fb-root"></div>
    <div class="fb-comments" [attr.data-href]="cEvent.shortURL" data-numposts="10"></div>
</ion-content>

chat.ts（来自https://blog.f5.works/using-facebook-comment-plugin-in-angular-2/）

ionViewDidEnter() {

    // https://samkirkiles.svbtle.com/angular-4-facebook-login-integration
    let wind                =   <any>window;
    if (wind.FB) {
        wind.FB.XFBML.parse();
    }
}

现在可以合并两者了，我不确定

放置位置
如何为script和sdk.js包括xfbml.customerchat.js标签

我尝试了以下情况，但失败了：

让我的index.html不受干扰。
从chat.html中仅删除<div id="fb-root"></div>，因为它已经包含在index.html
有了这个，当我加载应用程序时，Messenger可以正常工作。
但是当我导航到具有“注释”框的组件时，它不会加载“注释”框，还会破坏Messenger。

有帮助吗？

Facebook评论框和Messenger

0 个答案: