Skip to content

Instantly share code, notes, and snippets.

@stanosmith
Created April 27, 2012 17:31
Show Gist options
  • Save stanosmith/2511057 to your computer and use it in GitHub Desktop.
Save stanosmith/2511057 to your computer and use it in GitHub Desktop.
HTML: Resize Facebook iframe FB.Canvas.setSize
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
/* Hide the FB Root div */
#fb-root {
display: none;
}
body {
overflow: hidden;
width: 810px;
height: 1440px;/* Use whatever height you like */
margin: 0;
padding: 0;
border: 0;
}
</style>
</head>
<body class="home">
<!--Have to include this here-->
<div id="fb-root"></div>
<!--The rest of your page content goes here-->
<header>
<h1>Header</h1>
</header>
<div role="main">
<p>Body</p>
</div>
<footer>
<h6>Footer</h6>
</footer>
<!--Load the Facebook SDK and set init options-->
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId:'YOUR_APP_ID', // App ID
channelUrl:'//YOUR_URL/channel.html', // Channel File
status:true, // check login status
cookie:true, // enable cookies to allow the server to access the session
xfbml:true // parse XFBML
});
// Additional initialization code here
FB.Canvas.setSize();
FB.Canvas.setAutoResize();
FB.Canvas.scrollTo(0,0);
};
// In case something calls sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!--END JavaScript SDK-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment