לפתוח בלוג זה לא עסק פשוט

מה בסך הכל רציתי? לפתוח בלוג?

הגענו לירח, גילינו את האטום, המסנו כמה כורים, ודווקא פתיחת בלוג אתם מסבכים?

טוב - האמת שאני בחור בעייתי - שהרי ביקשתי להוסיף צלמית (Icon) של Like לבלוג.
אך מכיוון שמטרת בלוג זה הינה פתרון בעיות טכנולוגיות, לקחתי על עצמי את מציאת פרון הבעיה והצגתה כאן.

שלב א' - פתיחת הבלוג
סה"כ, תהליך פתיחת פתיחת בלוג ב Blogger הינו תהליך די פשוט והממשק יחסית אינטואיטיבי וידידותי למשתמש הממוצע, כל מה שצריך זה חשבון גוגל (כן בסוף הם ישתלטו על העולם) ובכמה צעדים פשוטים תוכלו לבחור כותרת לבלוג, URL, והמערכת תאפשר לכם לסדר את הפריסה על העמוד, צבעים, רקע ועוד.

לשונית העיצוב אף מאפשרת הוספת גאדג'טים למיניהם, באמצעותם קוראים יוכלו לקבל עדכונים על תכני הבלוג בדוא"ל, ניתן ליצור משאלים (Polls), לעדכן לוגו ועוד ועוד.

מיד אחרי שתכתבו את הרשומה (Post) הראשונה שלכם תשימו לב כי בתחתית הרשומה ישנם אופציות לשיתוף בדוא"ל, בלוגר, פייסבוק, טוויטר וגוגל פלוס, ישנם גם גאדג'טים חברתיים המאפשרים שיתוף במקומות נוספים.

שלב ב' - תיסכול
אבל מה קורה אם רציתם לשתף ברשת חברתית שאינה מופיעה כאן (כמו Liknedin), או להציג בעמוד עצמו כמה משתמשים שיתפו, בסגנון הבא:

פה אנחנו בבעיה,
בבלוגר אין אופציה מובנית אשר מאפשרת לעשות זאת וחיפוש ברשת יוביל לאינסוף אפשרויות להוספת כפתורים שכאלו - כאשר לרוב הם לא יהיו בתצורה ובפריסה שתרצו.

אז מה עושים?
קודם כל אני ממליץ לזרוק מספר קללות עסיסיות לעבר המחשב, ולשלוח מיילים נזעמים לגוגל על כך שלא עשו את הממשק ידידותי יותר - אחר כך תקחו 2 אקמול ותמשיכו לקרוא את השורה הבאה.

ובכן החדשות הטובות הן שניתן לעשות זאת, והחדשות הרעות הן שהתאמה אישית (customization) כזו הינה מעט מסובכת.

ובכל זאת?

שלב ג' - הדרך הפשוטה
ובכן אם תרצו קופסאת שיתוף כמו שיש אצלי אז הדרך הפשוטה היא להיכנס ללשונית "עיצוב" של הבלוגר שלכם, לבחור היכן להוסיף את קופסת השיתוף, ולבחור "HTML/JavaScript".


כעת בחלון שייפתח תרשמו את הכותרת הרצוייה (במקרה שלנו "שתף") ולתוך התוכן העתיקו את הקוד הבא:

<table border="0" cellpadding="1px" cellspacing="10" align="center" bgcolor="white" dir="ltr">

<tr>
<td align="center">

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like send="false" layout="box_count" width="60" show_faces="false"></fb:like>

</td>



<td align="center">

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
<a href="https://twitter.com/share" class="twitter-share-button"
data-via="Davide Kaneti"
data-count="vertical">Tweet</a>
</div>
</td>
</tr>

<tr>
<td align="center" colspan=2>
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>
</td>



</tr>

</table>

וזהו, תתחדשו יש לכם כפתורי שיתוף שיראו בתוך הבלוג שלכם ממש כמו שלי.

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

אנו נחלק את הטיפול ל-2

1. הצלמיות עצמן, גודל, נראות וכו' (כיצד נרצה שהם יראו על המסך).
2. כיצד למקם את הקישורים במרחב.

שלב ד'1 - מציאת הכפתור הרצוי
החלק הראשון מעט קל יותר, מפני שכל חברה באחד מעמודי הפיתוח שלה (Developers Page) מציעה את הקוד עבור צלמית הקישור שלה כך שכל מה שצריך לעשות זה לבחור את הצלמית הרצויה ולהעתיק את הקוד.

אם תסתכלו במקורות מטה תוכלו לגשת ישירות לעמודים של האפליקציות עצמן (פייסבוק, טוויטר, LInkedin וגוגל פלוס), למציאת עמודים של רשתות אחרות (נניח MySpace) אני ממליץ להכנס לגוגל ולהריץ שאילתא עם המילים הבאות: Share Button Developer ושם הרשת עצמה.

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

כעת שמצאתם את הצלמית הרצוייה, לחצו על "Get Code" ותוכלו לשתול את זה בתוך תיבה של "HTML/JavaScript" של בלוגר - כפי שעשינו קודם
הערה - נא לשים לב שבפייסבוק ישנן מספר סוגים שונים של קודים, אני ניסיתי להשתמש בהתחלה ב- IFRAME, אבל בגלל שזה עשה לי בעיות, החלטתי בסוף להשתמש בסוף ב- XFBML (צריך להעתיק 2 קודים בקופסא העליונה והתחתונה). כמו כן חשוב לשים לב בקוד לרוחב "Width" (רוחב גדול מידי ייצור יסיט לנו את הצלמית למיקום שלא התכוונו אליו בדף)

יופי, עכשיו אנחנו יודעים לקחת מעמוד את הקוד של הצלמית,
אבל מה עושים אם יש לנו מספר צלמיות של מספר רשתות חברתיות, ורוצים לסדר אותם זה מתחת לזה, למרכז וכו'?

שלב ד'2 - סידור הכפתורים על המסך
בשביל זה ניצור טבלה באמצעות קוד HTML.

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

כאשר לפני המלל שרוצים לעטוף יש תגית פתיחה, ולאחריה ישנה תווית סגירה,
אנו נציג פה את הדוגמא של הטבלה:
טבלה מתחילה בתגית "<table>" ומסתיימת באותה תגית כאשר לסוגרת יש את הסמל "/" באופן הבא

"</table>"

טבלה משתמשת גם בתגיות <tr> - בשביל לפתוח שורה, ותגית <td> בשביל ליצור תא באותה שורה.
כך שטבלה עם 3 עמודות ושתי שורות תראה כך:

<table>
<tr>
<td>
מלל של תא ראשון
</td>
<td>
מלל של תא שני
</td>
<td>
מלל של תא שלישי
</td>
</tr>

<td>
מלל של תא רביעי
</td>
<td>
מלל של תא חמישי
</td>
<td>
מלל של תא שישי
</td>
</tr>

</table>

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

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

בהצלחה.

מקורות וקישורים

1. הוספת צלמית קישור של Linkedin
2. הוספת צלמית קישור של Twitter
3. הוספת צלמית Like של Facebook
4. הוספת צלמית +1 של גוגל
5. טבלאות בסיסיות ב- HTML
6. כלי ליצירת קוד טבלה HTML באופן אוטומטי