/Facebook, JavaScript, like button

Multiple dynamic Facebook like buttons on one page

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 <body> tag.

<div id="fb-root"></div>

Paste your Like buttons code

<fb:like href="http://example.com" send="false" layout="button_count" show_faces="false"></fb:like>

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.