var sp_preloader = '0'; var sp_gotop = '0'; var sp_offanimation = 'default';

WEB

Web

Botones de redes sociales en html y JQuery

Los botones de redes sociales son elementos indispensables que nuestra página web debería tener, ya que estos nos ayudan a extender el alcance que nuestra web pueda tener, además de aumentar la interactividad del usuario, al compartir un enlace de nuestro sitio. En este tutorial veremos cómo crear e implementar botones para compartir en nuestro sitio, para las principales redes sociales.

Botones compartir redes sociales HTML

Botones para compartir en redes sociales

Este ejemplo basa su funcionamiento en la creación y apertura de los enlace de forma dinámica median JQuery, se utilizaran  funciones para obtener el enlace y título de la página.

El diseño de los botones consiste en contenedores <a> a los cuales se le asignar como fondo el icono de la red social que representan.

HTML

<div class="shared-panel">
	<span>Compartir icones redondos</span><br>
	<a target="_blank" class="shared fb" title="Facebook"></a>	
	<a target="_blank" class="shared tt" title="Twitter"></a>
	<a target="_blank" class="shared gp" title="Google+"></a>
	<a  data-action='share/whatsapp/share' class="shared wa" title="WhatsApp"></a>
	<a target="_blank" class="shared ce" id="sml" title="Email"></a>		
</div>

CSS

.shared-panel{
	overflow: auto;
}
.shared-panel span{
	margin: 10px 0;
	font-size: 16px;
	font-weight: 600;
}
.shared {
	display: inline-block;
	width: 30px; 
	height: 30px;
	margin: 5px 0; 
	padding: 0; 
        /* Recurso incluido en la descarga del ejemplo */
	background: url("shared.png") no-repeat; 
	float: left;
	margin-right: 5px; 
	cursor: pointer;
	border-radius: 50%;
}
.shared:hover{
	opacity: 0.7;
}
.shared.gp {background-position: 0px 0px; background-color: #E62B34;}
.shared.tt {background-position: 0px -30px; background-color: #43BDF0;}
.shared.ce {background-position: 0px -60px; background-color: #8A898D;}
.shared.wa {background-position: 0px -90px; background-color: #0dc143;}
.shared.fb {background-position: 0px -120px; background-color: #6081C4;}

.st2{
   border-radius: 0;
}
.st3{
   border-radius: 5px;
}

Boton de Facebook, Twitter, Google+

Los botones Facebook, Twitter, Google+, serán enlaces web, los cuales contienen diferentes parámetros.

<!-- Botones  -->
<a href="https://www.facebook.com/sharer/sharer.php?u=url&t=titulo"><Facebook/a>

<a href="https://twitter.com/intent/tweet?text=titulo&url=url&via=user">Twitter</a>

<a href="https://plus.google.com/share?url=url">Google Plus</a>

Boton para compartir de  WhatsApp y Correo electrónico

Los botones de WhatsApp y correo electrónico tienen un funcionamiento diferente, ya que no hacer referencia hacia una página web, por el contrario envía un comando para lanzar una aplicación o activar una función en el navegador.

WhatsApp

El comando  whatsapp://send lanzara la aplicación WhatsApp (si es que se encuentra instala en el dispositivo movil), enviándole los parámetros indicados, ya sea el titulo y enlace, además de la acción a realizar, en este caso será compartir.

<a href="whatsapp://send?text=Titulo - Enlace" data-action="share/whatsapp/share"> WhatsApp </a>

Correo electrónico

El comando mailto:? hará que el navegador lance el cliente de correo predeterminado y le envíe los parámetros de subject y body. En Google Chrome el usuario debe de activar previamente esta acción para que tenga efecto.

<a href="mailto:?subject=Titulo&body=Texto" >Correo</a>

Implementado

Leeremos la url de la página con window.location.href y el titulo con document.title, además ya que estos serán integrados en una dirección web deberán se codificados utilizando  la función encodeURIComponent. Ya que la función se ejecutara con todos los elementos que contengan la clase shared, es necesario distinguir en que botón se realizó el clic, para esto verificaremos que clase adicional tienen, y realizaremos la acción correspondiente.

Código completo

$(document).on('click', ".shared", function() {	
	var url = window.location.href;
	var title = document.title;
	
	url = encodeURIComponent(url);
	title = encodeURIComponent(title);
	
	//Boton Facebook
	if($(this).hasClass('fb')){	
		url = 'https://www.facebook.com/sharer/sharer.php?u='+url+'&t='+title;

	//Boton Twitter
	}else if($(this).hasClass('tt')){
		user = 'DevlazMX';//Nuestro usuario de twitter para mostrar como @user
		url = 'https://twitter.com/intent/tweet?text='+title+'&url='+url+'&via='+user;
	
	//Boyton Google Plus
	}else if($(this).hasClass('gp')){
		url = 'https://plus.google.com/share?url='+url;
	
	//Boton WhatsApp
	}else if($(this).hasClass('wa')){		
		url = 'whatsapp://send?text="'+document.title+'" - "'+window.location.href+'"';
	
	//Boton correo electronico
	}else if($(this).hasClass('ce')){
		url = 'mailto:?subject='+title+'&body='+url;	
		
	//Ningun boton valido
	}else return;
	
	//Abrimos la url
	window.open(url, '_blank');			
});

Resultado final:

El resultado final muestra los 5 botones para compartir, además debido a que los botones son creados con CSS estos puede modificar su forma como nosotros queramos.

Articulo Otiginal Aqui