Multiple dynamic Facebook like buttons on one page

Wojtek — Thu, 30 Jun 2011 13:11:04 GMT

Putting one like button on a page is very simple and comes down to pasting the code from Facebook like button generator found here.
It gets a bit more complicated when we need to add more than one button on a page along with a dynamically generated content. Best example I can think of is a search results page where every search result has it’s own like button.

Prepare

Put this somewhere in your page. Official Facebook documentation changes it’s recommendation from time to time, so let’s say just put it right after opening tag.

Paste your Like buttons code

Initialize Like buttons

In your JavaScript code after inserting all the fb:like tags you need to initialize all those buttons. You can do that by running below code

window.fbAsyncInit = function() {
  FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
};
(function() {
  var e = document.createElement('script');
  e.async = true;
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());

Remember to change "your_app_id" to your actual app id.

Hot off the workshop vol. 1

Wojtek — Wed, 23 Feb 2011 11:51:53 GMT

Just launched. TK Maxx and Red Nose Day campaign applications.

Facebook quiz

Fun quiz to find out your perfect Red Nose Day t-shirt.
View site

Website application

Upload you photo with Flash uploader, resize it and pan it around with JavaScript then save your results with PHP.
View site

Sharing in 2010 belonged to Facebook

Wojtek — Sun, 30 Jan 2011 17:44:00 GMT

Very nice infographic by http://jeffwongdesign.blogspot.com/

Facebook - All your code are belong to us