Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
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">
<!-- You need to include jquery & FBSDK-->
<div id="fb-root"></div>
window.fbAsyncInit = function() {
// The following line is needed to workaround a Facebook bug. See
FB._https = window.location.protocol == "https:";
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'); = id; js.async = true;
js.src = '//{% ifequal LANGUAGE_CODE|slice:"2" "fr" %}fr_CA{% else %}en_US{% endifequal %}/all.js';
// Resize the iFrame after the whole window is loaded
window.onload = function() {
var window_height = $('body').outerHeight();
FB.Canvas.setSize({ height: window_height });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment