simshanith/fbLikeBoxSample.html

## fbLikeBoxSample.html
<!DOCTYPE html>
<html class="en">
<head>
  <meta charset="utf-8">
    <title>Example Facebook Page Like Box</title>
</head>
<body>
    <div id="fb-root"></div>
    <div id="main-wrapper" style="height: 100%;">
    </div><!-- end main wrapper -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
  // default values for rendering Like Box.
  // docs @ https://developers.facebook.com/docs/reference/plugins/like-box/
    var href = 'https://www.facebook.com/VML' // Facebook page to display
      iframeWidth = 400, // minimum supported width == 292px. required paramter.
      iframeHeight = undefined, // optional
      colorScheme = 'light', // light looks way better in my opinion
      showFaces = true, // not supported in all browser. renders facepile of everyone who has liked the page
      stream = true, // show the Facebook Page wall posts?
      borderColor = undefined, //optional; expects css color. does not accept rgba(); does accept rgb()
      header = true, // show "Find Us on Facebook" at the top of the iFrame
      forceWall = false; // only for Pages that are also Facebook Places. toggles between wall posts & checkins on stream

    // construct container for Like Box iFrame
    $('<div id="fbLikeBox" class="fb-like-box" style="height: 100%;">')
      .attr('data-href', href)
      .attr('data-width', iframeWidth)
      .attr('data-height', iframeHeight)
      .attr('data-colorscheme', colorScheme)
      .attr('data-show-faces', showFaces)
      .attr('data-stream', stream)
      .attr('data-border-color', borderColor)
      .attr('data-header', header)
      .attr('data-force-wall', forceWall)
      .appendTo('#main-wrapper');

    window.fbAsyncInit = function(){ // async init callback
            var $likeBox = $('#fbLikeBox'); // save a reference to the jQuery obj
            if($likeBox &&
         $likeBox[0] && // basic Reference Error avoidance
        !$likeBox.attr('fb-xfbml-state') && // see if it's currently being processed
        window.FB)
      { // confirm that the FB JS SDK has been loaded

                console.log('parsing XFBML');
                console.log(document.getElementById('fbLikeBox'));

                FB.XFBML.parse(document.getElementById('fbLikeBox'));
            }
        };

    </script>
    <script>
    var myAppID = 160939127744;  // facebook application id
    (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&appId="+myAppID;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html class="en">
	<head>
	<meta charset="utf-8">
	<title>Example Facebook Page Like Box</title>
	</head>
	<body>
	<div id="fb-root"></div>
	<div id="main-wrapper" style="height: 100%;">
	</div><!-- end main wrapper -->

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script>
	// default values for rendering Like Box.
	// docs @ https://developers.facebook.com/docs/reference/plugins/like-box/
	var href = 'https://www.facebook.com/VML' // Facebook page to display
	iframeWidth = 400, // minimum supported width == 292px. required paramter.
	iframeHeight = undefined, // optional
	colorScheme = 'light', // light looks way better in my opinion
	showFaces = true, // not supported in all browser. renders facepile of everyone who has liked the page
	stream = true, // show the Facebook Page wall posts?
	borderColor = undefined, //optional; expects css color. does not accept rgba(); does accept rgb()
	header = true, // show "Find Us on Facebook" at the top of the iFrame
	forceWall = false; // only for Pages that are also Facebook Places. toggles between wall posts & checkins on stream

	// construct container for Like Box iFrame
	$('<div id="fbLikeBox" class="fb-like-box" style="height: 100%;">')
	.attr('data-href', href)
	.attr('data-width', iframeWidth)
	.attr('data-height', iframeHeight)
	.attr('data-colorscheme', colorScheme)
	.attr('data-show-faces', showFaces)
	.attr('data-stream', stream)
	.attr('data-border-color', borderColor)
	.attr('data-header', header)
	.attr('data-force-wall', forceWall)
	.appendTo('#main-wrapper');

	window.fbAsyncInit = function(){ // async init callback
	var $likeBox = $('#fbLikeBox'); // save a reference to the jQuery obj
	if($likeBox &&
	$likeBox[0] && // basic Reference Error avoidance
	!$likeBox.attr('fb-xfbml-state') && // see if it's currently being processed
	window.FB)
	{ // confirm that the FB JS SDK has been loaded

	console.log('parsing XFBML');
	console.log(document.getElementById('fbLikeBox'));

	FB.XFBML.parse(document.getElementById('fbLikeBox'));
	}
	};

	</script>
	<script>
	var myAppID = 160939127744; // facebook application id
	(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&appId="+myAppID;
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>
	</body>
	</html>