בימים אלה מוחלף ה"מנוע" של אתר מוזיאון המדע.
לאחר ההחלפה, האתר יפעל על התשתית הפתוחה Drupal וייראה די בערך אותו דבר.
הפוסט הנוכחי הוא פוסט ראשון ב(אולי) סדרה של פוסטים שבהם אני אכתוב מה אני לומד בתהליך.
אחד התיסכולים שלי באתר הקיים הוא פרסום דפים בפייסבוק.
כאשר מפרסמים קישור בפייסבוק, פייסבוק ניגש לדף, מחפש בו תמונות ומציע להוסיף תמונה מהדף לקישור.
בהרבה מהדפים באתר המוזיאון (כמו זה) , יש באנר (כמו זה) בראש הדף. פייסבוק אף פעם לא מציע להציג את הבאנר ליד הקישור.
חקרתי וגיליתי שפייסבוק מזהה את התמונה אבל היא לא מתאימה לו. פייסבוק "לוקח" תמונות ריבועיות, תמונות ביחס 3X4, תמונות "עומדות" כמו זאת אבל לא תמונות ארוכות ושוכבות כמו הבאנרים באתר המוזיאון.
מה עושים?
אני לא רוצה לשנות את עיצוב האתר כדי שיתאים לקריזות של פייסבוק, אבל אני רוצה את הפונקציונאליות.
כדי שפייסבוק "ייקח" את התמונה צריך קודם כל לייצר אותה בפרופורציות המתאימות לו, ואז להציע לו אותה.
אפשר לייצר תמונה אונליין באופן אוטומטי על ידי כתיבת קוד PHP שייקח את תמונת הבאנר ויקטין אותה לפרופורציות המתאימות., נניח ככה
ועכשיו מה? איפה שמים את התמונה כדי שפייסבוק ייקח אותה אבל לא יראו אותה בדף?
אפשר אחת היא להגיד לפייסבוק איפה היא נמצאת על ידי שורה ב Header של הדף
<link rel="image_src" href="thumbnail.jpg"/>
אפשר שניה היא "לשתול" את התמונה איפה שהוא בדף ולהגדיר גודל של פיקסלים מועטים. המבקרים בדף לא ישימו לב לנקודה אבל פייסבוק יזהה את התמונה בגודל המקורי שלה.
בכל מקרה, הצורך להתאים את תיכנות האתר שאני מנהל לאתר חיצוני מעצבן אותי, אבל מה לעשות, זו הסביבה שבה אני פועל ואני לא יכול להתעלם ממנה.
ועוד דבר. אם אתם "משחקים" עם תמונות בדף ובודקים אם פייסבוק מזהה אותן, אתם צפויים להיות מתוסכלים כי פייסבוק לא ייראה את התמונות החדשות. לפייסבוק יש Cache . שימוש בכלי URL Linter יעזור לכם בשתי צורות. הראשונה היא שתראו איך פייספוק "רואה" את הדף שלכם. השנייה היא שכל צפיה בדף דרך הכלי, מרענן את ה Cache של פייסבוק עבור הדף שלכם
בדף:
http://developers.facebook.com/docs/share
יש הסבר שאפשר לשים meta tags בדף:
מה דעתך להגדיל את התמונה כלפי מעלה (נגיד ל360X480) ואז להגדיר בHTML (או CSS) שתוצג בגודל המתאים (150X480), ככה תשתמש רק בתמונה אחת, אבל היא תתאים גם לפייסבוק.
[זה עקום. וחוצמזה, בשביל זה אני אצטרך לעבור על כל התמונות באתר ולשנות את המידות שלהן. אני חושש שיאבדו מהאיכות. אני לא רוצה לבצע שינויים משמעותיים באתר רק בשביל פייסבוק. מחר הם ישנו את הכללים ואז אני שוב אצטרך לשנות את התמונות. חנן.]
עשיתי משהו דומה לאתר "הלול" ומשום מה, למרות שהכל מוגדר כמו שצריך, הא לא מזהה את התמונה.
ניסיתי את הכלי שקישרת אליו ושם התמונה כן מזוהה, אבל ייסבוק ממשיך להתעלם מהתמונות.
למישהו יש רעיון?
[תביאי קישור ואני אבדוק. חנן]
כפי שאמר המגיב הראשון יש פתרון סטנדרטי ופשוט שיכול להיות רלוונטי גם לאתרים נוספים לא רק לפייסבוק, פשוט להוסיף את הטאג הזה:
http://developers.facebook.com/docs/share
הנה, למשל:
http://ha-lool.co.il/magazine/article.asp?id=1323
תודה
למיטב זכרוני, "טריקים" כאלה עלולים להיות מסוכנים מבחינת מנועים כמו גוגל: אתה בעצם מציג משהו שונה לגולשים שלך ולמנועים, וגוגל לא אוהב את זה.
אם אני זוכר נכון, שימוש בOpen Graph Protocol ייתן לך להגדיר תמונה שרירותית.
http://developers.facebook.com/docs/opengraph
זה סטנדרט פתוח, ומשתמש בטכנולוגיות אינטרנט מוסדרות (RDFa), כך שאתה מתאים את עצמך לתקן ולא לפייסבוק, וכל אחד אחר יכול גם לעשות שימוש במידע הזה.
בנוסף זה חוסך לך להחביא תמונה בדף שלך, שזה באמת רע.
האם ידוע למישהו איך ניתן לקבוע איזה טקסט באתר פייסבוק ״יצטט״ כשמבצעים שיתוף?