Puedes agregar y personalizar el botón para compartir de Classroom según las necesidades de tu sitio web, como modificar el tamaño del botón y la técnica de carga. Si agregas el botón para compartir en Classroom a tu sitio web, permitirás que los usuarios compartan el contenido con sus clases y que dirijan tráfico a tu sitio.
Primeros pasos
Un botón sencillo
El método más sencillo para incluir un botón para compartir en Classroom en tu página es incluir el recurso de JavaScript necesario y agregar una etiqueta de 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 de HTML5 si configuras el atributo de la clase en g-sharetoclassroom y si agregas como prefijo cualquier atributo del botón con data-.
<div class="g-sharetoclassroom" data-size="32" data-url="..." ></div>
De forma predeterminada, la secuencia de comandos incluida desvía el DOM y procesa las etiquetas de uso compartido como botones. Puedes mejorar el tiempo de procesamiento en páginas grandes con la API de JavaScript para recorrer solo un elemento dentro de la página o renderizar un elemento específico como botón para compartir.
Ejecución diferida con onLoad y parámetros de etiqueta de secuencia de comandos
Configura el parámetro de etiqueta de secuencia de comandos parsetags en onload (valor predeterminado) o explicit para determinar cuándo se ejecuta el código de botón. Para especificar los parámetros de la etiqueta de la 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
Cómo configurar la URL para compartir en Classroom
La URL que se comparte con Classroom está determinada por el atributo url del botón.
Este atributo define de forma explícita la URL de destino que se compartirá y debe configurarse para procesar el botón de compartir.
Parámetros de la etiqueta de secuencia de comandos
Estos parámetros se definen dentro de un elemento <script /> que debe ejecutarse 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 renderizan automáticamente después de que se carga la página. Consulta el ejemplo de ejecución diferida onLoad.
- explícito
- Los botones para compartir solo se procesan con llamadas explícitas a
gapi.sharetoclassroom.googapi.sharetoclassroom.render.
Cuando usas la carga explícita junto con las llamadas de procesamiento y go que apuntan a contenedores específicos en tu página, evitas que la secuencia de comandos atraviese 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 | Predeterminado | Descripción |
|---|---|---|---|
body |
string | null | Establece el texto del cuerpo del elemento para compartirlo en Classroom. |
courseid |
string | null | Si se especifica, configura el ID del curso para que se preseleccione en el menú "Elegir clase" que se muestra después de que un usuario hace clic en el botón para compartir. El usuario puede cambiar este valor preseleccionado si es necesario. |
itemtype |
announcement, assignment, material, oquestion |
null | Esto mostrará automáticamente el diálogo de creación después de que el usuario seleccione un curso por primera vez (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, se ignora este valor. |
locale |
Etiqueta de idioma que cumple con RFC 3066 | en-US |
Establece el idioma del botón aria-label con 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 en el espacio de nombres global al que se llama cuando el usuario termina de compartir el vínculo. Si pasas tus 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 al que se llama cuando se abre el diálogo de uso compartido. Si pasas tus 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 compartir. Si se omite el tamaño, el botón usa 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 | Configura la URL para compartir en Classroom. Si configuras este atributo mediante gapi.sharetoclassroom.render, no debes escapar la URL. |
Lineamientos sobre el 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, así como 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ásico |  |
| Oscuro |  |
| Claro |  |
Personalización
Preferimos que no modifiques ni modifiques 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. Si lo haces, asegúrate de que todos los botones estén personalizados con un estilo similar y que todas las personalizaciones sigan los lineamientos de desarrollo de la marca para Classroom. Si deseas controlar por completo la apariencia y el comportamiento del botón para compartir, puedes iniciar el uso compartido con una URL de la siguiente estructura: https://classroom.google.com/share?url={url-to-share}.
API de JavaScript
El botón Compartir JavaScript de JavaScript define dos funciones de procesamiento 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.
|
gapi.sharetoclassroom.go( opt_container ) |
Procesa todas las etiquetas y clases del botón para compartir en el contenedor especificado.
Esta función solo debe usarse si parsetags está configurado como explicit, lo que podrías hacer por razones de rendimiento.
|
Ejemplos
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 forma 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>
Procesamiento explícito
<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 diferentes URL?
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 tu página y a los usuarios mejor que nadie, por lo que te recomendamos que coloques el botón en cualquier lugar que consideres más efectivo. 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 de compartir al final y al comienzo de una porción de contenido creado.
¿Hay algún impacto de latencia en la posición de la etiqueta <script> en la página?
No, la ubicació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.
¿Es necesario incluir la etiqueta <script> antes de la etiqueta para compartir?
No, la etiqueta <script> se puede incluir en cualquier parte de la página.
¿Es necesario incluir la etiqueta <script> 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.
¿Debo usar el atributo url?
El atributo url es obligatorio. Si no estableces url de forma explícita, el botón para compartir no se procesará.
Para obtener más información, consulta Compartir URL de destino.
Algunos de mis usuarios reciben una advertencia de seguridad cuando ven páginas con el botón Compartir. ¿Cómo me deshago de esto?
El código del botón para compartir requiere una secuencia de comandos de los servidores de Google. Es posible que obtengas este error si incluyes la secuencia de comandos mediante 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, además de los navegadores como Chrome, Firefox®, Internet Explorer® o Safari®. Nota: Los usuarios de Internet Explorer no usan las funciones especificadas para onsharestart y onsharecomplete.
¿Qué datos se envían a Classroom cuando haces clic en el botón Compartir en 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.