如何在Polymer Project中加载Facebook Javascript sdk? [英] How to load Facebook Javascript sdk in Polymer Project?

问题描述

我知道那里有一个名为facebook-login的Web组件，我不想因为简单的事情而安装...

I know there is a web component out there called facebook-login and I don't want to install for the simple matter...

我尝试在Web组件中添加Facebook Javascript SDK.在就绪呼叫中，我添加了基本的javascript sdk.

I tried adding Facebook Javascript SDK in web component. In the ready call I added basic 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但没有运气.

And then in my I tried adding this div but no luck.

<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>'

请为我指明正确的方向.

Please point me to the right direction.

已更新:landing-app.html

Updated: 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>

推荐答案

注释

(一个很好的认识) 您已经复制到ready函数的facebook SDK加法器实际上创建了一个脚本标签，其中src指向connect.fb.com作为文档上的第一个脚本标签. 您不会将其范围限制在要编写的组件上.

note

( Just a good to know) The facebook SDK adder that you have copied over to the ready function, essentially creates a script tag with the src pointing to connect.fb.com as the very first script tag on the document. you are not scoping it to the component your are writing.

• 在何处添加了<div>?

在影子DOM内? -如果是这样，则javascript可以否访问您的div

Inside the shadow DOM? - If so, the javascript has NO access to your div

尝试在元素的阴影DOM中创建<slot>

Try creating a <slot> inside your element's shadow DOM

类似的东西:

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

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

then, on the page where you are connecting your element, just write

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

柱塞

我创建了一个小插件.我使用了自己的代码.除了，

Plunker

I have created a plunk .I have used your own code. Except,

• 使用插槽.
• 虚拟应用程序ID

同时查看index.html和landing-app.html

Look at both index.html and landing-app.html

在左侧的导航栏中.

• 您使用<slots>进行编码了吗?

您是在ready()内部呼叫super.ready()吗?

查看显示按钮的组件

这篇关于如何在Polymer Project中加载Facebook Javascript sdk?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！