Adicionar um botão de compartilhamento do Sala de Aula

O botão de compartilhamento do Google Sala de Aula oferece um caminho fácil para tornar seu conteúdo acessível no Google Sala de Aula. Os desenvolvedores podem incorporar um script curto no aplicativo para gerar um botão que permite aos usuários criar atividades, perguntas, avisos e materiais do Google Sala de Aula em um iframe pop-up.

Figura 1. Exemplo de um usuário clicando no botão "Compartilhar com o Google Sala de Aula" para criar uma atividade com links para materiais de aprendizagem.

O botão de compartilhamento do Google Sala de Aula pode ser personalizado para atender às necessidades do seu site, como modificar o tamanho do botão e a técnica de carregamento. Ao adicionar o botão de compartilhamento do Google Sala de Aula ao seu site, você permite que os usuários compartilhem seu conteúdo nas turmas e gerem tráfego para seu site.

Primeiros passos

O método mais fácil para incluir um botão de compartilhamento do Google Sala de Aula na sua página é incluir o recurso JavaScript necessário e adicionar uma tag de elemento personalizado. O snippet de exemplo renderiza um botão básico:

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

O botão também pode ser renderizado usando o HTML padrão definindo o atributo de classe como g-sharetoclassroom e prefixando todos os atributos de botão com data-. Exemplo:

<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-sharetoclassroom"
     data-url="https://developers.google.com/workspace/classroom/"
     data-size="32">
</div>

Por padrão, o script incluído percorre o DOM e renderiza tags de compartilhamento como botões. É possível melhorar o tempo de renderização em páginas grandes usando a API JavaScript para percorrer apenas um único elemento na página ou renderizar um elemento específico como um botão de compartilhamento.

O script deve ser carregado usando o protocolo HTTPS e pode ser incluído em qualquer ponto da página sem restrição. Para mais informações, consulte as Perguntas frequentes.

Configuração

As seções a seguir descrevem os valores principais e as opções de configuração de um botão de compartilhamento.

Compartilhar atributos da tag

Esses atributos controlam as configurações de cada botão. É possível definir esses atributos como pares attribute=value em tags HTML do botão de compartilhamento ou como pares key:value do JavaScript em uma chamada para gapi.sharetoclassroom.render usando a API JavaScript.

O único parâmetro obrigatório é url. Esse atributo define explicitamente o URL de destino para compartilhar com o Google Sala de Aula e precisa ser definido para renderizar o botão de compartilhamento.

Parâmetros de tags de script

Esses parâmetros são definidos em um elemento script que precisa ser executado antes do carregamento do script platform.js. Os parâmetros controlam o mecanismo de carregamento do botão usado em toda a página da Web.

Defina o parâmetro de tag de script parsetags como onload (padrão) ou explicit para determinar quando o código do botão é executado. Para especificar parâmetros de tag de script, use esta sintaxe:

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

Os valores permitidos são:

onload

Todos os botões de compartilhamento na página são renderizados automaticamente após o carregamento da página.

explicit

Os botões de compartilhamento são renderizados apenas com chamadas explícitas para

gapi.sharetoclassroom.go ou gapi.sharetoclassroom.render.

Quando você usa a carga explícita em conjunto com as chamadas go e render que apontam para contêineres específicos na página, impede que o script percorra todo o DOM, o que pode melhorar o tempo de renderização do botão. Consulte os exemplos de gapi.sharetoclassroom.go e gapi.sharetoclassroom.render .

Diretrizes do botão de compartilhamento do Google Sala de Aula

A exibição do botão de compartilhamento do Google Sala de Aula precisa estar em conformidade com nossas diretrizes de tamanho mínimo e máximo e modelos de cores ou botões relacionados. O botão oferece suporte a vários tamanhos, de um mínimo de 32 pixels a um máximo de 96 pixels.

Tema	Exemplo
Clássico
Escuro
Claro

Personalização

Recomendamos que você não mude nem refaça o ícone de nenhuma forma. No entanto, se você mostrar vários ícones de redes sociais de terceiros no app, poderá personalizar o ícone do Google Sala de Aula para combinar com o estilo do app. Se você fizer isso, verifique se todos os botões são personalizados usando um estilo semelhante e se todas as personalizações seguem as diretrizes de branding do Google Sala de Aula. Se você quiser controlar totalmente a aparência e o comportamento do botão de compartilhamento, inicie o compartilhamento usando um URL com a seguinte estrutura: https://classroom.google.com/share?url={url-to-share}.

JavaScript API

O JavaScript do botão de compartilhamento define duas funções de renderização de botões no namespace gapi.sharetoclassroom. Você precisa chamar uma dessas funções se desativar a renderização automática definindo parsetags como explicit.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Exemplos

Confira abaixo exemplos em HTML de implementações do botão "Compartilhar com a Sala de Aula".

Página básica

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

Carregar tags explicitamente em um subconjunto do 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>

Renderização explícita

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

Perguntas frequentes

As perguntas frequentes a seguir tratam de considerações técnicas e detalhes de implementação. Para perguntas mais gerais sobre o Google Sala de Aula, consulte as perguntas frequentes gerais.

Como testar a integração do botão de compartilhamento do Google Sala de Aula?

Você pode solicitar contas de teste do Google Sala de Aula para testar o compartilhamento com o Google Sala de Aula na sua integração.

Posso colocar vários botões em uma única página que compartilham URLs diferentes?

Sim. Use o atributo url conforme especificado nos parâmetros da tag de compartilhamento para indicar o URL a ser compartilhado com o Google Sala de Aula.

Onde devo colocar o botão de compartilhamento nas minhas páginas?

Você conhece melhor sua página e seus usuários. Por isso, recomendamos colocar o botão onde você achar que ele será mais eficaz. Acima da dobra, perto do título da página e perto dos links de compartilhamento, geralmente é um bom local. Também pode ser eficaz colocar o botão de compartilhamento no início e no fim de um conteúdo criado.

Há algum impacto na latência devido à posição da tag script na página?

Não, não há impacto significativo na latência devido à inserção da tag script. No entanto, ao colocar a tag na parte inferior do documento, logo antes de fechar a tag body, você pode melhorar a velocidade de carregamento da página.

A tag script precisa ser incluída antes da tag de compartilhamento?

Não, a tag script pode ser incluída em qualquer lugar da página.

A tag script precisa ser incluída antes que outra tag script chame um dos métodos na seção da API JavaScript?

Sim, se você usar qualquer um dos métodos da API JavaScript, eles precisam ser colocados na página após a inclusão de script. Também não é possível usar async defer com nenhum dos métodos da API JavaScript.

Preciso usar o atributo url?

O atributo url é obrigatório. Se url não for definido explicitamente, o botão de compartilhamento não será renderizado. Consulte Compartilhar parâmetros de tag para mais informações.

Alguns dos meus usuários recebem um aviso de segurança quando acessam páginas com o botão de compartilhamento. Como faço para eliminar isso?

O código do botão de compartilhamento requer um script dos servidores do Google. Esse erro pode ocorrer se você incluir o script usando http:// em uma página carregada com https://. Recomendamos o uso de https:// para incluir o script:

Quais navegadores da Web são compatíveis?

O botão de compartilhamento do Google Sala de Aula é compatível com os mesmos navegadores da Web que a interface da Web do Google Sala de Aula, como Chrome, Firefox®, Internet Explorer® ou Safari®. Observação: as funções especificadas para onsharestart e onsharecomplete não são chamadas para usuários do Internet Explorer.

Quais dados são enviados ao Google Sala de Aula quando você clica no botão de compartilhamento?

Quando um usuário clica no botão "Compartilhar", ele precisa fazer login com a conta do Google Workspace for Education. Após a autenticação, a conta do usuário e o atributo url são enviados ao Google Sala de Aula para concluir a postagem.