איך לעצב את FanBox של פייסבוק ?

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

[adsense]

איך פותחים עמוד מעריצים בפייסבוק ?

כדי לפתוח עמוד מעריצים בפייסבוק חייבים לגשת לעמוד הבא:http://www.facebook.com/pages/create.php

נא למלא את פרטי העמוד וללחוץ על כפתור Creat Official Page.
מזל טוב יש לכם עמוד המעריצים חדש !

איך מקבלים את קוד של Fanbox קובייה אשר ניתן לשתול באתר שיציג את כפתור הלייק ואפשרות הצטרפות לעמוד המעריצים דרך האתר ?
קבלת קוד של Fanbox בקישור הבא: http://developers.facebook.com/docs/reference/plugins/like-box
חובה לתת את מספר סידורי של אותו עמוד המעריצים בתיבה של ID

כדי לקבל את מספר ID של עמוד המעריצים, נא להכנס לעמוד עצמו והמספר יופיע לכם בכתובת ה-URL.
לאחר הגדרות בעמוד נא ללחוץ על כפתור ה- Get Code. כעת קיבלתם קוד שאתם צריכים לשתול באתר שלכם במקום שבו אתם רוצים ש-Fanbox יופיע.

איך לעצב את FanBox של פייסבוק באתר?

כל מי שעבר קורס בניית אתרים או יודע את html ו-Css זה אמור להיות מאוד קל עבורו.

דוגמה:

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

1. <iframe scrolling="no" frameborder="0" width="300px;" height="240px"
2. src="http://www.facebook.com/connect/connect.php?id=189085907841>
3. connections=8>stream=0>locale=he_IL>
4. css=http://www.*********.co.il/*********.css"
5. allowtransparency="true" style="border: none;"></iframe>

במקום שבו כתוב " ID=*** " חייבים לרשום את מספר מזהה של עמוד המעריצים שלכם שהוסבר קודם.
בקוד הנ"ל צוין 5 כוכבים לאחר Css= . זה הוא המקום שצריכים לכלול את קישור לקובץ של Css בשביל לעצב את Fanbox. כאן ידע בסיסי ב-Css יעזור להבין מי נגד מי.

קוד – Css עבור עיצוב ה-Fanbox

1. .fan_box .connect_action .name{font-size:16px;font-weight:bold;}
2. .fan_box .connections{border-top:none;
3. padding:2px 15px 0 0;line-height: 14px;position:
4. absolute; bottom: 0; left:0; width: 460px; height:260}
5. .fan_box .profileimage{float:left;padding:2px 10px 0 0;}
6. .fan_box .connections_grid .grid_item{padding:0 0 1px 15px;}
7. .fan_box .connect_action{padding:0 0 0 8px}
8. .fan_box .connect_button{padding-top:3px}
9. .fan_box .connections_grid .grid_item .name{ padding-top: 0;}
10. .fan_box .name_block{height: 32px;}
11. .fan_box .profileimage{ width: 50px;}
12. .fan_box .page_stream {height: 250px;}
13. .fan_box {background:transparent; color: #222;
14. font-family: arial; font-size: 13px;}
15. .fan_box .full_widget{border:none;
16. background:#E2EFFC; position: relative;}
17. .fan_box .full_widget .connect_top{ background: transparent;
18. border-bottom: 1px solid #BEBDB9;}
19. .fan_box .connect_top{padding:3px 14px 6px;}
20. .edit_app_switcher .app_switcher_button .name{padding:2px 0 2px 6px;}

את הקובץ הזה עליכם לשמור כ- fbbox.css ולהכניס את השרשור לקובץ במקום הכוכביות כפי שפורט למעלה.

זהו….. 🙂
כעת הצלחתם ליצור וגם לעצב את FanBox של פייסבוק עבור האתר שלכם. לעצב את Fanbox של פייסבוק אינו קל במידה ואינך יודע לאן לגשת ומה לעשות אבל אחרי מדריך הזה, באפשרותך ליצור ולשלוט באופו התצוגה וכמובן לעצב את Fanbox של פייסבוק עבור הלקוחות שלך. לא לשכוח, במידה ואהבת את המאמר לשתף אותה בפייסבוק, תאמינו לי זה לא כואב.

שאלות ניתן לשאול באמצעות השארת תגובה למטה…

עדכון חם 31/04/13:
הודעה חשובה: השיטה בה השתמשתי לעיצוב Fanbox של פייסבוק אינה תקפה יותר. פייסבוק החליטה לשנות את הצורה בה התוספות שלה עובדות ולכן ברגע זה אין דרך לעצב פאנבוקס. במידה וזה יתאפשר בעתיד, אעדכן את הפוסט. תודה!