שיתוף תכנים בגרירה

 

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

שיתוף תכנים באמצעות גרירה

שיתוף תכנים באמצעות גרירה

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

איך מטמיעים את הקוד

דבר ראשון שצריך לעשות הוא להוריד את כל קבצי הקוד מהקישור כאן הוא למעלה (קוד). לאחר שנפתח את קובץ ה-rar נראה שמה שהקבצים שהורדנו הם:

  • dragShare.js
  • dragShare.css
  • קובץ html
  • תיקיית js
  • תיקיית תמונות

על מנת שהקוד יפעל, אנו צריכים לטעון לתוך האתר שלנו את תיקיית ה-JS וכמו כן את שתי הקבצים הראשונים (קובץ JS וקובץ CSS).

1
2
3
4
5
6
7
8
9
//ספריות jQuery  
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>
<script type="text/javascript" src="js/ui.droppable.js"></script>

//שני הקבצים הראשונים
<script type="text/javascript" src="dragShare.js"></script>
<link rel="stylesheet" type="text/css" href="dragShare.css" />

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

האמת שאנחנו ממש קרובים לסוף, לאחר שטענו את הקבצים החיוניים, כל שעלינו לעשות הוא למצוא אלמנט מסוג object או img ולהוסיף לו שני משתנים: class ו-title.

1
<object class="share" title="שיתוף תכנים באמצעות גרירה" ...>

בדוגמא זו הוספנו תווית גרירה לאלמנט של וידאו, object. המאפיין class צריך להכיל את הערך "share" והמאפיין title צריך להכיל את הכותרת המתאימה לתוכן המשותף (כותרת זו תוצג כאשר ישתפו את התוכן).

זה הכל! כעת לאחר טעינת העמוד, קוד jQuery יעבור אוטומטית על כל האלמנטים שמכילים class="share" ויוסיף להם תווית גרירה.
תטמיעו את הקוד באתרכם ותזמינו את המבקרים באתרכם לשתף בגרירה.

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

תגובות
שליNo Gravatar 14 באוקטובר

:0
יפה ביותר! תודה רבה!

[תגובה]

יובלNo Gravatar 14 באוקטובר

איזה מדליק!!!
ממש יעיל ומושך למשתמש, אני אשתמש בזה.

רק מפריע לי שלא עובד בexlorer 6 (יכול להיות שגם 7 ו-8, לא בדקתי). יש מצב לתיקון הקוד?

תודה!!

[תגובה]

אורן רוט

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

[תגובה]

He - ImcoupleNo Gravatar 26 ביולי

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

[תגובה]

אורן רוט

תודה רבה. מפאת חוסר בזמן, הרבה זמן לא כתבתי כאן.

ראיתי גם תגובה שלך באתר נוסף שלי facebookapps.co.il…

[תגובה]

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון