add

¿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

emailEnviar por correo

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios