How to insert Facebook login button using Javascript?

Question

I'd like to add a Facebook login button to my HTML page using Javascript:

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

The button appears, and non Facebook-specific attributes like id and lang can be added succesfully. However, adding the size attribute has no effect.

Also, if I try to add any attribute using button.createAttribute() , I get

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

Why is Facebook's login button not recognized as a valid HTML element, even though it appears on the page? What is the correct way to insert a Facebook login button using Javascript and change its size?

Answer 1

You'll need the Facebook JavaScript SDK to dynamically render these social plugins. Once you have the SDK initialized, you can manipulate your page all you want, then all you'll have to do is make a call to the FB.XFBML.parse() function, and the tags will be shown correctly.

You can even call the function on a specific element for more control:

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

You also should try to append the markup manually as a string:

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

---

Here's the overview from the 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