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>

स्क्रिप्ट को एचटीटीपीएस प्रोटोकॉल का इस्तेमाल करके लोड किया जाना चाहिए. साथ ही, पेज पर किसी भी पॉइंट से बिना किसी पाबंदी के उसे शामिल किया जा सकता है. ज़्यादा जानकारी के लिए, अक्सर पूछे जाने वाले सवाल देखें.

क्लास एट्रिब्यूट को g-sharetoclassroom पर सेट करके और किसी भी बटन एट्रिब्यूट से पहले data- जोड़कर, HTML5-मान्य शेयर टैग का भी इस्तेमाल किया जा सकता है.

<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>

कॉन्फ़िगरेशन

Classroom में यूआरएल शेयर करने के लिए सेट करना

Classroom में कौनसा यूआरएल शेयर किया जाता है, यह बटन के url एट्रिब्यूट से तय किया जाता है. इस एट्रिब्यूट से साफ़ तौर पर, शेयर किए जाने वाले टारगेट यूआरएल के बारे में जानकारी मिलती है. साथ ही, शेयर करने वाले बटन को रेंडर करने के लिए इसे सेट करना ज़रूरी है.

स्क्रिप्ट टैग पैरामीटर

ये पैरामीटर ऐसे <script /> एलिमेंट में तय किए जाते हैं जिसे platform.js स्क्रिप्ट लोड करने से पहले चलाना ज़रूरी होता है. पैरामीटर, पूरे वेब पेज पर इस्तेमाल होने वाले, बटन लोड करने के तरीके को कंट्रोल करते हैं.

इन पैरामीटर का इस्तेमाल करने की अनुमति है:

onload

पेज लोड होने के बाद, पेज पर मौजूद सभी शेयर करने वाले बटन अपने-आप रेंडर हो जाते हैं. स्थगित एक्ज़ीक्यूशन ऑनलोड का उदाहरण देखें.

अश्लील

शेयर करने वाले बटन सिर्फ़ तब रेंडर किए जाते हैं, जब gapi.sharetoclassroom.go या gapi.sharetoclassroom.render को अश्लील कॉल किया जाता है.

जब आपके पेज में खास कंटेनर को पॉइंट करने वाले गो और रेंडर कॉल के साथ साफ़ तौर पर लोड किए गए लोड का इस्तेमाल किया जाता है, तब स्क्रिप्ट को पूरे DOM को रूट करने से रोक दिया जाता है. इससे बटन रेंडरिंग का समय बढ़ सकता है. gapi.sharetoclassroom.go और gapi.sharetoclassroom.render उदाहरण देखें.

टैग एट्रिब्यूट शेयर करना

ये पैरामीटर हर बटन की सेटिंग को कंट्रोल करते हैं. इन पैरामीटर को शेयर बटन टैग पर attribute=value पेयर के तौर पर या gapi.sharetoclassroom.render को कॉल करते समय, JavaScript key:value पेयर के तौर पर सेट किया जा सकता है.

एट्रिब्यूट	वैल्यू	डिफ़ॉल्ट	ब्यौरा
body	स्ट्रिंग	शून्य	कक्षा में शेयर करने के लिए आइटम के मुख्य टेक्स्ट को सेट करता है.
courseid	स्ट्रिंग	शून्य	अगर बताया गया है, तो कोर्स आईडी को इस तरह सेट किया जा सकता है कि जब उपयोगकर्ता 'शेयर करें' बटन पर क्लिक करे, तब उसे "क्लास चुनें" मेन्यू में पहले से चुना जा सके. ज़रूरत पड़ने पर, उपयोगकर्ता पहले से चुनी गई इस वैल्यू को बदल सकता है.
itemtype	announcement, assignment, material या question	शून्य	इससे, उपयोगकर्ता के पहली बार कोर्स चुनने के बाद (या अगर courseid तय किया गया हो, तो तुरंत) बनाने वाला डायलॉग बॉक्स अपने-आप दिखेगा. अगर कोई छात्र/छात्रा कोई कक्षा चुनता है या शिक्षक किसी ऐसी कक्षा को चुनता है जिसमें वह छात्र/छात्रा है, तो इस वैल्यू को अनदेखा कर दिया जाता है.
locale	आरएफ़सी 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	शून्य	Classroom में शेयर करने के लिए यूआरएल सेट करता है. अगर gapi.sharetoclassroom.render का इस्तेमाल करके इस एट्रिब्यूट को सेट किया जाता है, तो आपको यूआरएल को एस्केप नहीं करना चाहिए.

Classroom में शेयर करने के लिए उपलब्ध बटन से जुड़े दिशा-निर्देश

Classroom शेयर बटन का डिसप्ले, कम से कम साइज़ से जुड़े दिशा-निर्देशों और मिलते-जुलते कलर/बटन टेंप्लेट के मुताबिक होना चाहिए. यह बटन कई साइज़ में काम करता है, जिसमें कम से कम 32 पिक्सल साइज़ से लेकर ज़्यादा से ज़्यादा 96 पिक्सल तक का साइज़ हो सकता है.

थीम	उदाहरण
क्लासिक
गहरा
हल्का

पसंद के मुताबिक बनाएं

हम चाहते हैं कि आप किसी भी तरह से आइकॉन को न बदलें या उसे रीमेक न करें. हालांकि, अगर आपने अपने ऐप्लिकेशन पर तीसरे पक्ष के एक से ज़्यादा सोशल मीडिया आइकॉन एक साथ दिखाया है, तो Classroom के आइकॉन को अपनी पसंद के मुताबिक बनाकर, ऐप्लिकेशन के स्टाइल के हिसाब से बदला जा सकता है. अगर आप ऐसा करते हैं, तो कृपया पक्का करें कि सभी बटन एक जैसी स्टाइल से कस्टमाइज़ किए गए हैं और सभी कस्टमाइज़ेशन Classroom ब्रैंडिंग दिशा-निर्देशों का पालन करते हैं. अगर आपको शेयर बटन के दिखने और काम करने के तरीके को पूरी तरह से कंट्रोल करना है, तो इस स्ट्रक्चर के यूआरएल से शेयर शुरू करें: https://classroom.google.com/share?url={url-to-share}.

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 टेस्ट खातों का अनुरोध किया जा सकता है.

क्या एक पेज पर अलग-अलग यूआरएल वाले कई बटन रखे जा सकते हैं?

हां. Classroom में यूआरएल शेयर करने के लिए, शेयर टैग पैरामीटर में बताए गए url एट्रिब्यूट का इस्तेमाल करें.

मुझे अपने पेजों पर 'शेयर करें' बटन कहां डालना चाहिए?

आप अपने पेज और उपयोगकर्ताओं को सबसे अच्छी तरह जानते हैं. इसलिए, हमारा सुझाव है कि आप बटन को वहां लगाएं जहां आपको लगता है कि वह सबसे असरदार होगा. अक्सर पेज के ऊपर, पेज के शीर्षक के पास और शेयर करने के लिंक के पास एक अच्छी जगह होती है. शेयर करें बटन को किसी कॉन्टेंट के शुरू और आखिर में रखना भी असरदार हो सकता है.

क्या पेज में <script> टैग की जगह से, इंतज़ार के समय का कोई असर पड़ता है?

नहीं, <script> टैग के प्लेसमेंट से, इंतज़ार के समय पर कोई खास असर नहीं पड़ता. हालांकि, टैग को दस्तावेज़ के नीचे, </body> बंद टैग से ठीक पहले, टैग करके पेज के लोड होने की रफ़्तार बढ़ाई जा सकती है.

क्या <script> टैग को शेयर टैग से पहले शामिल करना ज़रूरी है?

नहीं, <script> टैग को पेज पर कहीं भी शामिल किया जा सकता है.

क्या <script> टैग को JavaScript API सेक्शन में दिए गए किसी तरीके को कॉल करने से पहले, <script> टैग को शामिल करना ज़रूरी है?

हां, अगर JavaScript एपीआई के किसी भी तरीके का इस्तेमाल किया जाता है, तो उन्हें <script> में शामिल किए जाने के बाद पेज पर डाला जाना चाहिए. async defer का इस्तेमाल JavaScript API के किसी भी तरीके के साथ भी नहीं किया जा सकता.

क्या मुझे url एट्रिब्यूट का इस्तेमाल करना होगा?

url एट्रिब्यूट की वैल्यू देना ज़रूरी है. url को साफ़ तौर पर सेट न करने पर, शेयर बटन रेंडर नहीं होगा. ज़्यादा जानकारी के लिए टारगेट यूआरएल शेयर करें देखें.

शेयर करें बटन वाले पेज देखते समय, मेरे कुछ उपयोगकर्ताओं को सुरक्षा से जुड़ी चेतावनी मिलती है. मैं इससे कैसे छुटकारा पाऊं?

शेयर बटन कोड के लिए Google के सर्वर से एक स्क्रिप्ट की आवश्यकता होती है. https:// के ज़रिए लोड किए गए पेज पर, http:// के ज़रिए स्क्रिप्ट शामिल करने पर, आपको यह गड़बड़ी मिल सकती है. हमारा सुझाव है कि स्क्रिप्ट को शामिल करने के लिए, https:// का इस्तेमाल करें:

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

पेज को किन वेब ब्राउज़र पर इस्तेमाल किया जा सकता है?

Classroom में शेयर करने की सुविधा वाला बटन, Classroom वेब इंटरफ़ेस की तरह ही काम करता है. साथ ही, Chrome, Firefox®, Internet Explorer® या Safari® जैसे ब्राउज़र पर भी यह बटन काम करता है. ध्यान दें: शेयर शुरू करने और शेयर करने पर पूरी जानकारी के लिए तय किए गए फ़ंक्शन, Internet Explorer के उपयोगकर्ताओं के लिए ज़रूरी नहीं हैं.

जब Classroom में शेयर करने वाले बटन पर क्लिक किया जाता है, तो Classroom को कौनसा डेटा भेजा जाता है?

जब कोई उपयोगकर्ता शेयर करें बटन पर क्लिक करता है, तो उसे अपने शिक्षा के लिए G Suite खाते से साइन इन करने के लिए कहा जाता है. पुष्टि होने के बाद, पोस्ट को पूरा करने के लिए उपयोगकर्ता खाता और url एट्रिब्यूट को Classroom में भेजा जाता है.