يمكنك إضافة وتخصيص زر المشاركة في Classroom لتلبية احتياجات موقعك الإلكتروني، مثل تعديل حجم الزر وتقنية التحميل. من خلال إضافة زر المشاركة في Classroom إلى موقعك الإلكتروني، فإنك تسمح للمستخدمين بمشاركة المحتوى الخاص بك في صفوفهم وزيادة حركة الزيارات إلى موقعك.
البدء
زر بسيط
إن أسهل طريقة لتضمين زر المشاركة في Classroom على صفحتك هي تضمين مورد جافا سكريبت اللازم وإضافة علامة زر المشاركة:
<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.
عند استخدام التحميل الصريح مع الانتقال وعرض الاستدعاءات التي تشير إلى حاويات معينة في صفحتك، فإنك تمنع النص البرمجي من اجتياز نموذج DOM بأكمله، مما يمكن أن يؤدي إلى تحسين وقت عرض الزر. يمكنك الاطّلاع على
gapi.sharetoclassroom.go وgapi.sharetoclassroom.render
الأمثلة.
مشاركة سمات العلامة
تتحكم هذه المعلمات في إعدادات كل زر. يمكنك ضبط هذه المعلمات كأزواج attribute=value على علامات زر المشاركة أو على هيئة أزواج key:value في JavaScript في استدعاء إلى 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 |
عنوان URL المطلوب مشاركته | null | يضبط عنوان 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 ) |
لعرض الحاوية المحددة كزر مشاركة.
|
gapi.sharetoclassroom.go( opt_container ) |
لعرض جميع علامات زر المشاركة والفئات في الحاوية المحددة.
يجب استخدام هذه الدالة فقط في حال ضبط parsetags على
explicit، وهو ما قد يحدث لأسباب متعلقة بالأداء.
|
أمثلة
الصفحة الأساسية
<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 مع
أي من طرق JavaScript API.
هل عليّ استخدام السمة 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 لإكمال المشاركة.