עבודה עם Facebook: כפתור Like - הוסטס

Hagaibl · 09-12-10, 23:20

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

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

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

במדריך זה אני ידגים רק את הדרך של הiframe ולא את הדרך של הXFMBL.

כפתור Like
אז קודם לכן בוא נראה את המבנה הבסיסי של כפתור ה Like בקוד.

PHP קוד:


			
<iframe src="http://www.facebook.com/plugins/like.php?href=<url>&amp;layout=<layout>&amp;show_faces=<show_faces>&amp;width=<width>&amp;action=<action>&amp;font=<font>&amp;colorscheme=<colorscheme>t&amp;height=<height>" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:<width>px; height:<height>px;" allowTransparency="true"></iframe>

כל טקסט המופיע בתוך <> זהו פרמטר שצריך לשנות אני אפרט עכשיו על הפרמטרים השונים:

<url> - הפרמטר האחראי על הדף שעליו יעשו את הLike\Recommend(נגדיר מה זה יהיה בהמשך), את המחרוזת url יש להעביר דרך פונקציה urlencode בכדי להמיר סימנים לתווי ANSI בכדי למנוע בעיות עתידיות.
<layout> - התצוגה של הכפתור יש 3 סוגים, standard, button_count וbox_count. (ראה\י נספח לתמונות). לכל אחד מן הlayout יש מראה שונה וגודל מינימלי שצריך לתת לו. הסבר קצר על כל אחד: standard - מציג את הטקסט צמוד לכפתור, עם שמות החברים שלחצו על הכפתור כבר כולל את תמונתיהם(אם הוגדר Show Faces), הסוג השני button_count - מציג את המספר הכולל של ה"לייקים" שנעשו על הכפתור הזה בתוך קופסה ליד הכפתור. box_count - מציג את המספר הכולל של ה"הלייקים" מעל הכפתור. עכשיו נעבור לגדלים המינימלים של כל סוג layout. נתחיל בstandart - רוחב מינימלי: 225 פיקסלים, רוחב בררת מחדל: 450 פיקסלים, גובה מינמלי: 35 פיקסלים במידה ולא אופשר show_faces במידה ואושר אז גובה מינמלי של 80 פיקסלים. button_count - רוחב מינימלי 90 פיקסלים, רוחב בררת מחדל: 90 פיקסלים, גובה 20 פיקסלים. box_count - רוחב מינימלי: 55 פיקסלים, רוחב בררת מחדל: 55 פיקסלים, גובה: 65 פיקסלים.
<show_faces> - האם יראה את התמונות בעת מעבר על השם של האנשים שעשו Like(תקף רק בכפתר שהוגדר לו layout - standard), ערכים true או false בלבד!
<width> - רוחב הכפתור בפיקסלים(מופיע פעמים)
<action> - הטקסט שיהיה רשום בכפתור, יותר נכון הסוג, recommend או like. ניתן להגדיר רק like או recommend.
<font> - פונט הטקסט, יש מספר ערכים שניתן להגדיר: ariel, seoge ui, tahoma, verdana, trebuchet ms.
<colorscheme> - סגנון הצבע dark או light.
<height> - גובה בפיקסלים(מופיע פעמים)

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

X like's(or recommended) Y on Z

פירוט:
X - שם האדם.
Like's \ Recommended בהתאם למה שקבענו בכפתור(action).
Y כותרת הדף(הכותרת של הurl שהגדרנו בפרמטר url, הוא "נכנס" לurl שספיקנו ולוקח את הכותרת).
Z שם האתר(דומיין).

עכשיו אתם בטח אומרים: "אבל למה? אני רואה אנשים שעושים דברים כפי שהם רוצים בקלות, הם שולטים בתוכן ורושמים את שם האתר במקום הדומיין, איך אני עושה את זה גם?"

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

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

איך משתמשים ב OpenGraph?
על ידי הכנסה של מספר תגים מסוג <meta> בתוך קוד האתר, תגים אלו צריכים להימצא בתוך הhead של הדף.

מהו מבנה הmeta?

PHP קוד:


			
<meta property="varname" content="value" />

באילו varname אנחנו נשתמש?
og:title
og:image
og:url
og:site_name

אילו הvarname שמענינים אותנו כעיקרון,
הערך של og:title - זהו כותרת הדף, הY שלנו בפרסום בפרופיל המשתמש.
הערך של og:image - תמונה אשר תופיע, גודל מינימלי של 50 על 50(בפיקסלים), הכנס קישור מלא לתמונה ולא מיקום שלה בשרת. כלומר לא

PHP קוד:


			
/imagefolder/image.type

אלא

PHP קוד:


			
http://domain/imagefolder/image.type

.
הערך של og:url - הקישר לאתר שלנו, בעת לחיצה על Y או Z בפרסום זה יוביל לקישור הנ"ל.
הערך של og:site_name - שם האתר, הZ שלנו.

בסופו של דבר אמור להיות לנו ככה:

PHP קוד:


			
<meta property="og:title" content="Page Title(Y parameter)" /> 
<meta property="og:site_name" content="Site Name(Z parameter)" /> 
<meta property="og:url" content="http://domain" /> 
<meta property="og:image" content="http://domain/imagefolder/image.type" />

בכדי לבדוק אם הגדרת את הדבר כראו, גם לזה פייסבוק דאגו, הם בנו דף שבו אתה מכניס את הURL של הכתובת ומקבל את המידע אותו כפתור הLike ישלוף בצורה נוחה ביותר.
http://developers.facebook.com/tools/lint/

זה ירשום לכם בטבלה את הערים שהתקבלו ואיך, כך תדאו עם הגדרתם נכון הכל.

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

בהצלחה

על כפתור הShare אני אפרט בזהדמנות אחרת.

מקווה שמאמר\מדריך זה עזר לכם,
חגי.

yNaxon · 10-12-10, 14:58

תודה על המדריך

אני באופן אישי לא מת על שימוש בIFRAME

mmp · 10-12-10, 19:56

תודה רבה!

BlueNosE · 11-12-10, 02:16

אהבתי את ההשקעה. חידשת לי בנוגע לתגיות ה-OG, לא הבנתי מה השימוש שלהן בנוגע לפייסבוק עד עכשיו.

שימושי מאוד, תודה

09-12-10, 23:20	# 1
Hagaibl משתמש - היכל התהילה מיני פרופיל תאריך הצטרפות: Jul 2010 הודעות: 214	עבודה עם Facebook: כפתור Like הקדמה: בעידן של ימינו בו הפייסבוק הוא אמצעי קידום ושיווק מן הדרגה הראשונה, חשוב שלכל אתר יהיה את הכלים של הנכונים בארסנל. פייסבוק, כאתר חברתי עצום, חשב על הכול ועל התלות שלנו בו והמציא את ה- Social Plug-ins. היום אני אסביר כיצד לעשות שימוש נכון בכלים אלו בכדי לעזור לאתר שלכם להתקדם בצורה החכמה והנוחה ביותר. אז איך עושים את זה בכלל? למזלנו הרב, פייסבוק עשו את החיים שלנו הרבה יותר קלים ונוחים. הם הוסיפו מספר כלים שיעזרו לנו ליצור את הדברים הללו. במדריך זה אני ידגים רק את הדרך של הiframe ולא את הדרך של הXFMBL. כפתור Like אז קודם לכן בוא נראה את המבנה הבסיסי של כפתור ה Like בקוד. PHP קוד: `<iframe src="http://www.facebook.com/plugins/like.php?href=<url>&layout=<layout>&show_faces=<show_faces>&width=<width>&action=<action>&font=<font>&colorscheme=<colorscheme>t&height=<height>" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:<width>px; height:<height>px;" allowTransparency="true"></iframe>` כל טקסט המופיע בתוך <> זהו פרמטר שצריך לשנות אני אפרט עכשיו על הפרמטרים השונים: <url> - הפרמטר האחראי על הדף שעליו יעשו את הLike\Recommend(נגדיר מה זה יהיה בהמשך), את המחרוזת url יש להעביר דרך פונקציה urlencode בכדי להמיר סימנים לתווי ANSI בכדי למנוע בעיות עתידיות. <layout> - התצוגה של הכפתור יש 3 סוגים, standard, button_count וbox_count. (ראה\י נספח לתמונות). לכל אחד מן הlayout יש מראה שונה וגודל מינימלי שצריך לתת לו. הסבר קצר על כל אחד: standard - מציג את הטקסט צמוד לכפתור, עם שמות החברים שלחצו על הכפתור כבר כולל את תמונתיהם(אם הוגדר Show Faces), הסוג השני button_count - מציג את המספר הכולל של ה"לייקים" שנעשו על הכפתור הזה בתוך קופסה ליד הכפתור. box_count - מציג את המספר הכולל של ה"הלייקים" מעל הכפתור. עכשיו נעבור לגדלים המינימלים של כל סוג layout. נתחיל בstandart - רוחב מינימלי: 225 פיקסלים, רוחב בררת מחדל: 450 פיקסלים, גובה מינמלי: 35 פיקסלים במידה ולא אופשר show_faces במידה ואושר אז גובה מינמלי של 80 פיקסלים. button_count - רוחב מינימלי 90 פיקסלים, רוחב בררת מחדל: 90 פיקסלים, גובה 20 פיקסלים. box_count - רוחב מינימלי: 55 פיקסלים, רוחב בררת מחדל: 55 פיקסלים, גובה: 65 פיקסלים. <show_faces> - האם יראה את התמונות בעת מעבר על השם של האנשים שעשו Like(תקף רק בכפתר שהוגדר לו layout - standard), ערכים true או false בלבד! <width> - רוחב הכפתור בפיקסלים(מופיע פעמים) <action> - הטקסט שיהיה רשום בכפתור, יותר נכון הסוג, recommend או like. ניתן להגדיר רק like או recommend. <font> - פונט הטקסט, יש מספר ערכים שניתן להגדיר: ariel, seoge ui, tahoma, verdana, trebuchet ms. <colorscheme> - סגנון הצבע dark או light. <height> - גובה בפיקסלים(מופיע פעמים) אוקי אז לאחר שקבענו את כל הפרמטרים כפי שרצינו קיבלנו קוד סופי של הiframe, עכשיו פשוט נדביק באתר ויהיה לנו כפתור Like כמו שצריך. הפייסבוק ירשום לנו בפרופיל את הדבר בצורה הבאה: X like's(or recommended) Y on Z פירוט: X - שם האדם. Like's \ Recommended בהתאם למה שקבענו בכפתור(action). Y כותרת הדף(הכותרת של הurl שהגדרנו בפרמטר url, הוא "נכנס" לurl שספיקנו ולוקח את הכותרת). Z שם האתר(דומיין). עכשיו אתם בטח אומרים: "אבל למה? אני רואה אנשים שעושים דברים כפי שהם רוצים בקלות, הם שולטים בתוכן ורושמים את שם האתר במקום הדומיין, איך אני עושה את זה גם?" אז ככה, אני שאלתי את עצמי את אותה שאלה בדיוק כאשר אני התנסתי בפעם הראשונה בכפתור הLike, מסתבר שיש לעשות שימוש בOpenGraph, זהו מעין תחביר מיוחד של פייסבוק המאפשר לקבוע ערכים שאליהם הפייסבוק יתיחס במידה והם קיימים, אם הם לא קימים פיסבוק יקח את הפרמטרים מתוך קוד הHTML הרגיל. המערכת של פייסבוק בודקת קודם אם יש שימוש בopengraph במידה ויש היא לוקחת את המידע שהוגדר במידה ואין היא לוקחת את מה שהיא מוצאת. איך משתמשים ב OpenGraph? על ידי הכנסה של מספר תגים מסוג <meta> בתוך קוד האתר, תגים אלו צריכים להימצא בתוך הhead של הדף. מהו מבנה הmeta? PHP קוד: `<meta property="varname" content="value" />` באילו varname אנחנו נשתמש? og:title og:image og:url og:site_name אילו הvarname שמענינים אותנו כעיקרון, הערך של og:title - זהו כותרת הדף, הY שלנו בפרסום בפרופיל המשתמש. הערך של og:image - תמונה אשר תופיע, גודל מינימלי של 50 על 50(בפיקסלים), הכנס קישור מלא לתמונה ולא מיקום שלה בשרת. כלומר לא PHP קוד: `/imagefolder/image.type` אלא PHP קוד: `http://domain/imagefolder/image.type` . הערך של og:url - הקישר לאתר שלנו, בעת לחיצה על Y או Z בפרסום זה יוביל לקישור הנ"ל. הערך של og:site_name - שם האתר, הZ שלנו. בסופו של דבר אמור להיות לנו ככה: PHP קוד: `<meta property="og:title" content="Page Title(Y parameter)" /> <meta property="og:site_name" content="Site Name(Z parameter)" /> <meta property="og:url" content="http://domain" /> <meta property="og:image" content="http://domain/imagefolder/image.type" />` בכדי לבדוק אם הגדרת את הדבר כראו, גם לזה פייסבוק דאגו, הם בנו דף שבו אתה מכניס את הURL של הכתובת ומקבל את המידע אותו כפתור הLike ישלוף בצורה נוחה ביותר. http://developers.facebook.com/tools/lint/ זה ירשום לכם בטבלה את הערים שהתקבלו ואיך, כך תדאו עם הגדרתם נכון הכל. מספר עצות לסיכום ודאו כי יש גישה לאורחים לגשת לדף(זכרו הסקריפט הוא אורח ולא משתמש קבוע). ודאו כי הגדרתם הכל נכון. אל תתעצבנו מכל שטות. בהצלחה על כפתור הShare אני אפרט בזהדמנות אחרת. מקווה שמאמר\מדריך זה עזר לכם, חגי. __________________ בברכה, חגי בלוך גדות.

10-12-10, 14:58	# 2
yNaxon אקס מנהל מיני פרופיל תאריך הצטרפות: Dec 2005 מיקום: תל אביב הודעות: 7,481	תודה על המדריך אני באופן אישי לא מת על שימוש בIFRAME __________________ בברכה, יונתן.

11-12-10, 02:16	# 4
BlueNosE אין כמו ב127.0.0.1 מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: כפ"ס גיל: 32 הודעות: 4,086	אהבתי את ההשקעה. חידשת לי בנוגע לתגיות ה-OG, לא הבנתי מה השימוש שלהן בנוגע לפייסבוק עד עכשיו. שימושי מאוד, תודה __________________ עומר, admin [@] rely.co.il בניית אתרים Rely סלנג מילון סלנג utter

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


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

10-12-10, 19:56	# 3
mmp חבר חדש מיני פרופיל תאריך הצטרפות: Dec 2010 הודעות: 44	תודה רבה!

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)