如何在聚合项目中加载Facebook Javascript sdk？

我知道有一个web组件叫做

facebook login

，我不想简单地安装它

我尝试在web组件中添加Facebook Javascript SDK。在ready调用中，我添加了基本的javascript sdk

ready() {

  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'your-app-id',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (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'));
}

然后在我的电脑里，我试着添加这个div，但没有成功

<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>'

'

请给我指一下正确的方向

更新：landing-app.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" type="" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" type="" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="landing-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- Navigation using App Toolbar -->
    <app-toolbar>
      <div class="toolbar-container">
        <div main-title>***</div>
      </div>
    </app-toolbar>
    <section>
      <p>Super Charged Bot</p>
      <h2>Helps pages to sell items through Messenger.</h2>
      <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>
    </section>
  </template>

  <script>
    /**
    * @customElement
    * @polymer
    */
    class LandingApp extends Polymer.Element {
      static get is() { return 'landing-app'; }
      static get properties() {
        return {
          route: {
            prefix: '',
            path: ''
          }
        };
      }
      ready() {

        window.fbAsyncInit = function() {
          FB.init({
            appId            : 'your-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.10'
          });
          FB.AppEvents.logPageView();
        };

        (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'));
      }
    }

    window.customElements.define(LandingApp.is, LandingApp);
  </script>
</dom-module>

：主持人{
显示：块；
}
***
超级充电机器人

帮助页面通过Messenger销售物品。
/**
*@customElement
*@聚合物
*/
LandingApp类扩展了聚合物。元素{
静态get是（）{return'landing app'；}
静态获取属性（）{
返回{
路线：{
前缀：“”，
路径：“”
}
};
}
就绪（）{
window.fbAsyninit=函数（）{
FB.init({
appId:'您的应用程序id'，
自动假肢：对，
xfbml：是的，
版本：“v2.10”
});
FB.AppEvents.logPageView（）；
};
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{return；}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}
}
window.customElements.define（LandingApp.is，LandingApp）；

注意 （很高兴知道） 您复制到ready函数的facebook SDK加法器实际上创建了一个脚本标记，src指向

connect.fb.com

，作为文档上的第一个脚本标记。 您没有将其范围限定到您正在编写的组件

• 您在哪里添加的
  ？ 在阴影中如果是这样，javascript对div没有访问权限

尝试在元素的阴影DOM中创建一个

大概是这样的：

<dom-module id="my-app">
    <template>
       <!-- your element's shadow DOM -->
      <slot name="fb-like-frame" ></slot>
    </template>
</dom-module>

然后，在连接元素的页面上， 只要写

<my-app>
    <div slot="fb-like-frame" >
        <!--Insert your div here-->
    </div>
</my-app>

普朗克 我已经创建了一个plunk。我使用了你自己的代码。除了

• 使用插槽
• 虚拟应用程序id

查看index.html和landing-app.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" type="" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" type="" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="landing-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- Navigation using App Toolbar -->
    <app-toolbar>
      <div class="toolbar-container">
        <div main-title>***</div>
      </div>
    </app-toolbar>
    <section>
      <p>Super Charged Bot</p>
      <h2>Helps pages to sell items through Messenger.</h2>
      <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>
    </section>
  </template>

  <script>
    /**
    * @customElement
    * @polymer
    */
    class LandingApp extends Polymer.Element {
      static get is() { return 'landing-app'; }
      static get properties() {
        return {
          route: {
            prefix: '',
            path: ''
          }
        };
      }
      ready() {

        window.fbAsyncInit = function() {
          FB.init({
            appId            : 'your-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.10'
          });
          FB.AppEvents.logPageView();
        };

        (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'));
      }
    }

    window.customElements.define(LandingApp.is, LandingApp);
  </script>
</dom-module>

从左侧的导航栏

• 您是否使用
  编码

• 您正在调用

  super.ready（）

  内部的

  ready（）

注意 （很高兴知道） 您复制到ready函数的facebook SDK加法器实际上创建了一个脚本标记，src指向

connect.fb.com

，作为文档上的第一个脚本标记。 您没有将其范围限定到您正在编写的组件

• 您在哪里添加的
  ？ 在阴影中如果是这样，javascript对div没有访问权限

尝试在元素的阴影DOM中创建一个

大概是这样的：

<dom-module id="my-app">
    <template>
       <!-- your element's shadow DOM -->
      <slot name="fb-like-frame" ></slot>
    </template>
</dom-module>

然后，在连接元素的页面上， 只要写

<my-app>
    <div slot="fb-like-frame" >
        <!--Insert your div here-->
    </div>
</my-app>

普朗克 我已经创建了一个plunk。我使用了你自己的代码。除了

• 使用插槽
• 虚拟应用程序id

查看index.html和landing-app.html

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" type="" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" type="" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">

<dom-module id="landing-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <!-- Navigation using App Toolbar -->
    <app-toolbar>
      <div class="toolbar-container">
        <div main-title>***</div>
      </div>
    </app-toolbar>
    <section>
      <p>Super Charged Bot</p>
      <h2>Helps pages to sell items through Messenger.</h2>
      <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false"></div>
    </section>
  </template>

  <script>
    /**
    * @customElement
    * @polymer
    */
    class LandingApp extends Polymer.Element {
      static get is() { return 'landing-app'; }
      static get properties() {
        return {
          route: {
            prefix: '',
            path: ''
          }
        };
      }
      ready() {

        window.fbAsyncInit = function() {
          FB.init({
            appId            : 'your-app-id',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v2.10'
          });
          FB.AppEvents.logPageView();
        };

        (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'));
      }
    }

    window.customElements.define(LandingApp.is, LandingApp);
  </script>
</dom-module>

从左侧的导航栏

• 您是否使用
  编码

• 您正在调用

  super.ready（）

  内部的

  ready（）

---

什么是“没有运气”？您是否添加了应用程序id？JSSDK是否已加载？请更具体一点。我已经添加了应用程序id，还尝试了@schrodingers cat建议的插槽，但facebook登录按钮仍然没有出现。我认为这是一件非常简单的事情……再说一遍，JSSDK是否已加载？你在网络标签上查过了吗？什么叫“不走运”？您是否添加了应用程序id？JSSDK是否已加载？请更具体一点。我已经添加了应用程序id，还尝试了@schrodingers cat建议的插槽，但facebook登录按钮仍然没有出现。我认为这是一件非常简单的事情……再说一遍，JSSDK是否已加载？您是否在网络选项卡中查看了它？您能否清楚地告诉我

插槽将如何解决此问题，请在此输入新的编码器。另外，我已经更新了我的问题。请不要插入
**另外，**将fb SDK脚本移到ready函数之外，因为它实际上不会将其范围扩展到您的组件。在您的组件使用之前，请确保它已加载SDK无法访问您的
，因为它位于登录应用程序的影子dom中。将其移出一个插槽以便访问-我应该将SDK移动到哪里？在任何地方在你使用登陆应用程序之前，请确保它已加载-我应该在哪里写入插槽？在DOM for landing应用程序中-我应该在哪里添加facebook div？在页面上，您可以调用您的
（上面的语法）您可以看到我添加的plunker吗？您是否也编写了相同的代码？您能否稍微清楚地告诉我
插槽将如何解决此问题，请在此输入新的编码器。另外，我已经更新了我的问题。请不要插入
**另外，**将fb SDK脚本移到ready函数之外，因为它实际上不会将其范围扩展到您的组件。在您的组件使用之前，请确保它已加载SDK无法访问您的
，因为它位于登录应用程序的影子dom中。将其移出一个插槽以便访问-我应该将SDK移动到哪里？在任何地方确保它已加载，