En este tutorial explicaremos los pasos que hay que realizar para compartir contenido en Google+.
El objetivo final será tener un enlace en nuestro sitio web que al hacer clic sobre él abra una ventana donde se introducirán los datos a compartir en Google+.
Crear el enlace para compartir contenido en Google plus
Vamos a empezar por crear el enlace que está habilitado en Google+ para compartir contenido. Para ello debemos añadir este código en la parte de nuestro sitio web donde queramos que aparezca el nuevo botón o enlace:
1
En enlace anterior está formado por dos elmentos:
- La url de Google a la que hay que enviar la solicitud para compartir en Google+.
- El parámetro ‘url’ con la dirección del contenido que se quiere compartir, en este caso la dirección de nuestro sitio web.
Para probar el funcionamiento de este enlace hacer clic aquí.
Abrir la ventana de compartir en Google+ en un popup
Lo que vamos a configurar ahora es que cuando un usuario haga clic en el enlace que acabamos de crear se abra una ventana emergente o ‘popup’ en donde aparezca el formulario a rellenar con los datos a compartir.
Para ello debemos modificar el enlace anterior añadiéndole cierta funcionalidad javascript, el evento ‘onclick’, que realizará la solicitud pero abriendo previamente la ventana emergente. Ahora el código tendría este estilo:
1
Puedes probar el comportamiento de este enlace haciendo clic aquí.
Hasta aquí los pasos para crear el enlace para compartir en ‘Google+’. Pero ahora hay que editar el contenido que queremos compartir para que los datos que se muestren en la nueva publicación de Google+ tengan el formato que queremos.
Optimizar html para compartir en Google +
Para compartir contenido en Google+ es importante que añadamos a nuestro sitio web un conjunto de etiquetas. Estas pueden ser añadidas tanto en la cabecera como en el cuerpo. En función de donde las queramos situar tendremos que utilzar unas u otras. Las etiquetas que se van a configurar van a hacer referencia a los siguientes datos:
- Tipo de página ‘itemtype’, donde se indicará si es un blog, un libro, un artículo…
- Nombre del sitio web – ‘itemprop=”name”‘.
- Descripción del contenido que se está compartiendo – ‘itemprop=”description”‘
- Url de la imagen que aparecerá a la izquierda del texto, asociada al contenido que se está compartiendo – ‘itemprop=”image”‘
Primero vamos a ver como configurar estas etiquetas en la cabecera, y luego cómo se haría en el body de la página. Para crear estas etiquetas vamos a ayudarnos de esta herramienta ofrecida por Google. Si accedemos al enlace anterior veremos un formulario donde deberemos rellenar con los datos del contenido que queremos compartir.
Configurar cabecera html para Google+
En este primer ejemplo vamos a configurar las etiquetas ‘‘ que debemos añadir a la cabecera de la página donde esté el contenido que queremos compartir.
Para ello accederemos a la herramienta anterior rellenando el formulario que aparece, y obtendremos las siguientes etiquetas a incluir en la cabecera:
Tras rellenar el formulario podemos ver en la parte inferior derecha las etiquetas generadas que deberemos copiar en nuestro sitio web, quedando de este modo:
HTML |copy code |?
01 <html itemscope itemtype="http://schema.org/Blog">02 <head>03 <meta itemprop="name" content="Blog de Developando">04 <meta itemprop="description" content="Probando contenido para compartir en Google plus">05 <meta itemprop="image" content="http://developando.com/images/developando210x45.png">06 </head>07 <body>08 09 </body>10 </html>
Configurar cuerpo html para Google+
Del mismo que hemos hecho en el caso anterior debemos rellenar el formulario pero esta deberemos seleccionar ” como lugar donde vamos a añadir las etiquetas:
De nuevo en la parte inferior derecha aparecerán las etiquetas que debemos incluir dentro del ” del contenido que queremos compartir. Querdária configurado de este modo:
HTML |copy code |?
01 <html itemscope itemtype="http://schema.org/Blog">02 <head>03 04 </head>05 <body>06 07 08 09 <img itemprop="image" src="http://developando.com/images/developando210x45.png" />10 11 </body>12 </html>
Tras añadir estas etiquetas a nuestro contenido ya tendremos optimizado nuestro sitio web para compartir contenido en Google plus. Pues comprobar que las eiquetas estén bien incluidas utilizando la herramienta de debug ofrecida por Google accediendo aquí
Sobre David Otero
David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.
- Find more about me on:
Deja tu comentario