إضافة زر مشاركة في Classroom

زر المشاركة في 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 من خلال ضبط سمة الفئة على g-sharetoclassroom، وإضافة data- كبادئة لأي سمة زر.

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

بشكل تلقائي، يتجاوز النص البرمجي المضمَّن نموذج كائن المستند (DOM) ويعرض علامات المشاركة على شكل أزرار. يمكنك تحسين وقت العرض على الصفحات الكبيرة باستخدام واجهة برمجة تطبيقات JavaScript لاجتياز عنصر واحد فقط داخل الصفحة أو لعرض عنصر معيّن كزر مشاركة.

التنفيذ المؤجَّل باستخدام مَعلمتَي 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.

عند استخدام التحميل الصريح بالتزامن مع استدعاءات go وعرض الاستدعاءات التي تشير إلى حاويات معيّنة في صفحتك، ستمنع النص البرمجي من اجتياز كائن DOM بالكامل، ما قد يحسّن وقت عرض الزر. يمكنك الاطّلاع على أمثلة gapi.sharetoclassroom.go وgapi.sharetoclassroom.render.

مشاركة سمات العلامات

تتحكم هذه المعلمات في إعدادات كل زر. يمكنك ضبط هذه المَعلمات كأزواج attribute=value على علامات أزرار المشاركة، أو كأزواج key:value من JavaScript في استدعاء gapi.sharetoclassroom.render.

السمة القيمة تلقائي الوصف
body سلسلة قيمة فارغة ضبط النص الأساسي للعنصر لمشاركته مع Classroom
courseid سلسلة قيمة فارغة في حال تحديد ذلك، يتم ضبط رقم تعريف الدورة التدريبية للاختيار مسبقًا في قائمة "اختيار صف" التي تظهر بعد أن ينقر المستخدم على زر المشاركة. يمكن للمستخدم تغيير هذه القيمة المختارة مسبقًا، إذا لزم الأمر.
itemtype announcement أو assignment أو material أو question قيمة فارغة سيؤدي ذلك إلى عرض مربّع حوار الإنشاء تلقائيًا بعد أن يختار المستخدم دورة تدريبية لأول مرة (أو على الفور في حال تحديد courseid أيضًا). في حال اختار طالب صفًا أو معلِّمًا اختار الصف الدراسي الذي يكون طالبًا فيه، يتم تجاهل هذه القيمة.
locale علامة اللغة المتوافقة مع RFC 3066 en-US تضبط لغة الزر aria-label لأغراض تسهيل الاستخدام. ولا يؤثّر ذلك في لغة مربّع حوار المشاركة الذي يظهر عندما ينقر المستخدم على الزرّ، لأنّ ذلك تتأثر بالإعدادات المفضّلة لمتصفّح المستخدم.
onsharecomplete سلسلة قيمة فارغة في حال تحديد ذلك، يتم ضبط اسم الدالة في مساحة الاسم العامة والتي يتم استدعاؤها عندما ينتهي المستخدم من مشاركة الرابط. إذا مررت الوسيطات من خلال المعلمات إلى gapi.sharetoclassroom.render، يمكنك أيضًا استخدام الدالة نفسها. لا تعمل هذه الميزة على متصفّح Internet Explorer (انظر أدناه).
onsharestart سلسلة قيمة فارغة في حال تحديد ذلك، يتم ضبط اسم الدالة في مساحة الاسم العامة التي يتم استدعاؤها عند فتح مربّع حوار المشاركة. إذا مررت الوسيطات من خلال المعلمات إلى gapi.sharetoclassroom.render، يمكنك أيضًا استخدام الدالة نفسها. لا تعمل هذه الميزة على متصفّح Internet Explorer (انظر أدناه).
size تدخُّل دفاعي قيمة فارغة لضبط الحجم بالبكسل لزر المشاركة. إذا تم إسقاط الحجم، يستخدم الزر 32.
theme classic أو dark أو light classic لضبط رمز الزر للمظهر الذي تم اختياره.
title سلسلة قيمة فارغة ضبط عنوان العنصر لمشاركته على Classroom
url عنوان URL المطلوب مشاركته قيمة فارغة لضبط عنوان URL لمشاركته مع Classroom. في حال ضبط هذه السمة باستخدام gapi.sharetoclassroom.render، يجب عدم تخطي عنوان URL.

إرشادات حول زر المشاركة في Classroom

يجب أن يتوافق عرض زر المشاركة في Classroom مع إرشادات الحد الأدنى للحجم ونماذج الألوان/الأزرار ذات الصلة. يدعم الزر مجموعة متنوعة من الأحجام، بدءًا من الحد الأدنى للحجم وهو 32 بكسل إلى حد أقصى 96 بكسل.

المظهر مثال
كلاسيكية
داكن
فاتح

التخصيص

نفضّل عدم تغيير الرمز أو إعادة إنشائه بأي طريقة. ومع ذلك، إذا عرضت معًا عدة رموز اجتماعية تابعة لجهات خارجية في تطبيقك، يمكنك تخصيص رمز Classroom ليتناسب مع نمط تطبيقك. إذا فعلت ذلك، يُرجى التأكُّد من تخصيص جميع الأزرار باستخدام نمط مشابه، ومن أنّ أي تخصيصات تتّبع إرشادات وضع العلامة التجارية في Classroom. إذا أردت التحكّم بشكل كامل في مظهر زر المشاركة وسلوكه، يمكنك بدء المشاركة عبر عنوان URL بالبنية التالية: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

يحدّد رمز 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، يجب وضعها في الصفحة بعد تضمين <script>. ولا يمكنك أيضًا استخدام async defer مع أي طريقة من طرق واجهة برمجة تطبيقات 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 للتعليم". بعد المصادقة، يتم إرسال حساب المستخدم وسمة url إلى Classroom لإكمال عملية النشر.