Кнопка "напишите нам" на Facebook в полимерном веб-приложении - PullRequest
Новая
       6

Кнопка "напишите нам" на Facebook в полимерном веб-приложении

0 голосов
/ 03 июля 2018

Я хочу добавить кнопку «написать нам» в свое веб-приложение, созданное на Polymer 3. На сайте Facebook я нашел информацию о том, что мне нужно добавить скрипт SDK Facebook в html теле: 

<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, когда я добавляю этот код на страницу, ничего не происходит. Должен ли я создать специальный полимерный элемент или я делаю что-то не так? Любой совет будет полезен Спасибо

Ответы [ 2 ]

0 голосов
/ 22 июля 2018

После нескольких дней обучения я нашел решение. Как сказал Бинь Буи, проблема в Shadow DOM. Он изолирован от DOM и Facebook SDK не работает в веб-компоненте. Чтобы обойти это и добавить кнопку facebook к вашему веб-компоненту, нам нужно использовать «слоты», подробнее здесь . Но в моем примере у меня есть два уровня теневого домена, поэтому мне нужно сделать многоуровневый слот из файла 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>

В результате кнопка отображается на моей полимерной странице :) Мне очень помог этот пример и этот один .

0 голосов
/ 10 июля 2018

Это не относится к полимеру. В настоящее время у вас есть недействительный кусок 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?

...