Cómo agregar un botón para compartir en Classroom

Botón Compartir en Classroom

Puedes agregar y personalizar el botón para compartir de Classroom a fin de satisfacer las necesidades de tu sitio web, como modificar su tamaño y técnica de carga. Si agregas el botón para compartir en Classroom a tu sitio web, permites que los usuarios compartan tu contenido en sus clases y generar tráfico a él.

Comenzar

Un botón sencillo

El método más sencillo para incluir un botón para compartir de Classroom en tu página es incluir el recurso de JavaScript necesario y agregar una etiqueta del botón para compartir:

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

La secuencia de comandos debe cargarse mediante el protocolo HTTPS y puede incluirse desde cualquier punto de la página sin restricciones. Para obtener más información, consulta las Preguntas frecuentes.

También puedes usar una etiqueta para compartir válida para HTML5 configurando el atributo de clase en g-sharetoclassroom y asignando el prefijo data- a cualquier atributo de botón.

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

De forma predeterminada, la secuencia de comandos incluida recorre el DOM y renderiza las etiquetas compartidas como botones. Puedes mejorar el tiempo de procesamiento en páginas grandes utilizando la API de JavaScript para recorrer solo un elemento dentro de la página o renderizar un elemento específico como un botón para compartir.

Ejecución diferida con onLoad y parámetros de etiqueta de secuencia de comandos

Establece el parámetro de la etiqueta de la secuencia de comandos parsetags en onload (predeterminado) o explicit para determinar cuándo se ejecuta el código del botón. Para especificar los parámetros de la etiqueta de secuencia de comandos, usa la siguiente sintaxis:

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

Configuración

Configurando la URL para compartir con Classroom

La URL que se comparte con Classroom se determina mediante el atributo url del botón. Este atributo define de forma explícita la URL de destino que se comparte y debe configurarse para renderizar el botón para compartir.

Parámetros de la etiqueta de la secuencia de comandos

Estos parámetros se definen dentro de un elemento <script /> que se debe ejecutar antes de cargar la secuencia de comandos platform.js. Los parámetros controlan el mecanismo de carga de botones que se usa en toda la página web.

Los parámetros permitidos son los siguientes:

OnLoad
Todos los botones para compartir de la página se procesan automáticamente después de que se carga la página. Consulta el ejemplo de ejecución diferida diferida.
explícito
Los botones para compartir solo se renderizan con llamadas explícitas a gapi.sharetoclassroom.go o gapi.sharetoclassroom.render.

Cuando usas la carga explícita junto con las llamadas de renderización y ejecución que apuntan a contenedores específicos en tu página, evitas que la secuencia de comandos recorra todo el DOM, lo que puede mejorar el tiempo de procesamiento del botón. Consulta los ejemplos gapi.sharetoclassroom.go y gapi.sharetoclassroom.render.

Compartir atributos de etiquetas

Estos parámetros controlan la configuración de cada botón. Puedes configurar estos parámetros como pares attribute=value en etiquetas de botones para compartir o como pares key:value de JavaScript en una llamada a gapi.sharetoclassroom.render.

Atributo Valor Default Descripción
body string null Configura el texto del cuerpo del elemento que se compartirá con Classroom.
courseid string null Si se especifica, establece el ID de curso para preseleccionar en el menú "Choose class" que se muestra después de que un usuario hace clic en el botón Compartir. El usuario puede cambiar este valor preseleccionado si es necesario.
itemtype announcement, assignment, material o question null Se mostrará automáticamente el diálogo de creación después de que el usuario seleccione por primera vez un curso (o de inmediato si también se especifica courseid). Si un alumno elige una clase o un profesor elige una clase en la que es alumno, este valor se ignora.
locale Etiqueta de idioma que cumple con RFC 3066 en-US Establece el idioma del botón aria-label para fines de accesibilidad. Esto no afecta el idioma del diálogo de uso compartido que aparece cuando el usuario hace clic en el botón, que se ve afectado por las preferencias del navegador del usuario.
onsharecomplete string null Si se especifica, establece el nombre de una función del espacio de nombres global a la que se llama cuando el usuario termina de compartir el vínculo. Si pasas los argumentos a través de parámetros a gapi.sharetoclassroom.render, también puedes usar una función en sí. Esta función no está disponible en Internet Explorer (ver a continuación).
onsharestart string null Si se especifica, establece el nombre de una función en el espacio de nombres global a la que se llama cuando se abre el diálogo para compartir. Si pasas los argumentos a través de parámetros a gapi.sharetoclassroom.render, también puedes usar una función en sí. Esta función no está disponible en Internet Explorer (ver a continuación).
size int null Establece el tamaño en píxeles del botón para compartir. Si se omite el tamaño, el botón usará 32.
theme classic, dark o light classic Establece el ícono del botón para el tema seleccionado.
title string null Establece el título del elemento que se compartirá con Classroom.
url URL para compartir null Establece la URL que se compartirá con Classroom. Si configuras este atributo mediante gapi.sharetoclassroom.render, no debes escapar la URL.

Lineamientos del botón para compartir en Classroom

La visualización del botón Compartir en Classroom debe cumplir con nuestros lineamientos de tamaño mínimo y máximo, y con las plantillas de color y botón relacionadas. El botón admite una variedad de tamaños, desde un tamaño mínimo de 32 píxeles hasta un máximo de 96 píxeles.

Tema Ejemplo
Clásica
Oscuro
Claro

Preferimos que no modifiques ni vuelvas a hacer el ícono de ninguna manera. Sin embargo, si muestras varios íconos sociales de terceros en tu app, puedes personalizar el ícono de Classroom para que coincida con el estilo de tu app, siempre y cuando todos los botones estén personalizados con un estilo similar.

Consulta los lineamientos de marca de Classroom para obtener más información.

API de JavaScript

El botón para compartir de JavaScript define dos funciones de renderización de botones en el espacio de nombres gapi.sharetoclassroom. Debes llamar a una de estas funciones si inhabilitas el procesamiento automático mediante el establecimiento de etiquetas de análisis en explicit.

Método Descripción
gapi.sharetoclassroom.render(
 container,
 parameters
)
Renderiza el contenedor especificado como un botón para compartir.
contenedor
El contenedor que se renderizará como el botón Compartir. Especifica el ID del contenedor (string) o el elemento DOM.
Parámetros
Es un objeto que contiene atributos de etiqueta como pares key=value. Por ejemplo, {"size": "300", "theme": "light"}.
gapi.sharetoclassroom.go(
 opt_container
)
Renderiza todas las etiquetas y clases de los botones para compartir en el contenedor especificado. Esta función debe usarse solo si parsetags está configurado como explicit, lo que puedes hacer por motivos de rendimiento.
contenedor_opt.
El contenedor que contiene las etiquetas del botón para compartir se debe renderizar. Especifica el ID del contenedor (string) o el propio elemento DOM. Si se omite el parámetro opt_container, se renderizan todas las etiquetas del botón para compartir de la página.

Examples

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>

Carga etiquetas de manera explícita en un subconjunto del 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>

Renderización 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>

Preguntas frecuentes

Las siguientes preguntas frecuentes abordan consideraciones técnicas y detalles de implementación. Para obtener recursos adicionales, consulta las Preguntas frecuentes generales.

¿Cómo puedo probar la integración del botón para compartir de Classroom?

Puedes solicitar cuentas de prueba de Classroom para probar el uso compartido con Classroom desde tu integración.

¿Puedo colocar varios botones en una misma página que compartan URL diferentes?

Sí. Usa el atributo url como se especifica en los parámetros de la etiqueta de uso compartido para indicar que la URL se compartirá con Classroom.

¿Dónde debo colocar el botón para compartir en mis páginas?

Tú conoces mejor a tu página y a tus usuarios, por lo que te recomendamos que coloques el botón donde creas que será más eficaz. En la mitad superior de la página, cerca del título de la página y cerca de compartir vínculos, suele ser una buena ubicación. También puede ser efectivo colocar el botón para compartir tanto al final como al comienzo de un fragmento de contenido creado.

¿Hay algún impacto en la latencia de la posición de la etiqueta <script> en la página?

No, la posición de la etiqueta <script> no tiene un impacto significativo en la latencia. Sin embargo, si colocas la etiqueta en la parte inferior del documento, justo antes de la etiqueta de cierre </body>, puedes mejorar la velocidad de carga de la página.

¿Debe incluirse la etiqueta <script> antes que la etiqueta de uso compartido?

No, la etiqueta <script> se puede incluir en cualquier parte de la página.

¿La etiqueta <script> debe incluirse antes de que otra etiqueta <script> llame a uno de los métodos de la sección de la API de JavaScript?

Sí, si usas alguno de los métodos de la API de JavaScript, debes colocarlos en la página después de la inclusión de <script>. Tampoco puedes usar async defer con ninguno de los métodos de la API de JavaScript.

¿Necesito usar el atributo url?

El atributo url es obligatorio. Si no configuras url de forma explícita, no se renderizará el botón para compartir. Para obtener más información, consulta Compartir la URL de destino.

Algunos de mis usuarios reciben una advertencia de seguridad cuando ven páginas con el botón Compartir. ¿Cómo puedo deshacerme de esto?

El código del botón para compartir requiere una secuencia de comandos de los servidores de Google. Es posible que recibas este error si incluyes la secuencia de comandos a través de http:// en una página que se carga mediante https://. Recomendamos usar https:// para incluir la secuencia de comandos:

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

¿Qué navegadores web son compatibles?

El botón para compartir de Classroom es compatible con los mismos navegadores web que la interfaz web de Classroom, navegadores como Chrome, Firefox®, Internet Explorer® o Safari®. Nota: Las funciones especificadas en onstartstart y onsharecomplete no se llaman para los usuarios de Internet Explorer.

¿Qué datos se envían a Classroom cuando haces clic en el botón Compartir de Classroom?

Cuando un usuario hace clic en el botón para compartir, se le solicita que acceda con su cuenta de G Suite for Education. Después de la autenticación, la cuenta de usuario y el atributo url se envían a Classroom para completar la publicación.