כיצד מבצעים Auto-Resize לאפייריימים בפייסבוק ומעיפים את הסקרולבארים?

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

אייפריים בפייסבוק

מה הבעיה? בפייסבוק יש מגבלות ברירת מחדל של גובה ורוחב (810 פיקסלים רוחב, 800 פיקסלים גובה), ומעבר לזה – בדפים עם גובה שמעל 800 פיקסלים גם יופיעו לנו סקרולבארים (פסי גלילה) מכוערים שיורידו משמעותית את כל חוויית הגלישה ואף יגרמו לעמוד להראות פחות רציני. עד לא מזמן היו פתרונות מאוד קלילים לדברים האלו, אבל בפייסבוק כמו בפייסבוק… כל הזמן הדברים משתנים וכמעט תמיד לא תטובת המפתחים.

אז במה שהפוסט הזה יעסוק זה בעצם הקוד החדש שגורם לסקרולבארים להעלם ולגרום לטאבים של האייפריים להתאים את עצמם באופן אוטומטי לגובה העמוד שלכם, גם אם מדובר באלפי פיקסלים של גובה.

אז נתחיל? יאללה…

1. מעלימים את הסקולבארים

הדבר הראשון זנעשה הוא לגרום לסקרול בארים הוא להעלם, את זה נעשה באופן מאוד פשוט ע"י הוספת תגית hidden באיזור ה BODY שלנו. נעשה זאת ע,י הקוד הבא:

<body style="overflow: hidden;">

2. מוסיפים שכבת פייסבוק

מיד לאחר ה BODY נוסיף את השכבה שמתקשרת עם הפייסבוק ולאחר מכן גם סקריפט שקורא לה. מיד אחרי תג ה BODY הוסיפו את הקוד הבא:

<div id="fb-root"></div>

3. התוכן שלכם

לאחר שהוספתם את השכבה, פשוט הוזינו את התוכן קוד של עמוד, שימו שם כל מה שתרצו וכמה שתרצו.

4. סגירה וקריאה לסקריפט

לאחר שהזנתם את התוכן, ממש לפני שאת סוגרים את תגית ה BODY, שלבו את הקוד הבא, ממש לפני ה </body> שלכם בדף:

<script>
window.fbAsyncInit = function() {
FB.init({appId: '000000000000', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize();
};
(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>

שימו לב למה שמסומן מכתום, כאן אתם צריכים להזין את מספר האפליקציה (ID) שלכם.

זהו, העלו את הקובץ לשרת ותהנו…. 😉

בקטנה על YBPmedia

י.ב.פ מדיה – בניית אתרים הוקמה ע"י יואב בן פורת. כבר למעלה מ-15 שנה שאני מלווה מאות בעלי עסקים, חברות ויזמים בצעדיהם הראשונים באינטרנט ובפעילות השוטפת. החל מהקמת אתרי תדמית וחנויות אלקטרוניות, פורטלי תוכן ואפליקציות וכן הפקות גרפיקה וקריאייטיב. אתם מוזמנים ליצור קשר ולעלות יחד על גלי האוקיינוס של האינטרנט 🙂

yoav@ybpmedia.com