הוספת כפתורים חברתיים לאתר

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

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

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

כאן אנחנו גם משתמשים ב-CSS3 על מנת לייצר מסגרת (border) מעוגלת. כך מה שאתם רואים כאן זה נטו קוד ולא איזשהי תמונה מעוגלת ומתומרנת בצורה כלשהי.

קוד ה-CSS

נציג לכם שני IDים ו-CLASS אחד שהם אחראיים למיקום האלמנט ולפינות המעוגלות.

	#social_media {
		padding:15px 10px 0px 0px;
		background-color:white;
		position:fixed;
		width:75px;
		height:148px;
		float:right;
		-webkit-border-top-left-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-top-left-radius: 10px;
		-moz-border-bottom-left-radius: 10px;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	#social_media_container {
		width:98px;
		position:fixed;
		left:50%;
		margin-left:-600px;
	}

	.fix_margin {
		margin-right:8px;
	}

social_media מכיל את הגודל של האלמנט שלנו ואת הסוגריים המעוגלים. שימו לב שהתמיכה כאן היא רק בדפדפנים כרום, פיירפוקס ואקספלורר 9 ומעלה! לצערנו הרב כדי לתמוך בדפדפן אקספלורר 9 ומטה בשביל פינות מעוגלות אנו צריכים להשתמש בג'וואה סקריפט (למשל ב-CurvyCorners) אבל כאן לא נתעסק בזה כך שלמי שאין דפדפן אקספלורר מעודכן יאלץ לסבול.

החלק של CSS3 שקובע את המסגרת העגולה הוא:

		-webkit-border-top-left-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		-moz-border-top-left-radius: 10px;
		-moz-border-bottom-left-radius: 10px;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;

שימו לב שהקוד מתייחס לחלק העליון בצד שמאל ולחלק התחתון בצד שמאל ונותן להם רדיוס radius של 10 פיקסל (זה מה שיוצר את המסגרת העגולה). אבל מה, כל אחת משתי הפקודות חוזרות על עצמן 3 פעמים. וזה נועד לתמוך במגוון הדפדפנים למשל הפקודה moz- תומכת בפיירפוקס. כך שאם אתם רוצים לבצע שינוי בגודל של הכימור של המסגרת תאלצו לשנות את כל הפקודות הללו. זה לא נוח אבל עד שלא תהיה תמיכה מלאה ב-CSS3 ככה אנחנו נאלצים לעבוד.

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

הרעיון פה פשוט: נתנו לקונטיינר (מכולה, אלמנט שדואג להכיל אלמנט אחר) 50% מרחק מצד שמאל (left: 50%) ובמצב כזה האלמנט יהיה במרחק יחסי לרזולוציה של המסך של כ-50%. אבל אנחנו רוצים שהוא יצמד לתוכן עצמו בצד שמאל! לכן נתנו לקונטיינר הזה גם margin-left של 600 פיקסלים (שזה הרוחב בערך של הדף תוכן עצמו).

המטרה היא שככה לא משנה מה גודל הרזולוציה של הצופה האלמנט תמיד יצמד לתוכן - המרחק שלו יהיה באופן יחסי. אם היינו מגדירים לאלמנט הזה מרחק של 50 פיקסלים מצד שמאל (left:50px) אז היה יכול להיות מצב שבו הרזולוציה של המשתמש קטנה מדי או גדולה מדי ואז האלמנט היה עולה על התוכן שלנו או מופיע רחוק מדי מהתוכן שלנו. לכן המיקום צריך להיקבע באופן יחסי לדף (50%) ולא באופן אבסולוטי.

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

קוד ה-HTML שלנו:

	<div id="social_media_container">
		<div id="social_media">
			<div class="fb-like" data-href="" data-send="false" data-layout="box_count" data-width="55" data-show-faces="true" data-font="arial"></div>
			<br />
			<br />
			<div class="fix_margin">
				<g:plusone size="tall"></g:plusone>
			</div>
		</div>
	</div>

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

נסיים בלינק של תמונה להמחשה של החלק האחרון שמראה לנו למה הייתה הכוונה בכך שהמיקום יהיה יחסי. בקו האדום רואים את ההגדרה 50% מרחק מצד שמאל (זאת אומרת מרחק יחסי) ואז הפחתה (תסתכלו שיש מינוס ב-margin-left וזה חשוב!) של 600 פיקסלים מאותו מיקום, כך שגם אם הגודל של המסך גדול מאוד עדיין המיקום יהיה יחסי וקבוע ביחס לתוכן עצמו.

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