Created
April 27, 2012 17:31
-
-
Save stanosmith/2511057 to your computer and use it in GitHub Desktop.
HTML: Resize Facebook iframe FB.Canvas.setSize
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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