如何在 Polymer Project 中加载 Facebook Javascript sdk?

Question

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

我尝试在Web组件中添加Facebook Javascript SDK。在就绪调用中，我添加了基本的 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>'

请指出我正确的方向。

更新：登陆应用程序.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>

Answer 1

注释

(很高兴知道(您复制到就绪函数的facebook SDK加法器本质上创建了一个脚本标签，其中src指向connect.fb.com作为文档上的第一个脚本标签。 您没有将其范围限定为您正在编写的组件。

• 你在哪里添加的<div>？

  在影子 DOM 里面？ - 如果是这样，javascript 无法访问你的div

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

像这样：

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

普伦克

我创建了一个扑通.我使用了你自己的代码。除了

• 使用插槽。
• 虚拟应用 ID

查看索引.html和登陆应用程序.html

从左侧的导航栏。

• 您是否使用<slots>编码？

• 你在ready()里面打电话super.ready()吗？

查看显示按钮的组件