También estoy en: Ver el perfil de Jon González Garrido en LinkedIn

Botón para compartir en Whatsapp con Joomla de manera sencilla

Valora este artículo
(1 Voto)
Botón para compartir en Whatsapp con Joomla de manera sencilla - 5.0 out of 5 based on 1 vote
Hace años que las aplicaciones de chat como Whatsapp han implementado un código sencillo para poder compartir tu contenido en ellas y compartir contenido en whatsapp en Joomla, Wordpress o cualquier otro CMS es muy sencillo. También explicaré cómo ocultar el botón de compartición en Whatsapp en móviles aprovechando dicho espacio para otras necesidades. Este artículo se centra en compartir artículos normales o K2 de Joomla en Whatsapp de manera sencilla, aunque la mecánica es muy similar en otros gestores de contenidos como Wordpress o Drupal.

El primer paso es determinar en que lugar queremos que salga el icono de compartir de Whatsapp. Lo mas probable es que tengamos ya alguna extensión instalada con iconos de compartir o quizás en la misma plantilla que usamos ya venga.

Para saber si la plantilla está sobreescribiendo el mostrado de artículos debemos comprobar si existe la siguiente ruta:

/templates/nombre-de-nuestro-template/html/com_content/article/default.php

Si en lugar de funcionar con los artículos base funcionamos con K2 se deberá buscar si existe una carpeta com_k2.

En caso de existir habría que mirar si en dicho fichero se encuentra algún código que podamos identificar que sea de redes sociales. Con buscar la palabra "Facebook" o Twitter"" saldremos de dudas.

En caso de no encontrar mención a ninguna red social solo quedan 2 opciones, que se haga a través de un plugin o a través de un módulo. Tal y como comento en otros artículos un plugin es un trozo de código que se inserta para hacer alguna acción (por ejemplo mostrar un contenido) en un punto concreto de ejecución. Hay mas información de los plugins aqui. Un módulo en cambio es un trozo de código que se ejecuta y se posiciona en un lugar concreto del sitio web, es decir, en una posición de la plantilla.

En caso de ser un módulo será simple detectarlo por su nombre en Extensiones-Gestión de módulos.

En caso de ser un plugin se encontrará en Extensiones-Plugins.

Una vez que sepamos donde debemos insertar el código que genera la opción de compatir vía Whastapp solo queda insertar el código, comprendiendo su funcionamiento primero.

En primer lugar se debe obtener el título del artículo actual y comprobar si el dispositivo del visitante es un móvil o no. En caso de usar móvil para visionar este artículo es posible que se tenga scroll vertical.

getTitle();
	
	$useragent=$_SERVER['HTTP_USER_AGENT'];
	$esMobil = (preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)));
?>

 

A continuación se debe añadir el enlace para compartir en Whatsapp. Lo ideal es descargar un icono de Whatsapp con el tamaño que se desee para que tenga un mejor aspecto, aunque lo mas importante es el enlace a Whatsapp:


Compartir en whatsapp

Como se puede observar en el código es suficiente crear un enlace a la dirección whatsapp://send añadiendo posteriormente el texto que queremos poner y el enlace del artículo. En el caso de este post el texto que se compartiría vía Whatsapp sería:

Botón para compartir en Whatsapp con Joomla - Enlace

Una vez comprendido el funcionamiento podeis poner otro tipo de mensajes como "Mira este artículo tan interesante que he visto Enlace" o similares.

También podeis terminar este ejemplo añadiendo un if que condicione el mostrado del icono a dispositivos móviles, aunque al ser algo trivial lo dejamos "de deberes".

Cualquier duda estaré encantado de responderla en los comentarios!

A continuación podeis descargar el código para compartir un artículo en joomla, así como el icono para su directa inserción para facilitar el trabajo:

Botón de compartir en Whatsapp

 

 

Visto 12942 veces Modificado por última vez en Miércoles, 31 Mayo 2017 07:01
Jon González Garrido

Email Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

3 comentarios

  • Enlace al Comentario Dámaso Jueves, 12 Mayo 2016 22:59 publicado por Dámaso

    gracias en cantidades industriales...llevaba tiempo intentando colocar "compartir por whatsapp" y no lo lograba,hasta que pegué el código y sale . lo que no sale es la imágen del símbolo de whatsapp, aunque tengo la imágen subida en el gestor multimedia... como podría lograrlo? sólo me falta ese detalle para clavarlo.
    Saludos

  • Enlace al Comentario Jon González Garrido Lunes, 19 Octubre 2015 08:00 publicado por Jon González Garrido

    Gracias a ti Juan Carlos por el comentario, me alegro de que el artículo se entienda y sirva a la gente.

    Un saludo

  • Enlace al Comentario Juan Carlos Viernes, 24 Julio 2015 11:08 publicado por Juan Carlos

    gracias!

    me ha servido a la perfección!

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

Contacto

La mejor manera de contactar conmigo es el formulario de contacto de esta página, aquí.

Acerca de mi

Soy un Ingeniero superior que ha obtenido la ingeniería técnica mediante la UPV/EHU y la superior mediante la UNED.

Mi carrera laboral se ha desarrollado sobre varias tecnologías, en especial PHP, MySQL y Apache.