איך ליצור דף לעסקים בפייסבוק עם iFrame !

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

ולכן, ברוח השיתופיות החלטנו לכתוב מדריך אשר ילמד איך להגדיר וליצור אפליקציה אשר תמשוך את המידע שקיים בiFrame שיצרתם ותציג אותו בדף לעסקים שלכם בפייסבוק… משם, השמיים הם הגבול

מה זה אייפריים (iFrame)?

אייפריים היא מסגרת אשר מחזירה מידע של קובץ אחר בעזרת פקודת src. לדוגמה אם נכין קובץ שנקרא sagive.html ובו פקודה הקוראת לתמונה ולאחר מכן נכליל את האייפריים אל תוך דף מסוים נקבל את הקוד שכתוב בקובץ sagive.html כלומר נראה את התמונה.

דוגמה לקוד של iFrame פשוט:

<iframe src="hello.html" frameborder="0">
אם אתה מצליח לקרוא את זה סימן שהדפדפן שלך
לא תומך בהצגה של אייפרמים והוא כנראה ישן
מאוד (מומלץ לשדרג)
</iframe>

למה זה טוב ליהודים?

החדשות הטובות הן שבגלל שהקובץ לו קורא האיפריים לא מאוחסן בפייסבוק הוא יכול מעתה להיות קובץ html סטנדרטי בשילוב CSS ואפילו קובץ פלאש!! מעתה לא צריך ללמוד FBML והSDK של פייסבוק לא נדרש מעתה והלאה (וזה לא היה פשוט ללמוד אותו!)

דף לעסק בפייסבוק – מתחילים עם התכ'לס!

ראשית, צריך להתחיל עם יצירה של תיקייה על השרת בו אתם רוצים לארח את הקבצים שבסופו של דבר יוצגו כiFrame. אני ממליץ לפתוח תיקייה בשורש של האחסון בעזרת תוכנת FTP שנקראת facebookpage או שם דומה שמסביר מה יש בתיקייה.

בתוך התיקייה הזאת יש ליצור בראש ובראשונה קובץ html לו תקראו בעזרת פקודת הiFrame ישירות אל דף הפייסבוק שלכם או ליתר דיוק אל הלשונית הספציפית. הנה מבנה של דף HTML בסיסי ביותר.

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<style type="text/css">
	body {
	width:800px;
	margin:0; padding:0; border:0;
	}
	</style>
	<meta http-equiv="Content-Type" content="text/html;charset=windows-1255">
	</head>
	<body>
	<div id="container">
	<p>התוכן שלכם</p>
	</div>
	</body>
	</html>
  • שימו לב שהגדרנו את הרוחב לPX800 – זהו בקירוב הרוחב של הדף שלכם בפייסבוק
  • בדוגמה למעלה קראתי לקובץ CSS וגם הגדרתי אותו.. אין צורך בהגדרה כזאת והיא לצרכיי הדגמה

הדף שלכם בפייסבוק יכול לקרוא לקובץ CSS חיצוני כיוון שהוא יושב אצלכם בשרת ולא אצל פייסבוק כמו בעבר ולכן ההגדרה הכפולה של הCSS היא רק כדי להראות את שתי האפשרויות… האחת היא להכליל ישירות בתוך הדף הגדרות עיצוב (CSS) והשנייה היא להכליל את ההגדרות עיצוב הללו בקובץ CSS חיצוני אשר ישב באותה תיקייה יחד עם הדף פייסבוק או ליתר דיוק עם הקובץ אשר יוצג בתור הדף פייסבוק שלכם.

מתקינים את האפליקציה למפתחים של פייסבוק

הצעד הראשון

הוא להתקין את האפליקציה למפתחים של פייסבוק בחשבון שלכם כך שתוכלו להגדיר iFrame כלשונית בחשבון הפייסבוק שלכם. בכדי לעשות זאת בקרו בקישור הבא: http://facebook.com/developers ואל תחששו לאשר את הגישה של האפליקציה לפרטים שלכם.. זאת אפליקציה פנימית של פייסבוק שממילא יכולים לגשת לפרטים שלכם.
ליצור אפליקציה חדשה

הצעד השני

הוא להגדיר את האפליקציה החדשה שלכם… לחצו על Set Up New App+, בחרו שם לאפליקציה שלכם ולחצו על "אני מסכים" ("אני לא מסכים" מסומן כברירת מחדל ויש לשנות אותו). כעת יכול להיות שתתבקשו למלא קאפטצ'ה.. זה הזמן להודות לסאפמרים על זה שאתם צריכים לקרוא אותיות הזויות וגם לכתוב אותם בכל מקום ברשת… דורות הבאים של ילדים וודאי יפתחו איזה חלק במוח רק בשביל מטרה זאת!
מידע כללי - אפליקציה פייסבוק

הצעד השלישי

הוא להוסיף מספר הגדרות אל האפליקציה שלכם… ישנם המון הגדרות אשר אתם יכולים להגדיר לאפליקציה בפייסבוק, כל אחד בהתאם לידע שלו אך במדריך זה נעבור רק על ההגדרות החשובות כדי שזה יעבוד.
  • מלאו את השם של האפליקציה שלכם
  • תנו לאפליקציה שלכם תיאור קצר
  • בחרו את השפה העברית
לשונית אודות - מידע נוסף אפליקציה פייסבוק

עברו ללשונית: Facebook Integration

כעת יש למלא בקפידה את הפרטים הנכונים.. שימו לב לתיאור בתוך כל שדה טקסט ומלאו בהתאם לדף שלכם.

Canvas URL : התיקייה בה יושב הקובץ של הפריים – כדאי לקרוא לו index.html Secure Canvas URL: לא חובה אלא אם יש לכם אתר מאובטח הכניסו גם כאן את הכתובת עם https:// שם לשונית: פשוט ולעניין, שם הלשונית שתרצו לשים.. לדוגמה "שגיב SEO" כתובת URL: הכתובת של הקובץ עצמו שבו המידע אשר יוצג באיפריים

מילוי פרטים בלשונית facebook-integration

מוסיפים את האפליקציה לדף שלכם בפייסבוק

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

כעת, לחצו על "הוסף לעמוד שלי" בתפריט הניווט הצדדי של פייסבוק

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

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

הוסף לעמוד שלי

אני מקבל שגיאה 404 – הצילו!!

לאחר התקנה ורענון של הדף, ינסה פייסבוק לטעון את דף הפייסבוק שלכם. אם קיבלתם שגיאה 404 או שגיאה 405… אל תבהלו, כל שעליכם לעשות הוא לתקן את הסיומת של הקובץ מ-html ל- .php או ל-.asp בהתאם לשרת עליו מאוחסן האתר שלכם. אל תשכחו לשנות את הכתובת של הדף שלכם בהגדרות של האפליקציה בהתאם לשם הקובץ.