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

   
|!|

השב
 
כלים לאשכול תצורת הצגה
ישן 09-12-10, 23:20   # 1
Hagaibl
משתמש - היכל התהילה
 
מיני פרופיל
תאריך הצטרפות: Jul 2010
הודעות: 214

Hagaibl לא מחובר  

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

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

פייסבוק, כאתר חברתי עצום, חשב על הכול ועל התלות שלנו בו והמציא את ה- 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 אני אפרט בזהדמנות אחרת.

מקווה שמאמר\מדריך זה עזר לכם,
חגי.
__________________
בברכה,
חגי בלוך גדות.
  Reply With Quote
ישן 10-12-10, 14:58   # 2
yNaxon
אקס מנהל
 
yNaxon's Avatar
 
מיני פרופיל
תאריך הצטרפות: Dec 2005
מיקום: תל אביב
הודעות: 7,481

yNaxon לא מחובר  

תודה על המדריך
אני באופן אישי לא מת על שימוש בIFRAME
__________________
בברכה,
יונתן.
  Reply With Quote
ישן 10-12-10, 19:56   # 3
mmp
חבר חדש
 
מיני פרופיל
תאריך הצטרפות: Dec 2010
הודעות: 44

mmp לא מחובר  

תודה רבה!
  Reply With Quote
ישן 11-12-10, 02:16   # 4
BlueNosE
אין כמו ב127.0.0.1
 
BlueNosE's Avatar
 
מיני פרופיל
תאריך הצטרפות: Oct 2005
מיקום: כפ"ס
גיל: 27
הודעות: 4,086

BlueNosE לא מחובר  

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

שימושי מאוד, תודה
__________________
עומר,
admin [@] rely.co.il

בניית אתרים Rely

סלנג מילון סלנג utter
  Reply With Quote
השב

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

Tags
כפתור like, facebook, עבודה עם פייסבוק, social plugins

כלים לאשכול
תצורת הצגה

חוקי פירסום
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is מופעל
סמיילים הם מופעל
[IMG] קוד מופעל
קוד HTML מכובה

קפיצה לפורום


כל הזמנים הם GMT +2. הזמן כעת הוא 21:26.

מופעל באמצעות VBulletin גרסה 3.8.6
כל הזכויות שמורות ©
כל הזכויות שמורות לסולל יבוא ורשתות (1997) בע"מ