בס"ד
זוכרים את כל הפרסומים המציקים האלה בסגנון "בואו תראו איך ג'אסטין ביבר היה נראה במעי אימו?" ואז כשאתם נכנסים פנימה מסתבר לכם שאתם חייבים ללחוץ LIKE (במקרה הטוב, ובמקרה הפחות טוב - 10 LIKE-ים נוספים) ע"מ לגשת לסרטון מגוחך לא קשור לכלום, ופתאום אתם מוצאים את עצמכם אוהדים של כל מיני דוגמניות פרובוקטיביות ועוד עניינים מביכים שלא הייתם רוצים להיות מזוהים איתם בשום אופן, אבל מה לעשות - כל החברים שלכם בפייסבוק כבר יודעים שלחצתם LIKE רק בגלל שהייתם סקרנים ממה כל ה"הו הא"... בקיצור ------
לא עוד!
פייסבוק, בשעה טובה (או שלא) שמו קץ לכל עניין האפליקציות, לפחות באופן חופשי כפי שזה היה עד כה. מה שכן - ניתן לשלב אתר חיצוני שיופיע בפייסבוק בתור IFRAME (למי שמבין על מה אני מדבר...).
בכל אופן - מה שרציתי לספר לכם הוא שאיכשהו נתבקשתי ע"י מאן דהוא ליצור עמוד עם תוכן נסתר שייחשף רק למי שיואיל לעשות LIKE. ובכן, אם היו פונים אליי לפני חודש ימים נניח, היה בידי לעשות זאת בקלות, אבל אחרי שכל עניין האפליקציות נחסם - נבוכתי ולא ידעתי את נפשי.
אבל לא אני הוא זה שאומר נואש, על כן הפשלתי שרוולי וניגשתי למשימה במרץ. ואכן הצלחתי לעמוד בדרישה באופן די מוצלח, והרי תקציר מעללי:
ובכן, כפי שאמרנו גם היום אין בעיה ליצור אתר בכל מקום אחר, ולהציגו במסגרת של פייסבוק כאשר אתרנו מופיע כחלונית IFRAME הבלועה בין הסרגלים הכחולים של צוקרברג.
אז כולם יודעים איך משלבים כפתור LIKE בכל אתר שנרצה. ומי שלא, נדרשות שתי שורות:
א. ראשית, התג הפותח של הHTML צריך להיראות כך:
זוכרים את כל הפרסומים המציקים האלה בסגנון "בואו תראו איך ג'אסטין ביבר היה נראה במעי אימו?" ואז כשאתם נכנסים פנימה מסתבר לכם שאתם חייבים ללחוץ LIKE (במקרה הטוב, ובמקרה הפחות טוב - 10 LIKE-ים נוספים) ע"מ לגשת לסרטון מגוחך לא קשור לכלום, ופתאום אתם מוצאים את עצמכם אוהדים של כל מיני דוגמניות פרובוקטיביות ועוד עניינים מביכים שלא הייתם רוצים להיות מזוהים איתם בשום אופן, אבל מה לעשות - כל החברים שלכם בפייסבוק כבר יודעים שלחצתם LIKE רק בגלל שהייתם סקרנים ממה כל ה"הו הא"... בקיצור ------
לא עוד!
פייסבוק, בשעה טובה (או שלא) שמו קץ לכל עניין האפליקציות, לפחות באופן חופשי כפי שזה היה עד כה. מה שכן - ניתן לשלב אתר חיצוני שיופיע בפייסבוק בתור IFRAME (למי שמבין על מה אני מדבר...).
בכל אופן - מה שרציתי לספר לכם הוא שאיכשהו נתבקשתי ע"י מאן דהוא ליצור עמוד עם תוכן נסתר שייחשף רק למי שיואיל לעשות LIKE. ובכן, אם היו פונים אליי לפני חודש ימים נניח, היה בידי לעשות זאת בקלות, אבל אחרי שכל עניין האפליקציות נחסם - נבוכתי ולא ידעתי את נפשי.
אבל לא אני הוא זה שאומר נואש, על כן הפשלתי שרוולי וניגשתי למשימה במרץ. ואכן הצלחתי לעמוד בדרישה באופן די מוצלח, והרי תקציר מעללי:
ובכן, כפי שאמרנו גם היום אין בעיה ליצור אתר בכל מקום אחר, ולהציגו במסגרת של פייסבוק כאשר אתרנו מופיע כחלונית IFRAME הבלועה בין הסרגלים הכחולים של צוקרברג.
אז כולם יודעים איך משלבים כפתור LIKE בכל אתר שנרצה. ומי שלא, נדרשות שתי שורות:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
ב. בתוך העמוד, איפה שרוצים דוחפים:
<fb:like show_faces="false" href="http://www.facebook.com/yourpage"></fb:like>
כאשר yourpage הוא העמוד אליו אנו עושים LIKE והמאפיין show_faces (במקרה הזה false) מבטל את הצגת החברים הנוספים שעשו LIKE.
כעת, באמצעות קוד פשוט בסגנון DHTML ניצור DIV שנאפיין אותו כנסתר (style="visibility:hidden") בתוכו נשים את התוכן הסמוי.
פייסבוק מספקים לנו ספריית Javascript שתשמש אותנו לזהות לחיצה על כפתור הLIKE. ע"מ להשתמש בספרייה זו נצטרך להוסיף את הקוד הבא:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'xxxxxxxxxxxx', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('edge.create', function(href, widget) {
showMovie(); //Show the hidden div
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
עליכם לערוך מה שצבוע בכחול. אם עוד לא עשיתם זאת, עליכם לפתוח אפליקציה בפייסבוק ודרך זה תקבלו את הappId אותו תשימו במקום האיקסים.. במקום השורה showMovie וכו' תכתבו את הקוד להצגת הdiv הנסתר (אני למשל כתבתי פונקציה שעושה זאת). אחלה.
עדיין ישנה בעיה קטנה (וכאן אנחנו מגיעים לדובדבן של הקצפת - היכונו!) אם המשתמש כבר עשה LIKE בעבר עבור העמוד שלכם והוא יכנס לאתר שלנו, הוא לא יראה את התוכן גלוי, עד שילחץ על LIKE, בעצם הוא יצטרך קודם לעשות UNLIKE ואז שוב LIKE ורק אז יופעל הקוד הרצוי. בעיה.
ובכן חככתי בדעתי מה לעשות... ערכתי ניסויים והרי תגליתי:
הודות לתוספת בתג הפתיחה של הHTML פייסבוק דואגים להחליף את קוד הFBML, במקרה שלנו - <fb:like> בקוד HTML עבור הדפדפן. ניסיתי להבין האם יש הבדל בין הקוד שיתקבל עבור כפתור LIKE ביחס לקוד שיתקבל עבור כפתור UNLIKE ואז לבדוק מה הקוד ולפי זה לדעת האם לפנינו משתמש שעשה כבר LIKE או לא (אם יש כפתור UNLIKE אז מסתבר שהוא עשה LIKE וכן להיפך...). מה עשיתי? יצרתי DIV ונתתי לו ID, למשל likebutton, ובתוכו שמתי את הקוד <fb:like> ואז אני יכול לגשת לקוד שבתוכו באמצעות document.getElementById('likebutton').innerHTML וכעת, נתתי לפייסבוק לפרש את הFBML ואחרי זה הצגתי לעצמי את קוד הHTML באמצעות סקריפט alert. ואכן, גיליתי שישנו הבדל פצפון בין כפתור LIKE לכפתור UNLIKE. שימו לב:
לפני שבוצע LIKE (כלומר הכפתור שמוצג הוא LIKE)
אחר שבוצע LIKE (כלומר הכפתור שמוצג הוא UNLIKE)
אם תסתכלו טוב, מעבר למספרים האקראיים שמשורשרים שם בכתובת, יש עוד הבדל פצפון והוא בגובה של הIFRAME, כאשר לפני שנעשה LIKE הגובה הוא 62px ואחרי - 64px... אמנם ההדגמה הזו נעשתה כאשר הפרצופים כן מוצגים ולכן אם תרצו לממש את הרעיון הזה תצטרכו לבדוק בעצמכם את הגבהים... בכל אופן הרעיון הוא שיש הבדל ביניהם! כל שנותר הוא לנתח את המחרוזת שבinnerHTML ולחפש את התת-מחרוזת 64px למשל וכך נדע שכבר לחצו על LIKE (לדוגמא)... הבנתם את העקרון.
אגב, הקוד נראה שונה בכל דפדפן, ולכן צריך לוודא שהטריק חוצה-פלטפורמות..
זהו. עכשיו מה שנשאר הוא למקם את האתר כIFRAME בפייסבוק, והרי לכם משהו דומה לאפליקציות שהיו פעם.
מי שהבין הבין.
שמחתי לדפוק את צוקרברג, למרות שהוא יהודי חמוד.. (סתם בגלל שהוא עשיר וגדול ממני בשנה).
יום שמח לכולם!
אגב, הקוד נראה שונה בכל דפדפן, ולכן צריך לוודא שהטריק חוצה-פלטפורמות..
זהו. עכשיו מה שנשאר הוא למקם את האתר כIFRAME בפייסבוק, והרי לכם משהו דומה לאפליקציות שהיו פעם.
מי שהבין הבין.
שמחתי לדפוק את צוקרברג, למרות שהוא יהודי חמוד.. (סתם בגלל שהוא עשיר וגדול ממני בשנה).
יום שמח לכולם!
נ.ב. תודה לאתר הזה שמאוד עזר לי לשלב הראשון..
נ.נ.ב עדיין יש פינות לסגור, אבל את החלק הקשה עברנו בהצלחה :)
נ.נ.ב עדיין יש פינות לסגור, אבל את החלק הקשה עברנו בהצלחה :)
כל הכבוד
השבמחקמרשים ביותר מר האקר
השבמחק