JoeSz/responsive_page_like.html

## responsive_page_like.html
<!DOCTYPE HTML>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div id="fb-container" style="width:100%;">
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-height="160" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
</div>

<script>
/*
 * REMEMBER TO CHANGE TO YOUR APP ID AND CHANGE data-href TO SUIT YOU
 *
 * This is page-plugin plugin and NOT the like-box-plugin from Facebook.
 * This code from https://developers.facebook.com/docs/plugins/page-plugin
 * To prevent init error, I changed sdk.js to all.js.
 */


(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/all.js#xfbml=1&version=v2.7&appId=ADD YOUR APP ID HERE";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

/*
 * Make Facebook Page-Plugin responsive
 */
var loop;
$( window ).bind( "resize", function() {

    // run only once, after the resizing finished
    clearInterval( loop );
    loop = setTimeout(function() {

        var container = $( '#fb-container' );
        var containerWidth = container.width();
        var fbPage = container.find( '.fb-page' );

        // `fb_iframe_widget` class is added after first FB.FXBML.parse()
        // `fb_iframe_widget_fluid is added in same situation, but only for mobile devices (tablets, phones)
        // By removing those classes FB.XFBML.parse() will reset the plugin widths.
        fbPage.removeClass('fb_iframe_widget fb_iframe_widget_fluid');

        // update width and re-render
        fbPage.data("width", containerWidth);
        FB.XFBML.parse();

    }, 100 );

});
</script>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
	</head>
	<body>

	<div id="fb-container" style="width:100%;">
	<div class="fb-page" data-href="https://www.facebook.com/facebook" data-height="160" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
	</div>

	<script>
	/*
	* REMEMBER TO CHANGE TO YOUR APP ID AND CHANGE data-href TO SUIT YOU
	*
	* This is page-plugin plugin and NOT the like-box-plugin from Facebook.
	* This code from https://developers.facebook.com/docs/plugins/page-plugin
	* To prevent init error, I changed sdk.js to all.js.
	*/


	(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/all.js#xfbml=1&version=v2.7&appId=ADD YOUR APP ID HERE";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	/*
	* Make Facebook Page-Plugin responsive
	*/
	var loop;
	$( window ).bind( "resize", function() {

	// run only once, after the resizing finished
	clearInterval( loop );
	loop = setTimeout(function() {

	var container = $( '#fb-container' );
	var containerWidth = container.width();
	var fbPage = container.find( '.fb-page' );

	// `fb_iframe_widget` class is added after first FB.FXBML.parse()
	// `fb_iframe_widget_fluid is added in same situation, but only for mobile devices (tablets, phones)
	// By removing those classes FB.XFBML.parse() will reset the plugin widths.
	fbPage.removeClass('fb_iframe_widget fb_iframe_widget_fluid');

	// update width and re-render
	fbPage.data("width", containerWidth);
	FB.XFBML.parse();

	}, 100 );

	});
	</script>

	</body>
	</html>