Facebook Like buttons are easy enough to integrate, but with enough caveats it can be difficult to maintain a best-practices

approach. A recent project required a slew of Like buttons on one page, each interacting with a different article in the app. All the buttons had to be pure JavaScript, and they had to work smartly with AJAX pagination. The method we chose was to loop through the anchor tags that led to a Likeable page, using their attributes to build up the Like buttons. Then we created the Facebook DOM elements and pushed them into the right spot. If a user had JavaScript disabled, she wouldn't be bothered by obsolete markup that does nothing, but with JavaScript enabled, she would see a highly dynamic index of Like buttons. <code> function setFacebookLike() { $ ('html').attr("xmlns:og","http://www.facebook.com/2008/fbml").attr("xmlns:fb","http://www.facebook. com/2008/fbml"); // Remove previously created FB like elements -- if they exist -- so they can be re-added after AJAX pagination $('.fb-recommend').remove(); $('#fb-root').empty(); // Build and inject Like button $('ul.posts a').each(function() { var fb_url = location.href.split('/'); fb_url = fb_url[0]+'//'+fb_url[2]; fb_url += $(this).attr('href'); var fb_like = '<div class="fb_recommend"><fb:like href="'+fb_url+'" layout="standard" show_faces="false" action="recommend" colorscheme="light"></fb:like></div>'; $(this).parent().next().after(fb_like); }); // Load in FB javascript SDK $('body').append('<div id="fb-root"></div>'); 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); }()); } setFacebookLike(); </code> First thing we do is wrap everything in a function called setFacebookLike(). This is important so that you can attach it to the callback of an AJAX pagination request, thus ensuring that your Like buttons survive any type of DOM tinkering. Inside the function, we first attach some Facebook attributes to the HTML node. Next, remove and/or

empty out the contents of the Facebook Like divs that have been left over, if there are any. Finally we're in a position to loop through the anchors. <code> $('ul.posts a').each(function() { var fb_url = location.href.split('/'); fb_url = fb_url[0]+'//'+fb_url[2]; fb_url += $(this).attr('href'); var fb_like = '<div class="fb_recommend"><fb:like href="'+fb_url+'" layout="standard" show_faces="false" action="recommend" colorscheme="light"></fb:like></div>'; $(this).parent().next().after(fb_like); }); </code> With this syntax, the this in the function is the anchor we're making a button for, so all its attributes are readily available to us. (I've broken up initializing the URL variable to ensure it works with staging servers, which often have different URL roots and databases, and in this case, different articles to like.) Once we store the like button markup into a variable like so... <code> var fb_like = '<div class="fb_recommend"><fb:like href="'+fb_url+'" layout="standard" show_faces="false" action="recommend" colorscheme="light"></fb:like></div>'; </code> ...we can shove into the DOM anywhere, using our $(this) anchor as a starting point: <code> $(this).parent().next().after(fb_like); </code> Finally, we pull in the Facebook JavaScript parser to turn our existing code into an iFrame: <code> // Load in FB javascript SDK $('body').append('<div id="fb-root"></div>'); window.fbAsyncInit = function() { FB.init({appId: '146516048706850', 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); }()); </code> Now, you just call the function setFacebookLike().