¿Cómo añadir el botón de Hangout en mi blog Blogger?


¿Cómo añadir el botón de Hangout en mi página web? Cómo insertar el botón Hangout a tu sitio web para realizar un video chat Online con los usuarios que visiten su página? Cuando un usuario hace clic en el botón, se inicia un Hangout y tu aplicación o tus extensiones se ejecutan en su interior. Este truco de como insertar el botón de Hangout sirve para mostrarse en cualquier página web sea de Blogger, Wordpress, Joomla, etc.

¿Cómo añadir el botón de Hangout en mi blog Blogger?

Siga las siguientes instrucciones para habilitarlo en Blogger:

Paso 1.- Para utilizar un "Hangouts" de forma "integrada" en nuestro blog de Blogger, es necesario conocer el APP_ID o número de identificación que Google nos asigna para utilizar sus APIs (Application Program Interface) en nuestro blog o sitio web:

- Es tan sencillo como hacer "clic aquí" al acceder simplemente copia el código que Google APIs te asigne.

- Copia el código que se encuentra debajo de “ID del proyecto” , es el número que va después de "api-project-" y tiene al menos 12 dígitos, si no sabes dónde mira la siguiente imagen

¿Cómo añadir el botón de Hangout en mi blog Blogger?

- No toques nada más en esta página. Sólo necesitas el código de “Id del proyecto” para trabajar con "Hangouts" en tu blog de Blogger o página web.

¿Cómo probar tu aplicación?

Para probar a iniciar un Hangout con tu aplicación o tu extensión ejecutándose en su interior, diríjase a:

https://hangoutsapi.talkgadget.google.com/hangouts/_?gid=APP_ID

Nota: Debes sustituir APP_ID por el numero de 12 dígitos que te proporciono la aplicación.

Paso 2.- Dispondrás de diversas opciones. Puedes ponerlo online mediante un icono o una simple imagen, una opción de menú o un simple botón. En Google Developers ofrecen el script para poder añadir el botón de hangouts para tu blog:

Cuentas con botones de diversos tamaños 79x15, 86x20, 24x100, 60x230. El script es muy sencillo:

<a href="https://plus.google.com/hangouts/_?gid=APP_ID" style="text-decoration:none;">
  <img src="https://ssl.gstatic.com/s2/oz/images/stars/hangout/1/gplus-hangout-60x230-normal.png"  alt="Start a Hangout"  style="border:0;width:230px;height:60px;"/></a>

Elimina el código que está marcado de color azul el cual dice APP_ID y remplázalo por el código de la aplicación que Google te suministró tal como te expliqué en el Paso 1.

Por último, aunque en la página de Google Developers puedes seleccionar el código con los tamaños de los botones que dese, también puedes cambiar el tamaño del icono que te proporcioné, en el ejemplo de código que te he puesto, el ancho del botón es de 230 píxeles por 60 de alto, cambia por el tamaño que quieras.

Por ejemplo: tiene este aspecto width:230px;height:60px

Paso 3.- Una vez que tengas todo el código listo vamos a proceder añadirlo en un Widget HTML/Javascript para así ubicarlo donde mejor te parezca. Siga los siguientes pasos:

1 Ir a Blogger

2 Un clic en la opción "Diseño"

¿Cómo añadir el botón de Hangout en mi blog Blogger?

3 Un clic donde dice “Añadir un Gadget"

¿Cómo añadir el botón de Hangout en mi blog Blogger?

4 Busca el widget que dice “HTML/Javascript", ábrelo he ingresa el código

¿Cómo añadir el botón de Hangout en mi blog Blogger?

5 Luego le das un clic en “Guardar” y ubícalo donde tú quieras.

Paso 4.- Si quieres ubicar el código del Hangout en una entrada de tu blog de Blogger también lo puedes hacer de una forma fácil, sigue las siguientes instrucciones:

1 Abre una entrada

2 Habilita la entrada en modo HTML


3 Insertar el código del Paso 2, eso es todo con eso ya estará insertado el botón del Hangout en la entrada de tu blog de Blogger.

Puedes ver su demostración a continuación



¿Cómo añadir el botón de Hangout en mi blog Blogger?


Insertar el botón de Hangout en cualquier página web que no sea Blogger

Siga las siguientes instrucciones:

Paso 1.- Para utilizar un "Hangouts" de forma "integrada" en nuestra página web, es necesario conocer el APP_ID o número de identificación que Google nos asigna para utilizar sus APIs (Application Program Interface) en nuestro sitio web:

- Es tan sencillo como hacer "clic aquí" al acceder simplemente copia el código que Google APIs te asigne.

- Copia el código que se encuentra debajo de “ID del proyecto” , es el número que va después de "api-project-" y tiene al menos 12 dígitos, si no sabes dónde mira la siguiente imagen

¿Cómo añadir el botón de Hangout en mi blog Blogger?

- No toques nada más en esta página. Sólo necesitas el código de “Id del proyecto” para trabajar con "Hangouts" en tu página web.

¿Cómo probar tu aplicación?

Para probar a iniciar un Hangout con tu aplicación o tu extensión ejecutándose en su interior, diríjase a:

https://hangoutsapi.talkgadget.google.com/hangouts/_?gid=APP_ID

Nota: Debes sustituir APP_ID por el numero de 12 dígitos que te proporciono la aplicación.

Paso 2.- Puedes ponerlo online mediante un icono o una simple imagen, una opción de menú o un simple botón. En Google Developers ofrecen el script para poder añadir el botón de hangouts para tu sitio web:

Cuentas con botones de diversos tamaños 79x15, 86x20, 24x100, 60x230. El script es muy sencillo:

<a href="https://plus.google.com/hangouts/_?gid=APP_ID" style="text-decoration:none;">
  <img src="https://ssl.gstatic.com/s2/oz/images/stars/hangout/1/gplus-hangout-60x230-normal.png"  alt="Start a Hangout"  style="border:0;width:230px;height:60px;"/></a>

Elimina el código que está marcado de color azul el cual dice APP_ID y remplázalo por el código de la aplicación que Google te suministró tal como te expliqué en el Paso 1.

Paso 3.- Ingresa todo el código donde quieras que se muestre en tu página web

Eso es todo.

¡Fácil verdad!

¿Cómo añadir el botón de Hangout en mi blog Blogger?
¿Cómo añadir el botón de Hangout en mi blog Blogger?

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

1 comentario: