Classroom'da Paylaş Düğmesi

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.

Özellik Değer Varsayılan Açıklama
body string null Classroom'da paylaşılacak öğe gövde metnini ayarlar.
courseid string null Belirtilmişse Ders Kimliği'ni, bir kullanıcı paylaş düğmesini tıkladıktan sonra görüntülenen "Sınıf seç" menüsünde önceden seçilecek şekilde ayarlar. Kullanıcı, gerekirse önceden seçilen bu değeri değiştirebilir.
itemtype announcement, assignment, material veya question null Kullanıcı ilk kez bir ders seçtikten sonra (veya courseid belirtilmişse hemen) oluşturma iletişim kutusu otomatik olarak gösterilir. Öğrenci bir sınıfı veya öğretmen, öğrenci olduğu bir sınıfı seçerse bu değer yoksayılır.
locale RFC 3066 uyumlu dil etiketi en-US Erişilebilirlik amacıyla aria-label düğmesinin dilini ayarlar. Bu ayar, kullanıcı düğmeyi tıkladığında görünen paylaşım iletişim kutusunun dilini etkilemez. Bu dil, kullanıcının tarayıcı tercihlerinden etkilenir.
onsharecomplete string null Belirtilmişse, kullanıcı bağlantınızı paylaşmayı bitirdiğinde çağrılan genel ad alanındaki bir işlevin adını ayarlar. Bağımsız değişkenlerinizi parametreler aracılığıyla gapi.sharetoclassroom.render işlevine iletirseniz işlevin kendisini de kullanabilirsiniz. Bu özellik Internet Explorer'da çalışmaz (aşağıya bakın)
onsharestart string null Belirtilirse paylaşım iletişim kutusu açıldığında çağrılan genel ad alanındaki bir işlevin adını ayarlar. Bağımsız değişkenlerinizi parametreler aracılığıyla gapi.sharetoclassroom.render işlevine iletirseniz işlevin kendisini de kullanabilirsiniz. Bu özellik Internet Explorer'da çalışmaz (aşağıya bakın).
size int null Paylaş düğmesinin boyutunu piksel cinsinden ayarlar. Boyut atlanırsa düğme 32 değerini kullanır.
theme classic, dark veya light classic Seçili tema için düğme simgesini ayarlar.
title string null Classroom'da paylaşılacak öğe başlığını ayarlar.
url Paylaşılacak URL null Classroom'da paylaşılacak URL'yi ayarlar. Bu özelliği gapi.sharetoclassroom.render kullanarak ayarladıysanız URL'de çıkış yapmamalısınız.

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.

Yöntem Açıklama
gapi.sharetoclassroom.render(
 container,
 parameters
)
Belirtilen kapsayıcıyı paylaşım düğmesi olarak oluşturur.
kapsayıcı
Paylaş düğmesi olarak oluşturulacak kapsayıcı. Kapsayıcının (dize) kimliğini veya DOM öğesinin kendisini belirtin.
Parametreler
Etiket özelliklerini key=value çiftleri olarak içeren bir nesne. Örneğin, {"size": "300", "theme": "light"}.
gapi.sharetoclassroom.go(
 opt_container
)
Belirtilen kapsayıcıdaki tüm paylaş düğmesi etiketlerini ve sınıflarını oluşturur. Bu işlev yalnızca parsetags, explicit olarak ayarlanmışsa kullanılmalıdır. Bu işlemi performans nedeniyle yapabilirsiniz.
opt_container
Oluşturulacak paylaş düğmesi etiketlerini içeren kapsayıcı. Kapsayıcının (dize) kimliğini veya DOM öğesinin kendisini belirtin. opt_container parametresi atlanırsa sayfadaki tüm paylaş düğmesi etiketleri oluşturulur.

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