javascript - 如何使用 Javascript 插入 Facebook 登录按钮？

Question

我想使用 Javascript 将 Facebook 登录按钮添加到我的 HTML 页面:

var button = document.createElement("fb:login-button");
button.size = "xlarge";
parent.appendChild(button);

出现该按钮，并显示非 Facebook 特定的属性，例如 id和lang即可添加成功。但是，添加 size 属性没有任何效果。

此外，如果我尝试使用 button.createAttribute() 添加任何属性，我明白

Uncaught TypeError: Object #<HTMLUnknownElement> has no method 'createAttribute'

为什么 Facebook 的登录按钮不被识别为有效的 HTML 元素，即使它出现在页面上？使用 Javascript 插入 Facebook 登录按钮并更改其大小的正确方法是什么？

Answer 1

您需要 Facebook JavaScript SDK动态呈现这些社交插件。一旦您初始化了 SDK，您就可以随心所欲地操作您的页面，然后您所要做的就是调用 FB.XFBML.parse() 函数，并且标签将正确显示。

您甚至可以在特定元素上调用该函数以进行更多控制:

FB.XFBML.parse( document.getElementById( 'some-element' ) );
// or with jQuery
FB.XFBML.parse( $( "#some-element" )[0] )

您还应该尝试将标记作为字符串手动附加:

element.innerHTML += '<fb:login-button id="some-element" size="xlarge"/>'; 
FB.XFBML.parse( document.getElementById( 'some-element' ) );

<小时/>

以下是 relevant documentation 的概述:

This function parses and renders XFBML markup in a document on the fly. This could be used if you send XFBML from your server via ajax and want to render it client side. XFBML enables you to incorporate FBML into your websites and IFrame applications.

You can parse the following XFBML tags with this method:

• fb:activity
• fb:comments
• fb:friendpile
• fb:like
• fb:like-box
• fb:login-button <-------------- ^WOOHOO!
• fb:name
• fb:profile-pic
• fb:recommendations