I have code like this.
$(document).ready(function() { var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); $('#main').children().height(highestCol); }); But this doesn't work when I have Like box in some column. It seems this called before Facebook like box called.
How to fix this problem?
Basically I need to call this process after facebook loads Like box and Recommendations blocks (both).
To execute code after the facebook plugin has rendered, you can subscribe to xfbml.render. Here is my working code:
window.fbAsyncInit = function () { FB.init({ status: true, cookie: true, xfbml: true }); FB.Event.subscribe("xfbml.render", function () { fbexecute(); }); }; (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); } ()); var fbexecute = function () { //-- re-calculate heights here } 
I think you can just put the like-button in a fix-height container.
For example:
<div style="height: 62px;"> <fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="false" stream="false" header="false"></fb:like-box> </div> Then you won't worried about exactly how height it will be.
Another possible solution. I suppose that you using the method of load facebook javascrpt sdk asynchronously. Then you can execute your code after FB.init()
<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true}); if (jQuery.isFunction(window.fbexecute)) { window.fbexecute(); } }; (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); }()); </script> var fbexecute = function() { var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); $('#main').children().height(highestCol); } As per the FB.Event.subscribe, there is a loading event which will be triggered automatically when the page will finish rendering plugins
Step-1: In the HTML (put it where you want the social box to be shown):
<div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div> Step-2: In the footer (just before ending the <body> tag):
<div id="fb-root"></div> <script> window.fbAsyncInit = function(){ //FB.init({ status: false, cookie: true, xfbml: true }); FB.Event.subscribe("xfbml.render", function(){ columnHeightFixer(); }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); function columnHeightFixer(){ //...Height Fixing Code... } </script> 
$(document).ready(function() { var highestCol = Math.max($('#main').children().height(),$('#main').children().height()); $('#main').children().height(highestCol); }); 
Math.maxand setting the same thing to itself, in essence it feels likeheight = max(height, height), which on itself, makes no sense to me... am I missing something here?