Как загрузить Facebook Javascript SDK в Polymer Project?

1

Я знаю, что есть веб-компонент, который называется facebook-login и я не хочу устанавливать его для простого вопроса...

Я попытался добавить SDK для Javascript в веб-компоненте. В готовом обращении я добавил базовый 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>
  • 0
    что значит "не повезло"? Вы добавили свой идентификатор приложения? JS SDK загружается? пожалуйста, будьте более конкретны.
  • 0
    Я добавил app-id, а также попробовал слот, предложенный @schrodingers-cat schrodingers-cat, но кнопка входа в Facebook не пришла. Я думал, что это очень простой вопрос ...
Показать ещё 1 комментарий
Теги:
web-component
polymer
facebook

1 ответ

0
Лучший ответ

нота

(Просто полезно знать) Сумматор SDK facebook, который вы скопировали на готовую функцию, по существу создает тег сценария с src, указывающим на connect.fb.com как самый первый тег сценария в документе. вы не просматриваете его компонент, который вы пишете.

  • где вы добавили, что <div>?

    Внутри тени DOM? - Если это так, у javascript нет доступа к вашему div

Попробуйте создать <slot> внутри вашего тэга элемента DOM

Что-то вроде этого:

<dom-module id="my-app">
    <template>
       <!-- your element 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>

Plunker

Я создал плунжер. Я использовал свой собственный код. Кроме,

  • используя слоты.
  • Идентификатор фиктивного приложения

Посмотрите на index.html и landing-app.html

с панели навигации слева.

  • Вы кодировали с помощью <slots>?

  • Вы вызываете super.ready() внутри ready()?

Просмотр компонента, отображающего кнопку

Поделиться
  • 0
    Можете ли вы рассказать немного ясно о том, как slot решит эту проблему, пожалуйста, новый кодер здесь. Также я обновил свой вопрос.
  • 0
    Не вставляйте <div class="fb-login..... > в свой теневой домен в разделе <section> вместо этого создайте слот внутри <section> следующим образом: <section> ...... <slot name="fb-login-frame"></slot></section> Затем, на странице, где вы добавляете <landing-app> , выполните <landing-app> <div slot="fb-login-frame" class="fb-login... ></landing-app> ** Кроме того, ** переместите сценарий fb SDK за пределы функции готовности. Он действительно не распространяется на ваш компонент. убедитесь, что он загружен, прежде чем ваш компонент будет использован
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню