Tombol Berbagi Classroom

Anda dapat menambahkan dan menyesuaikan tombol berbagi Classroom untuk memenuhi kebutuhan situs Anda, seperti mengubah ukuran tombol dan teknik pemuatan. Dengan menambahkan tombol berbagi Classroom ke situs, Anda mengizinkan pengguna untuk membagikan konten Anda ke kelas mereka dan mendorong traffic ke situs Anda.

Memulai

Tombol sederhana

Metode termudah untuk menyertakan tombol berbagi Classroom di halaman Anda adalah menyertakan resource JavaScript yang diperlukan dan menambahkan tag tombol berbagi:

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

Skrip harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana pun di halaman tanpa batasan. Untuk mengetahui informasi selengkapnya, lihat FAQ.

Anda juga dapat menggunakan tag berbagi yang valid untuk HTML5 dengan menetapkan atribut class ke g-sharetoclassroom, dan memberikan awalan setiap atribut tombol dengan data-.

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

Secara default, skrip yang disertakan melintasi DOM dan merender tag berbagi sebagai tombol. Anda dapat meningkatkan waktu rendering pada halaman yang besar dengan menggunakan JavaScript API untuk menjelajahi satu elemen dalam halaman, atau merender elemen tertentu sebagai tombol berbagi.

Eksekusi tertunda dengan onLoad dan parameter tag skrip

Setel parameter tag skrip parsetags ke onload (default) atau explicit untuk menentukan kapan kode tombol dieksekusi. Untuk menentukan parameter tag skrip, gunakan sintaksis berikut:

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

Konfigurasi

Menyetel URL yang akan dibagikan ke Classroom

URL yang dibagikan ke Classroom ditentukan oleh atribut url tombol. Atribut ini secara eksplisit menentukan URL target yang akan dibagikan dan harus ditetapkan untuk merender tombol berbagi.

Parameter tag skrip

Parameter ini ditentukan dalam elemen <script /> yang harus dijalankan sebelum memuat skrip platform.js. Parameter tersebut mengontrol mekanisme pemuatan tombol yang digunakan di seluruh halaman web.

Parameter yang diizinkan adalah:

onload

Semua tombol berbagi di halaman otomatis dirender setelah halaman dimuat. Lihat contoh onLoad eksekusi yang ditangguhkan.

eksplisit

Tombol berbagi hanya dirender dengan panggilan eksplisit ke gapi.sharetoclassroom.go atau gapi.sharetoclassroom.render.

Jika Anda menggunakan pemuatan eksplisit bersamaan dengan panggilan go dan render yang mengarah ke penampung tertentu di halaman, Anda akan mencegah skrip melewati seluruh DOM, yang dapat meningkatkan waktu rendering tombol. Lihat contoh gapi.sharetoclassroom.go dan gapi.sharetoclassroom.render.

Membagikan atribut tag

Parameter ini mengontrol setelan untuk setiap tombol. Anda dapat menetapkan parameter ini sebagai pasangan attribute=value pada tag tombol bagikan, atau sebagai pasangan key:value JavaScript dalam panggilan ke gapi.sharetoclassroom.render.

Panduan tombol berbagi Classroom

Tampilan Tombol Bagikan Classroom harus sesuai dengan panduan ukuran minimum min dan template warna/tombol yang terkait. Tombol ini mendukung berbagai ukuran, mulai dari ukuran minimum 32 piksel hingga maksimum 96 piksel.

Tema	Contoh
Klasik
Gelap
Ringan

Penyesuaian

Sebaiknya Anda tidak mengubah atau membuat ulang ikon dengan cara apa pun. Namun, jika menampilkan beberapa ikon sosial pihak ketiga secara bersamaan di aplikasi, Anda dapat menyesuaikan ikon Classroom agar sesuai dengan gaya aplikasi Anda. Jika Anda melakukannya, pastikan semua tombol disesuaikan menggunakan gaya yang serupa dan setiap penyesuaian mengikuti pedoman branding Classroom. Jika ingin sepenuhnya mengontrol tampilan dan perilaku tombol berbagi, Anda dapat memulai pembagian melalui URL struktur berikut: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

JavaScript tombol berbagi menentukan dua fungsi rendering tombol pada namespace gapi.sharetoclassroom. Anda harus memanggil salah satu fungsi ini jika menonaktifkan penonaktifan otomatis dengan menyetel parsetag ke explicit.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Contoh

Halaman dasar

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

Memuat tag secara eksplisit di subset 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>

Render eksplisit

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

Pertanyaan umum (FAQ)

FAQ berikut berkaitan dengan pertimbangan teknis dan detail implementasi. Untuk referensi tambahan, lihat FAQ umum.

Bagaimana cara menguji integrasi tombol berbagi Classroom?

Anda dapat meminta akun pengujian Classroom untuk menguji berbagi ke Classroom dari integrasi Anda.

Dapatkah saya menempatkan beberapa tombol di satu halaman yang semuanya memiliki URL yang berbeda?

Ya. Gunakan atribut url seperti yang ditentukan dalam parameter tag berbagi untuk menunjukkan URL yang akan dibagikan ke Classroom.

Di mana saya harus menempatkan tombol bagikan pada halaman saya?

Andalah yang paling mengetahui halaman dan pengguna Anda, jadi sebaiknya tempatkan tombol di mana pun yang menurut Anda paling efektif. Paruh atas, di dekat judul halaman, dan dekat dengan berbagi link sering kali menjadi lokasi yang bagus. Menempatkan tombol berbagi di akhir dan awal konten yang dibuat juga bisa menjadi efektif.

Apakah ada dampak latensi dari posisi tag <script> di halaman?

Tidak, tidak ada dampak latensi yang signifikan dari penempatan tag <script>. Namun, dengan menempatkan tag di bagian bawah dokumen, tepat sebelum tag penutup </body>, Anda dapat meningkatkan kecepatan pemuatan halaman.

Apakah tag <script> perlu disertakan sebelum tag berbagi?

Tidak, tag <script> dapat disertakan di mana saja di halaman.

Apakah tag <script> harus disertakan sebelum tag <script> lainnya memanggil salah satu metode di bagian JavaScript API?

Ya, jika Anda menggunakan salah satu metode JavaScript API, metode tersebut harus ditempatkan di halaman setelah penyertaan <script>. Anda juga tidak dapat menggunakan async defer dengan metode JavaScript API apa pun.

Apakah saya harus menggunakan atribut url?

Atribut url wajib diisi. Tidak menyetel url secara eksplisit akan menyebabkan tombol berbagi tidak dirender. Lihat bagikan URL target untuk informasi selengkapnya.

Beberapa pengguna saya mendapatkan peringatan keamanan saat mereka melihat halaman dengan tombol bagikan. Bagaimana cara menghapusnya?

Kode tombol berbagi memerlukan skrip dari server Google. Anda mungkin mendapatkan error ini dengan menyertakan skrip melalui http:// di halaman yang dimuat melalui https://. Sebaiknya gunakan https:// untuk menyertakan skrip:

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

Browser web apa yang didukung?

Tombol berbagi Classroom mendukung browser web yang sama seperti antarmuka web Classroom, browser seperti Chrome, Firefox®, Internet Explorer®, atau Safari®. Catatan: Fungsi yang ditentukan untuk onsharestart dan onsharecomplete tidak dipanggil untuk pengguna Internet Explorer.

Data apa yang dikirim ke Classroom saat Anda mengklik tombol bagikan Classroom?

Saat mengklik tombol bagikan, pengguna akan diminta untuk login dengan akun G Suite for Education. Setelah autentikasi, akun pengguna dan atribut url dikirim ke Classroom untuk menyelesaikan postingan.