יצירת לשוניות באמצעות אפליקצית iframe לדף פייסבוק

קל ליצור ולבנות דף פייסבוק מעוצב באמצעות אפליקצית iframe שקל ליצור עם ידע בסיסי

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

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

דף הפייסבוק המעוצב של אינטרנט ישראל
דף הפייסבוק המעוצב של אינטרנט ישראל

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

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

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

חלק ראשון: יצירת הדף המעוצב באמצעות HTML ו-CSS

ניתן להשתמש בכל עורך HTML טוב על מנת ליצור את הדף, אך חשוב להקפיד על כך שהקובץ יהיה בקידוד UTF-8, אם הקידוד לא יהיה בטכנולוגית UTF-8, יופיע בעמוד ג'יבריש. על מנת לוודא שאנו עובדים ב-UTF 8 אנחנו:
נפתח את תוכנת notepad++:

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

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

שלב 2 - שינוי encoding
שלב 2 - שינוי encoding

עכשיו אפשר להתחיל וליצור את ה-HTML. שימו לב תמיד להשתמש ב-CSS חיצוני (עניין של התאמה לאינטרנט אקספלורר) באופן הבא:


<link href=”http://example.com/style.css” rel=”stylesheet” type=”text/css” />

כמעט כל תגית HTML יכולה להופיע ולמעט הגבלות על ג'אווהסקריפט וקריאות AJAX.

לאחר שסיימנו לכתוב את ה-HTML וה-CSS, אנו נשמור את הקובץ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

נכניס את שם האפליקציה, שם המכונה שלה (זהה לשם האפליקציה רק בלי רווחים ו-capital letters) ואת העובדה שאנו מסכימים לכל תנאי.

שם האפליקציה
שם האפליקציה

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

בחירת אייקון ושם
בחירת אייקון ושם

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

מילוי הנתיב ושם הקובץ
מילוי הנתיב ושם הקובץ

אחרי כן נשמור את השינויים. זה הכל.

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

אנחנו חייבים לקחת את ה-ID של האפליקציה ואת ה-URL שלה ולהכניס אותם בתוך הכתובת:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

באופן הבא:

כך תמצאו את ה-URL להוספת הלשונית לעמוד
כך תמצאו את ה-URL להוספת הלשונית לעמוד

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

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

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

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

בנוסף, ניתן לקבוע שהלשונית תהיה הלשונית הדיפולטיבית שתוצג בפני הגולש החדש באמצעות:

בחירת לשונית דיפולטיבית
בחירת לשונית דיפולטיבית

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד