我知道有一个名为 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>'
请为我指明正确的方向。
更新: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
作为文档上的第一个脚本标签。
您没有将其范围限定为您正在编写的组件。
- 您在哪里添加的
<div>
?Inside the shadow DOM? - If so, the javascript has NO access to your div
尝试创建 <slot>
在元素的影子 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
从左侧的导航栏。
您是否使用
<slots>
进行编码? ?您正在调用
super.ready()
吗?里面ready()
?
关于javascript - 如何在 Polymer 项目中加载 Facebook Javascript sdk?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45403009/