טאבים בפייסבוק - הגדלת הגובה מעבר ל 800 פיקסלים

טאבים מייצרים פה, בדיוק כמו שמייצרים אפליקצייה או אתר קונקט,
את התוכן של הטאב אנחנו מאחסנים בשרת חיצוני נגיד קובץ my_tab.php, ואז מבקשים מפייסבוק למשוך משם את האינפורמציה ולחבר את האפליקצייה שנוצרה (מסוג טאב) לאחד מעמודי הפייסבוק שאנחנו מנהלים.

כל עוד התוכן בעמוד הטאב my_tab.php לא חורג מגובלות הגובה המומלץ 800 אז אין צורך בקוד נוסף,
כדי לאפשר חריגה בגובה למשל להצגת תמונה גבוהה מאוד או שילוב תוכן דינמי שאין לנו שליטה על הגובה שלו נוסיף קוד בכמה שלבים:

תחילה נבקש מהדפדפן לבטל את הופעת הסקרול באמצעות CSS ללא קשר לגובה התוכן,
מקמו את הקוד הבא בתוך חלק head של העמוד או בקובץ CSS חיצוני:

<style>
body{
	overflow:hidden;
}
</style>

עכשיו נוסיף לתגית body פקודה מיושנת מאוד שתעשה את אותו הדבר עבור דפדפני אקספלורר ישנים עד גירסה 6, בצורה הזו:

<body scroll="no">

עכשיו אנחנו במצב שאין לנו סקרול באף דפדפן, אבל ברגע שהתוכן חורג בגובה הוא יהיה מוסתר, לכן אנחנו רוצים לבקש מהעמוד להתעדכן באופן רציף בגובה התוכן ולעדכן את גודל העמוד בהתאם,
את זה אנחנו עושים באמצעות Facebook Javascript SDK , את הקוד הבא יש לשלב מיד לאחר פתיחת תגית ה body:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({
		appId : 'מקם כאן את האיידי של האפליקצייה',
		status : true,
		cookie : true,
		xfbml : true
	});
	FB.Canvas.setAutoResize();
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
	}());
</script>

בעצם הפקודה FB.Canvas.setAutoResize היא זו שעושה את כל העבודה, שאר הקוד נועד לייבוא ספריית Facebook Javascript SDK ולאיתחול שלה.
שימו לב שיש צורך לשלב את הID של האפליקצייה בשלב אתחול הספרייה, תעתיקו אותו מעמוד יצירת האפליקציות בפייסבוק שם הוא מופיע כ app_id/app_key.

* פייסבוק משתנים בקצב מטורף, הפוסט הזה נכון לתאריך: 18/10/2011

טכנולוגיות: 
javascript