הוספת לחצן שיתוף ב-Classroom

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

איך מתחילים

לחצן פשוט

הדרך הקלה ביותר לכלול בדף לחצן שיתוף ב-Classroom היא לכלול את מקור ה-JavaScript הנחוץ ולהוסיף תג לחצן שיתוף:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:sharetoclassroom url="http://url-to-share" size="32"></g:sharetoclassroom>

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

אפשר גם להשתמש בתג שיתוף חוקי ל-HTML5. כדי לעשות את זה, צריך להגדיר את מאפיין class כ-g-sharetoclassroom ולהוסיף לפני כל מאפיין לחצן את הערך data-.

<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>

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

הפעלה נדחית עם הפרמטרים onLoad ותג הסקריפט

מגדירים את parsetags הפרמטר של תג הסקריפט ל-onload (ברירת מחדל) או ל-explicit כדי לקבוע מתי להפעיל את קוד הלחצן. כדי לציין פרמטרים של תגי סקריפט, השתמשו בתחביר הבא:

<script >
  window.___gcfg = {
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

הגדרות אישיות

הגדרת כתובת ה-URL לשיתוף ב-Classroom

כתובת ה-URL שמשותפת עם Classroom נקבעת לפי המאפיין url של הלחצן. המאפיין הזה מגדיר במפורש את כתובת ה-URL של יעד לשיתוף, וצריך להגדיר אותו כדי לעבד את לחצן השיתוף.

פרמטרים של תג סקריפט

הפרמטרים האלה מוגדרים ברכיב <script /> שחייב לרוץ לפני טעינת הסקריפט platform.js. הפרמטרים שולטים במנגנון טעינת הלחצנים שפועל בכל דף האינטרנט.

הפרמטרים המותרים הם:

טעינה

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

בוטה

לחצני שיתוף מעובדים רק באמצעות קריאות בוטות ל-gapi.sharetoclassroom.go או gapi.sharetoclassroom.render.

כשמשתמשים בעומס המפורש יחד עם הפעלות עיבוד והפעלות שמפנות לקונטיינרים ספציפיים בדף, אתם מונעים מהסקריפט לעבור את כל ה-DOM, וזה יכול לקצר את זמן הרינדור של הלחצן. עיינו בדוגמאות של gapi.sharetoclassroom.go ושל gapi.sharetoclassroom.render.

שיתוף מאפייני התג

הפרמטרים האלה קובעים את ההגדרות של כל לחצן. אפשר להגדיר את הפרמטרים האלה כצמדים של attribute=value בתגי שיתוף, או כצמדי JavaScript key:value במסגרת קריאה ל-gapi.sharetoclassroom.render.

מאפיין	ערך	ברירת המחדל	תיאור
body	מחרוזת	null	הגדרת הטקסט בגוף הפריט לשיתוף ב-Classroom.
courseid	מחרוזת	null	אם מגדירים את מזהה הקורס, המערכת מגדירה אותו לבחירה מראש בתפריט 'בחירת כיתה' שמוצג אחרי שמשתמשים לוחצים על לחצן השיתוף. המשתמש יכול לשנות את הערך שנבחר מראש, לפי הצורך.
itemtype	announcement, assignment, material או question	null	תיבת הדו-שיח ליצירה תוצג באופן אוטומטי אחרי שהמשתמש יבחר בקורס בפעם הראשונה (או מיד אם צוין גם courseid). אם התלמידים בוחרים כיתה או שהמורה בוחר/ת בכיתה, המערכת תתעלם מהערך הזה.
locale	תג שפה התואם ל-RFC 3066	en-US	הגדרת השפה של הלחצן aria-label למטרות נגישות. היא אינה משפיעה על השפה של תיבת הדו-שיח של השיתוף שמופיעה כאשר המשתמש לוחץ על הלחצן: המושפעת מהעדפות הדפדפן של המשתמש.
onsharecomplete	מחרוזת	null	אם השדה הזה צוין, היא מגדירה את השם של פונקציה במרחב השמות הגלובלי. קריאה לפעולה מתבצעת כשהמשתמש מסיים לשתף את הקישור שלכם. אם מעבירים ארגומנטים באמצעות פרמטרים ל-gapi.sharetoclassroom.render, אפשר להשתמש גם בפונקציה עצמה. התכונה הזו אינה פועלת ב-Internet Explorer (ראו בהמשך)
onsharestart	מחרוזת	null	אם המדיניות הזאת מוגדרת, היא מגדירה את השם של הפונקציה במרחב השמות הגלובלי שנקרא כשתיבת הדו-שיח של השיתוף נפתחת. אם מעבירים ארגומנטים באמצעות פרמטרים ל-gapi.sharetoclassroom.render, אפשר להשתמש גם בפונקציה עצמה. התכונה הזו אינה פועלת ב-Internet Explorer (ראו בהמשך).
size	INT	null	המדיניות הזו מגדירה את הגודל בפיקסלים של לחצן השיתוף. אם לא מציינים את המידה, הלחצן משתמש ב-32.
theme	classic, dark או light	classic	מגדיר את סמל הלחצן של העיצוב שנבחר.
title	מחרוזת	null	הגדרת שם הפריט לשיתוף ב-Classroom.
url	כתובת אתר לשיתוף	null	מגדיר את כתובת ה-URL לשיתוף ב-Classroom. אם מגדירים את המאפיין הזה באמצעות שימוש במאפיין gapi.sharetoclassroom.render, אין להשתמש בתו בריחה (escape) של כתובת ה-URL.

הנחיות לגבי לחצני שיתוף ב-Classroom

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

עיצוב	דוגמה
קלאסית
כהה
בהיר

התאמה אישית

אנחנו מעדיפים שלא תשנה או תעצב את הסמל מחדש בשום צורה. עם זאת, אם אתם מציגים באפליקציה מספר סמלים של רשתות חברתיות של צד שלישי יחד, תוכלו להתאים אישית את סמל Google Classroom כך שיתאים לסגנון של האפליקציה. אם בחרתם לעשות את זה, ודאו שכל הלחצנים מותאמים אישית בסגנון דומה ושכל ההתאמות האישיות תואמות להנחיות המיתוג של Classroom. כדי לשלוט באופן מלא במראה ובהתנהגות של לחצן השיתוף, תוכלו להתחיל את השיתוף דרך כתובת URL במבנה הבא: https://classroom.google.com/share?url={url-to-share}.

ממשק API של JavaScript

לחצן השיתוף ב-JavaScript מגדיר שתי פונקציות של רינדור לחצנים במרחב השמות gapi.sharetoclassroom. אם משביתים את העיבוד האוטומטי על ידי הגדרת הניתוחים לערך explicit, צריך להפעיל אחת מהפונקציות האלה.

שיטה	תיאור
gapi.sharetoclassroom.render( container, parameters )	מעבד את מאגר התגים שצוין כלחצן שיתוף. מאגר מאגר התגים שיש לעבד כלחצן השיתוף. צריך לציין את המזהה של מאגר התגים (מחרוזת) או את רכיב ה-DOM עצמו. פרמטרים אובייקט שמכיל מאפייני תג בתור זוגות key=value. לדוגמה: {"size": "300", "theme": "light"}.
gapi.sharetoclassroom.go( opt_container )	מעבד את כל התגים והמחלקות של לחצני השיתוף במאגר התגים שצוין. יש להשתמש בפונקציה הזו רק אם הפרמטר parsetags מוגדר לערך explicit, ויכול להיות שהפעולה הזו תתבצע בגלל סיבות של ביצועים. מאגר_אופטי המאגר המכיל את תגי לחצן השיתוף לעיבוד. ציון המזהה של מאגר התגים (מחרוזת) או של רכיב ה-DOM עצמו. אם הפרמטר opt_container יושמט, כל תגי לחצן השיתוף בדף יעברו עיבוד.

דוגמאות

דף בסיסי

<html>
  <head>
    <title>Classroom demo: Basic page</title>
    <link href="http://www.example.com" />
    <script src="https://apis.google.com/js/platform.js" async defer>
    </script>
  </head>
  <body>
    <g:sharetoclassroom size=32 url="http://google.com"></g:sharetoclassroom>
  </body>
</html>

טעינה מפורשת של תגים בקבוצת משנה של ה-DOM

<html>
  <head>
    <title>Demo: Explicit load of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <div id="content">
      <div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>
    </div>
    <script>
      gapi.sharetoclassroom.go("content");
    </script>
  </body>
</html>

עיבוד בוטה

<html>
  <head>
    <title>Demo: Explicit render of a Classroom share button</title>
    <link href="http://www.example.com" />
    <script>
      window.___gcfg = {
        parsetags: 'explicit'
      };
      function renderWidget() {
        gapi.sharetoclassroom.render("widget-div",
            {"url": "http://www.google.com"} );
      }
    </script>
    <script src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <a href="#" onClick="renderWidget();">Render the Classroom share button</a>
    <div id="widget-div"></div>
  </body>
</html>

שאלות נפוצות

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

איך אפשר לבדוק את השילוב של לחצן השיתוף ב-Classroom?

אפשר לבקש חשבונות בדיקה ב-Classroom כדי לבדוק שיתוף ב-Classroom דרך השילוב.

האם אפשר להציב כמה לחצנים בדף אחד שבו כולם משתמשים בכתובות URL שונות?

כן. השתמשו במאפיין url כפי שצוין בפרמטרים של תג השיתוף, כדי לציין שכתובת ה-URL תשותף עם Classroom.

איפה להציב את לחצן השיתוף בדפים שלי?

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

האם יש השפעה על זמן האחזור מהמיקום של התג <script> בדף?

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

האם צריך לכלול את התג <script> לפני תג השיתוף?

לא, אפשר לכלול את התג <script> בכל מקום בדף.

האם צריך לכלול את התג <script> לפני שתג <script> אחר מפעיל את אחת השיטות בקטע JavaScript API?

כן, אם משתמשים באחת מהשיטות של JavaScript API, צריך למקם אותן בדף אחרי ההכללה של <script>. כמו כן, לא ניתן להשתמש ב-async defer באף אחת משיטות ה-API של JavaScript.

האם צריך להשתמש במאפיין url?

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

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

הקוד של לחצן השיתוף מחייב סקריפט מהשרתים של Google. השגיאה הזו עשויה להופיע על ידי הכללת הסקריפט דרך http:// בדף שנטען דרך https://. מומלץ להשתמש ב-https:// כדי לכלול את הסקריפט:

<script src="https://apis.google.com/js/platform.js" async defer></script>

אילו דפדפני אינטרנט נתמכים?

לחצן השיתוף של Classroom תומך באותם דפדפני אינטרנט שבהם משתמשים ממשק האינטרנט של Classroom, בדפדפנים כמו Chrome, Firefox® , Internet Explorer® או Safari® . הערה: הפונקציות שצוינו עבור onsharestart ו-onsharecomplete לא מבוצעות למשתמשים ב-Internet Explorer.

אילו נתונים נשלחים אל Classroom כשלוחצים על לחצן השיתוף ב-Classroom?

כשמשתמשים לוחצים על לחצן השיתוף, הם מתבקשים להיכנס באמצעות חשבון G Suite for Education שלהם. אחרי האימות, חשבון המשתמש והמאפיין url יישלחו ל-Classroom כדי להשלים את הפרסום.