Polymer “脸谱网”；“给我们留言”；聚合物webapp中的按钮_Polymer_Facebook Javascript Sdk

Polymer “脸谱网”；“给我们留言”；聚合物webapp中的按钮

polymer

Polymer “脸谱网”；“给我们留言”；聚合物webapp中的按钮,polymer,facebook-javascript-sdk,Polymer,Facebook Javascript Sdk,我想在Polymer 3上制作的Web应用程序中添加“message us”按钮。在Facebook网站上，我找到了必须在html正文中添加Facebook SDK脚本的信息： <script> window.fbAsyncInit = function() { FB.init({ appId : 'your-app-id', autoLogAppEvents : true, xfbml

我想在Polymer 3上制作的Web应用程序中添加“message us”按钮。在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>


window.fbAsyninit=函数（）{
FB.init({
appId:'您的应用程序id'，
自动假肢：对，
xfbml：是的，
版本：“v3.0”
});
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=”https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

然后将div添加到我要添加按钮的页面：

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

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

谢谢

这与聚合物无关。您当前有一个无效的HTML块。正如您在

div

中所看到的，它们有几个属性，您需要输入或选择这些属性的值。例如，如果您的

应用程序id

是

，而

页面id

是

abcd

，则您希望它是蓝色和大的：

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

我可以看到类

fb messengermessageus

。他们也提供样式化CSS吗？

经过几天的研究，我找到了解决方案。正如平比所说，问题出在DOM的阴影中。它与DOM隔离，facebook SDK在web组件中不起作用。为了绕过这个问题，并将facebook按钮添加到您的web组件中，我们需要使用“插槽”，了解更多详细信息。但在我的示例中，我有两个级别的影子dom，因此我需要从index.html（dom）文件、my-app.js文件到my-view.js文件制作多级插槽：我将SDK脚本放在index.html中，并在body->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>

在结果中，按钮呈现在“我的聚合物”页面上：）

这对我有很大的帮助。

我正在尝试将其用于聚合物应用程序，所以对我来说是相关的。是的，我在页面id和应用id中写下了我的id。它有点有效，但只在firefox和IE中有效，而在chrome中无效。我的假设是这与聚合物结构有关。而且，不，他们不提供任何CSS。控制台中显示了什么吗？您在html

模板中的哪里添加了div
？是的，在模板中。这就是控制台中显示的内容：==$0我可以理解为什么它现在不工作。我自己测试过，似乎sdk.js
从未加载到模板中。原因可能是html模板
位于shadowdom
之下，因此它无法访问任何全局DOM结构，因为它是封装和模块化的。sdk.js
也可能以模块化模式加载，因为ES6模块不是全局的。在正常的HTML
页面中尝试不会产生任何问题。不幸的是，我没有任何解决办法，但我希望这些信息可以帮助别人为你找到一个。