Skip to content

Instantly share code, notes, and snippets.

@jshaw
Created July 26, 2012 18:28
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jshaw/3183653 to your computer and use it in GitHub Desktop.
Resize the Facebook iFrame Tab Page with resizing content and different page heights on page loads.
<!DOCTYPE html>
<html lang="en" style="overflow: hidden">
<body style="overflow:hidden">
<head>
<!-- You need to include jquery & FBSDK-->
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// The following line is needed to workaround a Facebook bug. See stackoverflow.com/questions/5212016/facebook-javascript-sdk-over-https-loading-non-secure-items)
FB._https = window.location.protocol == "https:";
FB.init({
appId : '{{ FACEBOOK_APP_ID }}',
channelUrl : "http{% if request.is_secure %}s{% endif %}://{{ request.get_host }}{% url photos-landing %}channel",
status : true,
cookie : true,
xfbml : true,
oauth : true
});
};
// Load the SDK Asynchronously
(function(d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = '//connect.facebook.net/{% ifequal LANGUAGE_CODE|slice:"2" "fr" %}fr_CA{% else %}en_US{% endifequal %}/all.js';
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
// Resize the iFrame after the whole window is loaded
window.onload = function() {
var window_height = $('body').outerHeight();
FB.Canvas.setSize({ height: window_height });
};
</script>
<!-- PAGE CONTENT -->
</body>
<html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment