פתרון לבעיית ולידציה W3C עם תגי FBML של פייסבוק
הוספת כל מיני התקנים של פייסבוק זה מצוין לכל אתר, אבל תגי
הפתרון האמת די פשוט, אבל על מנת להגיע אליו צריך באמת להבין איך XHTML באמת עובד.
הסיבה שתגי FBML אינם ולידיים היא כיון שאינם חלק מהניימספייס (namespace) של XHTML Transitional ופייסבוק החליטו להמציא אחד משלהם. אגב, ניסיתי גם לשים את שניהם בתוך תג <html> כך שיזהה גם וגם אבל בצורה לא מפתיעה בכלל, גם זה לא חוקי!
אם כך, איך מחביאים את התג מקורא ה-html?
האמת, די פשוט, כותבים סקריפט שיכתוב את זה לדף ולא ממש כותבים את זה בתוך הדף עצמו. כלומר, תג לייק שהיה ניראה ב-html משהו כזה:
<fb:like href="http://www.yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>
עכשיו יכנס לתוך בלוק ג'אואסקריפט ויראה כך:
<script language="javascript" type="text/javascript">
document.write('<fb:like href="http://www.yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>');
</script>
אבל, ג'אואסקריפט אינו מקבל את הסימן "<"...
ושוב, הבנה של איך עוב XHTML מצילה אותנו כיון שהוא יכול להכיל גם html וגם xml. אנו משתמשים אם כך בתג CDATA מ-xml שאומר לקורא לא להתייחס לכל מה שבתוכו ושהסימן "<" הוא רק חלק מהטקסט ולא באמת תג html.
שימו לב אבל שג'אואסקריפט אינו מזהה את התג ולכן נכתוב אותו עם סימני הערה לפניו.
ואנו מקבלים את הפתרון הסופי
שנראה משהו כזה:
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<fb:like href="http://www.yourdomain.com" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>');
//]]>
</script>
אז רק לעבור שוב על הדרך, אם אתם רוצים להשתמש בתגי FBML של פייסבוק וגם רוצים שהדף שלכם יהיה ולידי W3C, פשוט תעשו את שני הצעדים הבאים:
- שימו את התג בתוך בלוק ג'אואסקריפט שכותב את התג על ידי "document.write".
- שם לב להשתמש בתגי CDATA עם סימני הערה לפניהם על מנת שחלק זה לא יקרא כ-html.
וזהו, פתרון פשוט ליצירת דף XHTML ולידי הכולל תגי FBML של פייסבוק, תהנו.