Botón compartir en WhatsApp para Blogger | Oloblogger Sin duda WhatsApp es una de las aplicaciones más populares que existen actualmente para teléfonos mó...

7 de octubre de 2014

Botón compartir en WhatsApp para Blogger

Sin duda WhatsApp es una de las aplicaciones más populares que existen actualmente para teléfonos móviles, así que podría ser de interés a efectos promocionales, facilitar que alguien pueda enviar nuestros posts a esa red mediante la pulsación de un simple botón.

Sería uno similar a los que tenemos habitualmente para compartir los enlaces en Twitter, Facebook, Google+, etc. pero que al pulsarlo desde un móvil, directamente conectaría con WhatsApp para enviar a la persona o grupo que queramos los datos que hayamos programado. Normalmente un título y el enlace de la entrada.

¿Lo vemos?




OPCION CSS


Buscamos en la plantilla cualquier parte dentro del pie de post (post-footer) que nos convenga, por ejemplo a continuación de los botones sociales estándar de Blogger o los que hayamos añadido nosotros, y ahí insertamos este HTML:

<div id='whatsapp'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compartir en WhatsApp' alt='Compartir en WhatsApp'></a></div>

Como veis, la estructura es la de un simple enlace sin contenido, a cuya dirección se le añade un texto que llegará a WhatsApp como parámetro. Ese texto lo podemos construir como queramos y en el ejemplo he usado etiquetas data para ello, la del título del post más el enlace permanente.

Nada impide poner otros datos como por ejemplo un data:post.snippet para añadir un breve resumen del contenido del post o incluso un texto fijo tipo "Mira lo que he visto en Internet". Whatsapp no tiene límite de caracteres como sí sucede por ejemplo en Twitter, así que echadle imaginación


He añadido una clase (whatsapp) para poder configurar el aspecto del botón fácilmente desde nuestro CSS. Este sería un ejemplo para un simple botón centrado:

#whatsapp {
display: none;
}
#whatsapp a {
display: block;
width: 150px;
height: 150px;
overflow: hidden;
margin: 0 auto;
background: url(http://4.bp.blogspot.com/-YX0vEZIHEEE/VDBYg7qqhqI/AAAAAAAARUk/LF_bfGMMcCo/s150/WhatsApp%2BLogo.png);
}
@media (max-width: 800px) {
#whatsapp a {display: block;}
}

Y este sería el resultado:


¿Qué? ¿Que no lo veis? Pues esa es la idea, que en ordenadores no se vea y que sólo aparezca cuando la pantalla tiene un ancho menor de 800px de ancho, caso en el que presuntamente estamos viendo esto desde un móvil. Eso lo hace el selector @media que podéis ver un poco más arriba.

El motivo de hacerlo así es que por la propia naturaleza del botón, este sólo funciona cuando se está en un teléfono móvil, lo que hace inútil que se vea en ordenadores. Si hacéis más pequeña la ventana (como mucho de 800px), observaréis como aparece el botón dónde dije.


OPCIÓN CON JAVASCRIPT


Para no depender del ancho y que realmente se vea sólo en dispositivos móviles, podemos usar algo de JavaScript para detectar el tipo de navegador que se está usando.

En este caso la regla @media (max-width: 800px) deberíamos borrarla completa y después del HTML con el que formamos el botón en sí mismo, añadir esto:

<script>//<![CDATA[
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {document.getElementById("whatsapp").style.display="block";}
else {document.getElementById("whatsapp").style.display="none";}
//]]></script>

En la condición se podrían quitar iPad e iPod porque creo que lo normal es que no tengan WhatsApp, pero lo he dejado para que veáis los distintos navegadores que usan los dispositivos móviles y por si alguna vez os hace falta usar ese pequeño truquillo.


OTROS DISEÑOS PARA EL BOTON


Simplemente cambiando la imagen del background del selector #whatsapp a, tendréis el botón que queráis. Las siguientes están sacadas de la página oficial de la aplicación, pero no hay problema en usar otras. Si son de tamaño distinto a 150x150 píxeles (como la primera que pongo) no olvidéis cambiar esas medidas en el CSS.



Como con otras modificaciones, ninguno de estos sistemas funcionará en las plantillas para móviles por defecto o prediseñadas de Blogger. Sólo lo hará si tenéis la plantilla móvil en la opción personalizada (custom) o si el diseño de vuestro blog es adaptable (RWD) y tenéis inhabilitada la plantilla móvil.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

76 comentarios :

  1. Hace mucho tiempo me parece que te pregunte sobre este botón. Ahora si que lo podre implementar.
    Te estoy enviando un correo, porque necesito de tu AYUDA.

    Saludos amigo

    ResponderEliminar
  2. Muy bueno!!
    Muchas gracias por el post!

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Muy interesante este método para compartir nuestros blog! Gracias Oloman!

      Eliminar
  4. Ostras¡ como #mola. Tengo que probarlo. Gracias¡

    ResponderEliminar
  5. Esto lo tenía visto en musicamemoriadum y bonita pagina por cierto . me imagine que algun dia lo ivas a compartir . Gracias

    ResponderEliminar
  6. Ya tienes mi voto para el premio Bitácoras, por todos los años que llevas compartiendo con nosotros te lo mereces. Suerte.

    ResponderEliminar
  7. Muy bueno. Gracias!

    PD: por cierto, conoces algun metodo para automaticamente convertir textos a enlaces en los comentarios? Encontre una funcion jquery en vagabundia pero ni idea de como implementarla en blogger...

    ResponderEliminar
    Respuestas
    1. Pues no sé a que función te refieres, pero efectivamente, la única forma que pienso que puede haber, tiene que ser con JavaScript.

      Eliminar
  8. Oloman!
    Necesito tu ayuda. Coloque en mi blog (http://elpendrivedebocha.blogspot.com.ar/) las redes sociales con un efecto (cambia de color al pasar el raton), en el chrome me anda perfecto, en el mozilla no. Que debo hacer?

    Saludos desde Baires!
    Cristian Gabriel González

    ResponderEliminar
    Respuestas
    1. Echa un vistazo a esta entrada: CSS para decolorar imágenes. Ahí verás que para Firefox tendrás que añadir un código especial.

      Eliminar
  9. Saludos Oloman.. todavia no agrego el boton de whatsapp en mi blog por que deseo arreglar unas cositas primero.. y una de ellas es la siguiente..:
    quiero cambiar .. "Publicar un comentario en la entrada" segui los pasos en un blog de ayuda usando esto: h4 id='comment-post-message'..data:postCommentMsg /h4... cambiando: data:postCommentMsg/.. por lo que yo queria pero no me da por ningun lado... tu que eres un mago del codigo.. sera que me puedes echar una manito?... te lo agradeceria infinitamente.. de antemano Gracias.. y un Abrazo DTB.. !!!!

    ResponderEliminar
    Respuestas
    1. Como la plantilla normal y la de móviles tienen partes duplicadas, quizás lo estés cambiando en la que no es. Busca otra data como esa y prueba

      Eliminar
  10. Votado en Bitácoras, este blog es una luz en la oscuridad para los eternos principiantes como yo ;)

    ResponderEliminar
  11. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. El CSS sólo puede ir en dos sitios:
      - en la plantilla, entre las etiquetas SKIN, tal cual lo viste aquí
      - en la plantilla en la zona HTML (o en un gadget) pero en ese caso entre etiquetas <style> CODIGO CSS </style>

      Echa un vistazo aquí para más detalle.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. No veo ninguno de estos códigos en tu plantilla... ¿?

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Lo siento, pero he mirado de nuevo y sigo sin verlo. Ni siquiera tienes ninguna clase que se llame post-footer.

      Eliminar
  12. ¿Es posible modificar el INCLUDABLE que hiciste en este post
    http://www.oloblogger.com/2014/03/personalizar-gadget-botones-sociales-blogger.html?showComment=1398880327293#c6579805798539637499 para añadir el de whatsapp?

    ResponderEliminar
    Respuestas
    1. Posiblemente sí, pero no exento de bastante complicación. Ese post que citas es para adaptar los botones que vienen de serie con las plantillas de Blogger, no para añadir nuevos que es lo que propones en tu comentario.

      Eliminar
  13. Genial que se ofrezca esta opción. Ésta sí que es una utilidad de lo mejorcito para compartir. Gracias.

    ResponderEliminar
  14. no me jala amigo y puse todo que decia en en el tutorial

    ResponderEliminar
    Respuestas
    1. Todo, todo seguro que no porque de lo contrario te funcionaría... o bien no lo estás viendo en la pantalla de un móvil.

      De todas formas sin una dirección para verlo no te puedo concretar.

      Eliminar
  15. Gracias por la explicación. ¿Puede usarse para enviar una imagen junto al texto?

    ResponderEliminar
    Respuestas
    1. He estado buscando y ya veo que la respuesta será negativa.

      Eliminar
    2. Hola. Aquí es dónde WhatsApp explica el funcionamiento del botón que sirve de enlace y sólo vi lo del texto + link.
      Si tú encontraste que no hay más, no me extraña. Gracias por decirlo.

      Eliminar
  16. Saludos! Hermano, necesito su ayuda. He colocado los códigos y no me funciona, sobre todo en los teléfonos del sistema operativo iOS (Iphone). Necesito de su ayuda, pliss

    ResponderEliminar
    Respuestas
    1. Si usas la opción que llamé "CSS", seguro que te funciona porque esa si la tengo probada en mi IOS y además, es independiente del S.O.

      Eliminar
    2. No me funciona en los Iphone. Y he puesto el código en plantillas de prueba.

      Eliminar
    3. ¿En qué página lo tienes puesto?

      Eliminar
  17. Hola amigo .... esta excelente este tutorial, he puesto todo y sale perfecto pero desde cuando en un dispositivo toco el boton y le doy enviar solo envia el titulo del post, pero no el enlace ..... http://enterate111.blogspot.com/2015/01/nueva-prueba.html este es el blog ... por favor qeudo agradecido por tu ayuda ..... no se que me falta para que comparta tambien en link de cada entrada

    ResponderEliminar
    Respuestas
    1. ¿Y dónde tienes el botón de WhatsApp, Edward? No lo veo en esa dirección que me pasas

      Eliminar
    2. Oloman gracias por tu respuesta, super raro porque desde un iphone si veo el boton standar que tu pones de ejemplo, pero ya no comparte ni el titulo del post y menos el link, plis revisa desde un móvil y de verdad mil gracias si me puedes ayudar !!!!

      Te dejo una captura de pantalla, el único dilema es que me envía a whatsApp selecciono la persona y cuando le doy enviar no sale nada :(

      https://dl.dropboxusercontent.com/u/31270671/Foto%2018-02-15%2014%2031%2029.png

      Eliminar
    3. AMIGO HICE UNAS NUEVAS PRUEBAS Y TODO RESULTO GENIAL.... Mil gracias :D

      Eliminar
    4. Me alegro, porque venía a decirte que yo no observaba ningún problema y que no podía ayudarte :)

      Eliminar
    5. hola edward podrías contarnos que pruebas hiciste ya que tengo el mismo problema en android todo bien pero en iphone no me comparte el link

      Eliminar
    6. A mí también me gustaría saberlo... ;)

      Eliminar
  18. hola oloman, me pareció bastante interesante que al modificar el tamaño de la ventana en mi pc tu página se adaptaba perfectamente a la medida, me puedes decir que debo hacer para aplicar esto también en mi blog? SONIDOS&NOTAS

    ResponderEliminar
    Respuestas
    1. Son muchas pequeñas cosas Jhon, muchas incluso para un tutorial, pero básicamente se trata de utilizar porcentajes para los anchos de cada caja y luego trajinar un poco con las @media CSS para ajustar lo que con lo otro no se pueda.

      Eliminar
    2. en pocas palabras mucho lío, XD pero si sabes de algún tutorial acepto las recomendaciones. :D

      Eliminar
    3. Si quieres algo hecho para sólo ir modificando, aquí tienes esta otra entrada. Al menos te puede valer para saber cómo se hace.

      Eliminar
    4. me las apañaré, ahora mismo empiezo a trastear con ella. jajajja seguro que mañana ya me va con el nuevo diseño. ;) gracias!

      Eliminar
  19. Hola Oloman ..... espero todo marche genial en tu vida ..... vengo a molestarte con algo curioso que me sucede, lo instale y todo perfecto, pero he notado que el botón a veces en ciertas entradas no sirve y solo me pone el titulo ..... la mayoría de entradas sirve perfecto, pero tengo varias en las cuales publico y no sirve .... sabes de que puede depender que sirva o no en diferentes entradas ¿?

    ResponderEliminar
    Respuestas
    1. Pues así sin saber qué patrón pueden tener las entrada que fallan, Edward, sólo se me ocurre que los títulos tengan caracteres "raros" para WhatsApp, como guiones o quizás comillas. Pero lo dicho, a priori ni idea.

      Eliminar
    2. Tu a priori fue perfecto, efectivamente revise los títulos y las que no compartía tenia caracteres como # - @ % & ... Gracias maestro .... pregunta mi bro tu tienes punto para hacer llegar para un café o una cerveza ¿?

      Eliminar
    3. No, pero gracias igualmente ;)

      Eliminar
  20. Olo brother, no sé que hago mal pero no veo el botón. Ya lo probé desde el celular y nada :-( Podrías iluminarme? De antemano gracias!

    http://www.alrictechx.net.ve/

    ResponderEliminar
    Respuestas
    1. Alex, por algún motivo que desconozco, el código CSS que añadiste no se interpreta. Prueba a cambiarlo de sitio. Ponlo al principio del CSS en la plantilla en lugar de al final.

      Eliminar
  21. todo está muy bonito, pero porqué mier.....coles no lo tienes en tu blog?

    ResponderEliminar
    Respuestas
    1. En este blog no :)

      El motivo es que el contenido de este blog creo que no se presta a ser compartido por WhatsApp, dónde además (en móviles) tampoco se verían del todo bien algunos códigos y ejemplos que publico. Teniendo en cuenta eso ya sólo se trata de economizar recursos. Si algo pienso que no se va a usar, se va a usar poco o su desarrollo tiene más peso (o inconvenientes) que ventajas, pues mejor no lo uso.
      De todas formas no adopto todo lo que publico ¿imaginas que fuera así? :)

      Eliminar
  22. lo he probado tal y como dices y en mi Smartphone no me sale :(

    no se que estare haciendo mal pleaseee

    ResponderEliminar
  23. Hola ¿Te sale el que puse yo en esta entrada?
    Pues si es que sí sólo tienes que intentarlo de nuevo siguiendo las instrucciones que di, ya que no veo actualmente este código en tu blog.

    ResponderEliminar
    Respuestas
    1. la cuestion es que me tira de error, el html que han pasado mas abajo me va mejor ponerlo en el mismo post

      < div class='whatsapp'>< a class='ssba' data-action='share/whatsapp/share' href='whatsapp://send?text=" AQUI PON EL ENLACE DE TU PAGINA "' title='Compartir en WhatsApp' alt='Compartir en WhatsApp'>Whatsapp< /a>< /div>

      pero me gustaria que saliese alguna imagen a la hora de ponerlo en whatsapp de poder ser, gracias por tu ayuda y sabiduria :)

      Eliminar
  24. Yo tuve que modificar un poco el código HTML para que me funcionase:

    < div class='whatsapp'>< a class='ssba' data-action='share/whatsapp/share' href='whatsapp://send?text=" AQUI PON EL ENLACE DE TU PAGINA "' title='Compartir en WhatsApp' alt='Compartir en WhatsApp'>Whatsapp< /a>< /div>

    ResponderEliminar
    Respuestas
    1. este va de lujo, pero echo en falta que cuando se comparta salga una imagen o algo, sabrias como hacerlo ??

      Eliminar
    2. A mi también me gustaría que se compartiera mi imagen publicitaria, no solo el enlace y o descripción. Desconozco si es posible hacerlo.
      Haré pruebas

      Eliminar
    3. Pensando en ello, tiene que entrañar cierta dificultad porque la forma de compartir imágenes por whatsapp es enviando un archivo, de todos modos mirare si hay posibilidad de subir la imagen a la nube "google drive" y mediante un Script dar la orden de envío al compartir.

      Eliminar
    4. una ultima cosilla, como seria para que saliese el logo WhatsApp en vez del enlace en el codigo??

      Eliminar
    5. Si te refieres a lo que viene ser el botón, esta parte del codigo < div class='whatsapp'> es la que carga el estilo CSS.
      Si estas usando blogger, dirigete a plantilla, editar HTML, clic sobre el texto y pulsa la tecla "control + f" se te abrira una caja de texto en la parte superior derecha, escribe por ejemplo ".header" y te llevara a una zona de texto azulado. Busca un hueco y pon esto:
      /* WhatsApp
      ----------------------------------------------- */
      .whatsapp a {

      background-image: url("http://www.niemanlab.org/images/whatsapp-share-button.png");

      }

      Eliminar
    6. Así me gusta, que os divirtáis solos ;)

      Lo de la imagen no tengo ni idea si es posible, aunque soy de la misma opinión que Pitifaluticos y pienso que no.

      Sobre el código que estáis utilizando, ese sólo vale para ponerlo en una entrada y lo tendréis que repetir para cada entrada personalizando la dirección que enviáis.

      Lo que yo proponía es que automáticamente saliera en todas las entradas sin necesidad de añadirlo manualmente en cada una de ellas y que lo que se compartiera fuera la dirección de la entrada, no siempre la dirección principal del blog.

      Pero bueno, cada cual lo puede usar como prefiera.

      Eliminar
  25. Hola !!! Primero quiero agradecerte ya que mucho de mi blog lo he organizado gracias a ti.
    Tengo una pregunta:
    ¿Como hacer para que desde una imagen de Whatsapp en mi blog PARA MOVILES, la persona al pulsarla se pueda rediriguir directamente a Whatsapp y escribirme por ese medio?. Me hago entender?
    Este es mi blog: http://www.revoltososrecreaciones.com
    La imagen que me interesa redireccionar es la que sigue luego del logo grande al principio. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Eso desconozco como hacerlo, aunque si se puede, sería una buena idea.

      Eliminar
    2. Gracias por responderme !!!

      Ahora no logrando lo anterior, me gustaria poder:
      - Que al puncionar la imagen "Coloque una nueva imagen pero al final de la pagina" para compartir. En el mensaje en Whatsapp salga el enlace a la pagina que se esta compartiendo en particular.
      Solo logro colocar un mensaje pero con enlace la pagina principal de mi blog y no es lo que quiero. leo al inicio de tu explicacion pero no logre hacerlo. Muchas gracias

      Eliminar
    3. Si usas data:post.url, tal y como incluye el primer código de esta entrada, se comparte la página que se está viendo (no la principal del blog).

      Eliminar
    4. Este codigo es el que estoy utilizando en un gaget dentro de mi diseño. Ya ni me acuerdo de donde lo saque, me funciona perfectamente, pero solo me comparte el texto y el enlace a la pagina principal tal como esta escrita. En realidad e intentado lo de data:post.url pero no me funciona. Alguna sugerencia !! Gracias

      " No me dejo escribir el codigo en el comentario" disculpas.

      Eliminar
    5. No Revoltosos. El código que tienes es otro. Si no te importa, cámbialo por el que puse en esta entrada, usando el primer y segundo trozo de código.

      Con eso seguro que te funciona como quieres.

      Eliminar
  26. El botón sale en mi móvil Android, pero lo malo es que cuando le doy a compartir y me lleva a whatsapp, no me comparte el enlace. Lo único que sale es una rayita así -
    enigmasmisterio.blogspot.com es uno de mis blogs donde tengo el botón pero no funciona como te dije.

    ResponderEliminar
    Respuestas
    1. Hola Jose Luis. Para ir descartando cosas ¿el que ves en este post te funciona?

      Eliminar
  27. Bueno oloman, no me funciono. Pero si el d una amiga tuya q explica lo mismo y enlaza contigo, tal vez su explicacion la capte mejor. Ya esta solucionado muchas gracias d todos modos. Gracias a vuestros aportes se nos hace más sencillo evolucionar al mismo tiempo q lo hacen los dispositivos, sino algunos blog se moririan despues d muchas horas invertidas.

    ResponderEliminar
    Respuestas
    1. Bueno, vale. A veces sí que es cuestión de cambiar las palabras de la explicación. Estupendo si ya lo tienes.

      Eliminar