העברת לשונית Static FBML לאפליקצית iFRAME

פייסבוק הודיעה על ביטול התמיכה של פייסבוק ב-Static FBML, החל מה-11.3.2011, לא יתאפשר עוד להוסיף לשוניות באמצעות Static FBML app. פייסבוק ממליצה לכל המפתחים ומנהלי העמודים בפייסבוק להעביר את כל ה-Static FBML לאפליקציות מבוססות iframe.

מדריך זה מלמד כיצד להמיר Static FBML אל אפליקציה מבוססת iframe.

המצרכים:
1. שרת אינטרנט שאפשר לגשת אליו באמצעות FTP.
2. תוכנת notepad++ (לינק להורדה)
3. תוכנת FileZilla (לינק להורדה)
4. סבלנות.

חלק ראשון: שאיבת התוכן מה-Static FBML שלנו.

נכנס לדף שלנו ונלחץ על Apps:

שלב 1 - כניסה לפאנל הניהול של העמוד

שלב 1 - כניסה לפאנל הניהול של העמוד

יופיעו כל האפליקציות שלנו כולל ה-Static FBML tags שבנינו לעמוד. נבחר את זו שאנו רוצים להחליף – דוגמא: לשונית ברוכים הבאים שהיתה מבוססת על Static FBML App. נלחץ על Go To App:

שלב 2 - בחירה ב-go to app

שלב 2 - בחירה ב-go to app

יופיע בפנינו כל קוד ה-FBML שיש בלשונית, אנו נעתיק אותו באמצעות Ctrl+C:

שלב 3 - העתקת תוכן הלשונית

שלב 3 - העתקת תוכן הלשונית

נפתח את תוכנת notepad++:

שלב 4 - פתיחת תוכנה notepad++

שלב 4 - פתיחת תוכנה notepad++

נשנה את ה-encoding ל-utf-8:

שלב 5 - שינוי encoding

שלב 5 - שינוי encoding

נדביק את הטקסט שהעתקנו מלשונית ה-Static FBML ונשמור בשם כלשהו בתיקיה כלשהי:

שלב 6 - שמירת הקובץ

שלב 6 - שמירת הקובץ

אני בחרתי לשמור תחת השם welcome.html.

חלק שני: העלאת ה-HTML לשרת.

נפתח את תוכנת FileZilla:

שלב 7 - פתיחת פיילזילה

שלב 7 - פתיחת פיילזילה

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

שלב 8 - התחברות לשרת

שלב 8 - התחברות לשרת

הפרטים הכוללים את שם השרת, שם המשתמש והסיסמה אמורים להנתן לכם על ידי מי שהשכרתם ממנו את השרת (ספק ההוסטינג).

לאחר חיבור מוצלח, אנו נראה בצד ימין את התיקיות של השרת ובצד שמאל את התיקיות של המחשב שלנו:

שלב 9 - התחברות לשרת

שלב 9 - התחברות לשרת

נגיע אל התיקיה שאליה אנו רוצים להעלות את הקובץ שיצרנו, נלחץ על הקובץ שיצרנו ואז על upload:

שלב 10 - העלאת הקובץ לשרת

שלב 10 - העלאת הקובץ לשרת

עכשיו לבדיקה – אנו ננסה להכנס אל הקובץ שלנו באמצעות האינטרנט – נכניס את הכתובת של השרת, התיקיה והעמוד לדפדפן ונראה אם אנו רואים את העמוד:

שלב 11 - וידוא שהקובץ עלה לשרת

שלב 11 - וידוא שהקובץ עלה לשרת

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

חלק שלישי: יצירת האפליקציה בפייסבוק

נכנס לאפליקצית המפתחים של פייסבוק באמצעות הקלדת developer app במסך החיפוש:

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

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

אם אתם לא רשומים לאפליקצית המפתחים, תצטרכו להרשם.

לאחר הכניסה לאפליקציה, נלחץ על כפתור Set Up New App:

שלב 13 - יצירת אפליקציה חדשה

שלב 13 - יצירת אפליקציה חדשה

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

שלב 14 - אישור התנאים

שלב 14 - אישור התנאים

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

שלב 15 - הזנת פרטים

שלב 15 - הזנת פרטים

זה השלב המסובך ביותר, עלינו למלא כמה פרטים: ראשית את פרטי התיקיה שבה הצבנו את קובץ ה-HTML שלנו. כאשר הפרטים מופיעים כ-URL מלא. שנית את שם קובץ ה-HTML שיצרנו ושלישית את שם הלשונית. שימו לב היטב לדוגמא:

שלב 16 - הזנת פרטים

שלב 16 - הזנת פרטים

אחרי כן נשמור את השינויים. אחרי השמירה אנו מגיעים לדף האפליקציה, אנו נלחץ על Application Profile page:

שלב 17 - כניסה לדף האפליקציה

שלב 17 - כניסה לדף האפליקציה

חלק רביעי: הוספת האפליקציה לדף

אחרי שהגענו לדף האפליקציה, אנו נבחר ב-Add To My Page:

שלב 18 - הוסף את האפליקציה לעמוד שלי

שלב 18 - הוסף את האפליקציה לעמוד שלי

כעת עלינו לבחור את העמוד, במקרה שלי אני בוחר את אינטרנט ישראל.

שלב 19 - בחירת העמוד

שלב 19 - בחירת העמוד

זהו! הלשונית מופיעה בדף! זה הזמן לבדוק שהכל תקין. במידה ויש תקלה כלשהי – סביר מאד שלא הזנתם את מיקום התיקיה ושם הקובץ (שלב 16).

ניתן לסדר את מיקומי הלשוניות השונות באמצעות Edit:

שלב 20 - שינוי מיקומי הלשוניות

שלב 20 - שינוי מיקומי הלשוניות

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

פורסם בקטגוריה: אפליקצית פייסבוק

אל תשארו מאחור! יש עוד מה ללמוד!