Classroom'da Paylaş Düğmesi

Web sitenizin ihtiyaçlarını karşılamak için (ör. düğme boyutunu ve yükleme tekniğini değiştirme) Classroom paylaşım düğmesini ekleyebilir ve özelleştirebilirsiniz. Classroom paylaş düğmesini web sitenize ekleyerek kullanıcılarınızın, içeriğinizi sınıflarıyla paylaşmasına ve sitenize trafik çekmesine olanak sağlamış olursunuz.

Kullanmaya başlama

Basit bir düğme

Sayfanıza bir Classroom paylaşım düğmesi eklemenin en kolay yöntemi, gerekli JavaScript kaynağını içermek ve bir paylaş düğmesi etiketi eklemektir:

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

Komut dosyası, HTTPS protokolü kullanılarak yüklenmelidir ve sayfadaki herhangi bir noktadan kısıtlama olmaksızın eklenebilir. Daha fazla bilgi için SSS bölümüne göz atın.

Ayrıca, class özelliğini g-sharetoclassroom olarak ayarlayıp tüm düğme özelliklerinin önüne data- ekleyerek HTML5 için geçerli bir paylaşım etiketi kullanabilirsiniz.

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

Varsayılan olarak, dahil edilen komut dosyası DOM'da gezinir ve paylaşım etiketlerini düğme olarak oluşturur. Sayfa içinde yalnızca tek bir öğeyi incelemek veya belirli bir öğeyi paylaş düğmesi olarak oluşturmak için JavaScript API'yi kullanarak büyük sayfalarda oluşturma süresini artırabilirsiniz.

onLoad ve komut dosyası etiketi parametreleriyle ertelenmiş yürütme

Düğme kodunun ne zaman yürütüldüğünü belirlemek için parsetags komut dosyası etiketi parametresini onload (varsayılan) veya explicit değerine ayarlayın. Komut dosyası etiketi parametrelerini belirtmek için aşağıdaki söz dizimini kullanın:

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

Yapılandırma

Classroom'da paylaşılacak URL'yi ayarlama

Classroom ile paylaşılan URL, düğmenin url özelliği tarafından belirlenir. Bu özellik, paylaşılacak hedef URL'yi açıkça tanımlar ve paylaş düğmesinin oluşturulması için ayarlanmalıdır.

Komut dosyası etiket parametreleri

Bu parametreler, platform.js komut dosyasını yüklemeden önce çalışması gereken bir <script /> öğesinde tanımlanır. Parametreler, web sayfasının tamamında kullanılan düğme yükleme mekanizmasını kontrol eder.

İzin verilen parametreler:

onload

Sayfadaki tüm paylaş düğmeleri, sayfa yüklendikten sonra otomatik olarak oluşturulur. Ertelenen yürütme onLoad örneğini inceleyin.

müstehcen

Paylaş düğmeleri yalnızca gapi.sharetoclassroom.go veya gapi.sharetoclassroom.render'a yapılan açık çağrılarda oluşturulur.

Açık yüklemeyi go ve oluşturucu sayfanızdaki belirli kapsayıcılara işaret eden çağrılarıyla birlikte kullandığınızda, komut dosyasının tüm DOM'da geçiş yapmasını engellersiniz ve bu da düğme oluşturma süresini iyileştirebilir. gapi.sharetoclassroom.go ve gapi.sharetoclassroom.render örneklerine bakın.

Etiket özelliklerini paylaşma

Bu parametreler her düğmenin ayarlarını kontrol eder. Bu parametreleri, paylaş düğmesi etiketlerinde attribute=value çiftleri veya gapi.sharetoclassroom.render çağrısında JavaScript key:value çiftleri olarak ayarlayabilirsiniz.

Classroom paylaşım düğmesi yönergeleri

Classroom'da Paylaş Düğmesinin görüntülenmesi, minimum boyut yönergelerimize ve ilgili renk/düğme şablonlarına uygun olmalıdır. Düğme, minimum 32 pikselden en fazla 96 piksele kadar çeşitli boyutları destekler.

Tema	Örnek
Klasik
Koyu renk
Açık renk

Özelleştirme

Simgeyi hiçbir şekilde değiştirmemenizi veya yeniden oluşturmamanızı tercih ederiz. Ancak, uygulamanızda birden fazla üçüncü taraf sosyal medya simgesini birlikte görüntülüyorsanız, Classroom simgesini uygulamanızın stiline uyacak şekilde özelleştirebilirsiniz. Bunu yaparsanız lütfen tüm düğmelerin benzer bir stil kullanılarak özelleştirildiğinden ve tüm özelleştirmelerin Classroom markalama yönergelerine uygun olduğundan emin olun. Paylaş düğmesinin görünümünü ve davranışını tam olarak kontrol etmek istiyorsanız paylaşımı şu yapının URL'si ile başlatabilirsiniz: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

Paylaşım düğmesi JavaScript'i, gapi.sharetoclassroom ad alanı altında iki düğme oluşturma işlevi tanımlar. Ayrıştırma etiketlerini explicit değerine ayarlayarak otomatik oluşturmayı devre dışı bırakırsanız bu işlevlerden birini çağırmanız gerekir.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Örnekler

Temel sayfa

<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'un bir alt kümesindeki etiketleri açık bir şekilde yükleme

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

Açıkça oluşturma

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

Sık sorulan sorular

Aşağıdaki SSS bölümünde teknik hususlar ve uygulama ayrıntıları ele alınmaktadır. Daha fazla kaynak için genel SSS sayfasına göz atın.

Classroom paylaşım düğmesi entegrasyonumu nasıl test edebilirim?

Entegrasyonunuzdan Classroom'daki paylaşımı test etmek için Classroom test hesapları isteyebilirsiniz.

Tek bir sayfaya, farklı URL'leri olan birden fazla düğme yerleştirebilir miyim?

Evet. URL'nin Classroom'la paylaşılacağını belirtmek için url özelliğini paylaşım etiketi parametrelerinde belirtildiği gibi kullanın.

Paylaş düğmesini sayfalarımda nereye yerleştirmeliyim?

Sayfanızı ve kullanıcılarınızı en iyi siz tanırsınız. Bu nedenle düğmeyi en etkili olacağını düşündüğünüz yere koymanızı öneririz. Ekranın üst kısmında, sayfa başlığının yanında, paylaşım bağlantılarına yakın bir konum genellikle iyi bir konumdur. Ayrıca paylaş düğmesini oluşturulan bir içeriğin hem sonuna hem de başına yerleştirmek de etkili olabilir.

Sayfadaki <script> etiketinin konumundan kaynaklanan herhangi bir gecikme etkisi var mı?

Hayır, <script> etiketinin yerleştirilmesinin önemli bir gecikme etkisi olmaz. Ancak, etiketi dokümanın en altına, </body> kapatma etiketinin hemen öncesine yerleştirerek sayfanın yükleme hızını artırabilirsiniz.

<script> etiketinin paylaşım etiketinden önce eklenmesi gerekir mi?

Hayır, <script> etiketi sayfanın herhangi bir yerine eklenebilir.

<script> etiketinin, başka bir <script> etiketinin JavaScript API bölümündeki yöntemlerden birini çağırmasından önce eklenmesi gerekir mi?

Evet, JavaScript API yöntemlerinden herhangi birini kullanıyorsanız bunların sayfaya <script> eklendikten sonra yerleştirilmesi gerekir. async defer öğesini, JavaScript API yöntemlerinin hiçbiriyle de kullanamazsınız.

url özelliğini kullanmam gerekir mi?

url özelliği zorunludur. url açıkça belirtilmezse paylaş düğmesi oluşturulmaz. Daha fazla bilgi için hedef URL'yi paylaşma bölümüne bakın.

Bazı kullanıcılarım, paylaş düğmesiyle sayfaları görüntülediklerinde bir güvenlik uyarısı alıyor. Bu sorun nasıl çözülebilir?

Paylaş düğmesi kodu, Google sunucularından bir komut dosyası gerektirir. https:// aracılığıyla yüklenen bir sayfaya http:// aracılığıyla komut dosyasını ekleyerek bu hatayı alabilirsiniz. Komut dosyasını eklemek için https:// kullanmanızı öneririz:

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

Hangi web tarayıcıları destekleniyor?

Classroom paylaşım düğmesi Classroom web arayüzüyle aynı web tarayıcılarını (Chrome, Firefox®, Internet Explorer® veya Safari® gibi) destekler. Not: Onsharestart ve onsharecomplete için belirtilen işlevler Internet Explorer kullanıcıları için çağrılmaz.

Classroom paylaşım düğmesini tıkladığınızda Classroom'a hangi veriler gönderilir?

Bir kullanıcı paylaş düğmesini tıkladığında, Eğitim için G Suite hesabıyla oturum açması istenir. Kimlik doğrulamadan sonra, kullanıcı hesabı ve url özelliği, yükleme işlemini tamamlamak için Classroom'a gönderilir.