Frame in Frame

Frame in Frame for Facebook

by FiNGAHOLiC

HTML

<!-- Facebook -->
<div class="social">
    <div id="fb-root"></div>
    <div class="fb-like"
	data-href="http://example.com/"
	data-layout="box_count"
	data-send="false"
	data-width="70"
	data-show-faces="false">
    </div>
    <div class="fb-like"
	data-href="http://example.com/"
	data-layout="button_count"
	data-send="false"
	data-width="120"
	data-show-faces="false">
    </div>
</div>
<div class="social">
    <fb:like href="http://example.com/" send="false" width="430" show_faces="false"></fb:like>
</div>

CSS

.social { font: 30px sans-serif; }

JavaScript

(function (url) {
    var iframe = document.createElement('iframe');
    (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";
    iframe.src = "javascript:false";
    document.getElementById('fb-root').appendChild(iframe);
    var doc = iframe.contentWindow.document;
    doc.open().write('<body onload="' +
        'window.inDapIF = true;' +
        'var js = document.createElement(\'script\');' +
        'js.src = \'' + url + '\';' +
        'document.body.appendChild(js);">');
    doc.close();
}('//connect.facebook.net/ja_JP/all.js'));

// async init once loading is done
window.fbAsyncInit = function () {
    FB.init({
        xfbml: true
    });
};