Question

我想在“聚合物3”上制作的Web应用程序中添加“向我们发送消息”按钮。在Facebook网站上，我发现必须在html正文中添加Facebook SDK脚本的信息：

<script>
    window.fbAsyncInit = function() {
        FB.init({
        appId            : 'your-app-id',
        autoLogAppEvents : true,
        xfbml            : true,
        version          : 'v3.0'
        });
    };
    (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 = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

然后在我要添加按钮的页面上添加div：

<div class="fb-messengermessageus" 
    messenger_app_id="<APP_ID>" 
    page_id="<PAGE_ID>"
    color="<blue | white>"
    size="<standard | large | xlarge>">
</div>

但是在Polymer中，当我将此代码添加到页面时，什么也没有发生。我应该创建特殊的聚合物元素还是做错了什么？任何建议都会有所帮助谢谢

Answer 1

这与聚合物无关。您当前有无效的HTML块。如您在div中所见，它们具有几个属性，您需要输入或选择一个值。例如，如果您的app id是123456，而您的page id是abcd，那么您希望它是蓝色的：

<div class="fb-messengermessageus" 
    messenger_app_id="123456" 
    page_id="abcd"
    color="blue>"
    size="large">
</div>

我可以看到课程fb-messengermessageus。他们还提供样式CSS吗？

Answer 2

经过几天的学习，我找到了解决方案。正如Binh Bui所说，问题出在Shadow DOM中。它与DOM隔离，facebook SDK在Web组件中不起作用。要绕过此操作并将facebook按钮添加到您的Web组件，我们需要使用“插槽”，更多详细信息here。但是在我的示例中，我有两个级别的影子dom，因此需要从index.html（DOM）文件制作多级插槽，将my-app.js文件扔到my-view.js文件中：我将SDK脚本放入index.html，并在正文中->我插入的my-app部分中：

<body>
<my-app>
  <div slot="child">
    <div
      class="fb-messengermessageus"
      messenger_app_id="520865131680985"
      page_id="276570696236683"
      color="blue"
      size="large">
    </div>
  </div>
</my-app>
...

在my-app.js文件中，我添加到了该广告位：

<my-view name="contacts">
   <slot name="child"></slot>
</my-view>

然后在my-view.js文件中添加了未命名的插槽：

<div>
  <slot></slot>
</div>

结果是按钮显示在我的聚合物页面上：）这个example和这个one都对我有很大帮助。

聚合物Webapp中的Facebook“向我们发送消息”按钮

2 个答案: