Adicionar um botão de compartilhamento do Google Sala de Aula

Você pode adicionar e personalizar o botão de compartilhamento do Google Sala de Aula 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 para as turmas deles e gerem tráfego para o site.

Como começar

Um botão simples

O método mais fácil de 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 botão de compartilhamento:

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

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.

Também é possível usar uma tag de compartilhamento válida para HTML5 definindo o atributo de classe como g-sharetoclassroom e prefixando todos os atributos de botão com data-.

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

Por padrão, o script incluído passa pelo DOM e renderiza as 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 elemento da página ou renderizar um elemento específico como um botão de compartilhamento.

Execução adiada com onLoad e parâmetros de tag de script

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

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

Configuração

Definir o URL para compartilhar com o Google Sala de Aula

O URL compartilhado no Google Sala de Aula é determinado pelo atributo url do botão. Esse atributo define explicitamente o URL de destino a ser compartilhado e precisa ser configurado para renderizar o botão de compartilhamento.

Parâmetros de tag 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 de botão usado em toda a página da Web.

Os parâmetros permitidos são:

onload

Todos os botões de compartilhamento na página são renderizados automaticamente após o carregamento. Veja o exemplo de execução adiado do onLoad.

explicit

Os botões de compartilhamento são renderizados somente com chamadas explícitas para gapi.sharetoclassroom.go ou gapi.sharetoclassroom.render.

Ao usar o carregamento explícito com chamadas "go" e "renderização" que apontam para contêineres específicos na página, você impede que o script atrave todo o DOM, o que pode melhorar o tempo de renderização do botão. Veja os exemplos gapi.sharetoclassroom.go e gapi.sharetoclassroom.render.

Compartilhar atributos de tag

Esses parâmetros controlam as configurações de cada botão. Você pode definir esses parâmetros como pares attribute=value nas tags do botão de compartilhamento ou como pares key:value do JavaScript em uma chamada para 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 os modelos de cores/botões relacionados. O botão é compatível com vários tamanhos, de um tamanho mínimo de 32 a um máximo de 96 pixels.

Tema	Exemplo
Clássico
Escuro
Claro

Personalização

Preferimos que você não mude nem recrie o ícone. No entanto, se você exibir vários ícones de redes sociais de terceiros no app, vai poder personalizar o ícone do Google Sala de Aula de acordo com o estilo do app. Se você fizer isso, confira se todos os botões foram personalizados com um estilo semelhante e se as personalizações seguem as diretrizes da promoção de marca do Google Sala de Aula. Se você quiser controlar totalmente a aparência e o comportamento do botão de compartilhamento, inicie-o usando um URL da 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. É preciso chamar uma dessas funções se desativar a renderização automática definindo configurações de tags como explicit.

gapi.sharetoclassroom.render(
 container,
 parameters
)

gapi.sharetoclassroom.go(
 opt_container
)

Exemplos

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 abordam considerações técnicas e detalhes de implementação. Para acessar outros recursos, consulte as Perguntas frequentes gerais.

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

É possível solicitar contas de teste do Google Sala de Aula para testar o compartilhamento com 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ê é quem conhece melhor sua página e seus usuários. Por isso, recomendamos colocar o botão em qualquer lugar que acredita ser o mais eficaz. Acima da dobra, próximo ao título da página e próximo de compartilhar links muitas vezes é um bom local. Também pode ser eficaz colocar o botão de compartilhamento no final e no início de um conteúdo criado.

Há impacto na latência da posição da tag <script> na página?

Não, não há impacto significativo na latência do posicionamento da tag <script>. No entanto, ao colocar a tag na parte inferior do documento, logo antes da tag de fechamento </body>, é possível 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 algum dos métodos da API JavaScript, eles precisarão 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 vai ser renderizado. Consulte compartilhar o URL de destino para mais informações.

Alguns usuários veem um aviso de segurança quando veem as 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. Você pode receber esse erro incluindo o script via http:// em uma página carregada com https://. Recomendamos o uso de https:// para incluir o script:

<script src="https://apis.google.com/js/platform.js" async defer></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 interface da Web do Google Sala de Aula e de navegadores 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 para o Google Sala de Aula quando você clica no botão de compartilhamento do Google Sala de Aula?

Quando um usuário clica no botão de compartilhamento, é solicitado que ele faça login com a conta do G Suite for Education. Após a autenticação, a conta de usuário e o atributo url são enviados ao Google Sala de Aula para concluir a postagem.