Facebook like and send button created and manipulated by JavaScript howto and test

Submit an URL:

Description:

Just have a look in the source code! ;-)

Ok, here a minimal how-to:

• At first, the Facebook JavaScript SDK is loaded asynchronously. See Facebook JavaScript SDK
• The Facebook like plugin is embedded with XFBML and the default url http://geschke.name.
• If you submit a new url and press the submit button, a JavaScript event is triggered. The url is taken from the input field.
• Then the surrounding div element ("fbbutton") will be created with the new url in the href attribute, just as in the html code before DOM manipulation.
• The new element replaces the old div in the DOM and
• after using the new nice deferred object features of jQuery 1.5 (this ensures that the API call to facebook is triggered after the insertion process is finished),
• the new element is parsed and rendered by FB.XFBML.parse() method. This last step creates the like plugin dynamically, so it's possible to build any Facebook social plugin at any time, e.g. in Ajax context.

Thanks to:

• Ovais Tariq - This blog post was a nice inspiration, but unfortunately didn'n work as expected.
• Facebook Developer Forum - Refresh like button with ajax - There is an answer in this thread by the "Facebook Platform Team" - they recommend to use the iframe version. ;-) But the new "send" feature does only work with XFBML. Hmm...