Como crear unos botones sociales con un toque ‘diferente’

Como crear unos botones sociales con un toque ‘diferente’

21 mayo, 201411 Comentarios


Comparte 😉Buffer this pageShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on LinkedInEmail this to someone
Como crear unos botones sociales con un toque ‘diferente’
5 (100%) 5 votes

Que ganas tenía de estar de nuevo con vosotros y esta semana me siento generoso y os traigo un tutorial para crear unos botones sociales que pueden hacer de vuestra web un sitio mejor y original. La peculiaridad de estos botones que me he currado la iréis viendo según avance el tutorial. Os iré poniendo el código paso a paso y al final del artículo os dejaré el código completo funcionando, sin más vamos a ello.

Que necesito para realizar el tutorial?

Para que puedas realizar este tutorial y que el código te funcione correctamente necesitas un servidor que ejecute de php4 en adelante y poco más ya que el resto de acciones las realizaremos con jquery, css y html5.

Vas a empezar ya o que ‘pesao’?

Ya me dejo de rollos, primero antes de nada os dejo una captura de cual será el resultado final.

Resultado final de botones sociales especiales

Espero que os parezcan atractivos, lo bueno es que muestran el número de followers de cada red social pero albergan algún secreto que os desvelaré a continuación. Primero os voy a enseñar como conseguir desarrollar estos botones.

Código php

El código php lo necesitamos para mostrar el número de followers de nuestros botones sociales y es el siguiente:

function round_num_follows($num) {
	return $num > 999 ? str_replace('.', ',', $num/1000) . 'K' : $num;	
}
function twitter_user_info($screen_name){
	$cache = 'twitter_followers.cache';
	if(file_exists($cache) && filemtime($cache) > time() - 3600000){
		// if a cache file newer than 1000 seconds exist, use it
		$twitter_data = file_get_contents($cache);
		return $twitter_data;
	} else {
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, "https://cdn.api.twitter.com/1/users/lookup.json?screen_name=" . $screen_name); 
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
		$output = curl_exec($ch);   		
		// convert response
		$output = json_decode($output);
		// handle error; error output
		if(curl_getinfo($ch, CURLINFO_HTTP_CODE) !== 200) {
		  var_dump($output);
		}
		curl_close($ch);
		file_put_contents($cache, $output[0]->followers_count);
		return $output[0]->followers_count;
	}
}			}
function facebook_user_info($page_id)
{
	$data = file_get_contents("http://graph.facebook.com/".$page_id."/");
	$fans = json_decode($data, true);
    return round_num_follows($fans['likes']);
}
function googleplus_user_info($profile) {
	$google_api_key = 'AIzaSyDSNlIRJTXVR0aR2H8Rspj9llNNYeV6OkY';
	$data = @file_get_contents("https://www.googleapis.com/plus/v1/people/$profile?key=$google_api_key");   
	$data = json_decode($data, true);
	return round_num_follows($data['circledByCount']);
}

function youtube_user_info($channel) {
	$data = file_get_contents("http://gdata.youtube.com/feeds/api/users/$channel?alt=json");
	$data = json_decode($data, true);
	$stats_data = $data['entry']['yt$statistics'];
	return round_num_follows($stats_data['subscriberCount']);
}

function pinterest_user_info($profile) {
	$metas = get_meta_tags("http://pinterest.com/$profile/");
	return round_num_follows($metas['pinterestapp:followers']);
}

Código html5

El código html necesario para mostrar los botones.

<div class="tuto-cnt">

<div class="horizontal-cnt">

<div class="soc-cnt"></div>

<!-- facebook container -->

<div class="soc-cnt"></div>

<!-- twitter container -->

<div class="soc-cnt"></div>

<!-- gplus container -->

<div class="soc-cnt"></div>

<!-- youtube container -->

<div class="soc-cnt">

<div class="soc-img  pinterest-icon"></div>


<div class="follow-btn"><a href="http://pinterest.com/Muchomasquewebs/"> <img src="http://s-passets-ec.pinimg.com/images/about/buttons/pinterest-button.png" alt="Follow Me on Pinterest" width="70" height="22" /> </a></div>


<div class="soc-count wcd_instagram" data-soc-margin="80"></div>

</div>

<!-- youtube container -->

</div>

<!-- /horizontal-cnt {horizontal container} -->

</div>


<div id="fb-root"></div>

Aquí haremos las llamadas a cada función php previamente creada para obtener el número de follows de cada red social y son:

facebook_user_info('387200181391123');
twitter_user_info("muchomasquewebs");
googleplus_user_info("105261066355450562468");
youtube_user_info("Muchomasquewebs");
pinterest_user_info("Muchomasquewebs");

Os dejo una lista con los datos que hay que proporcionar a cada función para mostrar los follows de cada red social:

Facebook: Id que aparece en la url de nuestro Facebook o Fan Page.

– Twitter: Nombre de nuestra cuenta de twitter sin la @.

 Google+: Id que aparece en la url de nuestro Google Plus. Además de esto hay que activar la API de Google Plus para poder recibir la información. Para ello podéis visitar este artículoque habla de como hacerlo.

– Youtube: Nombre de nuestro canal en la url de nuestro canal de Youtube.

Pinterest: Nombre del perfil que aparece en la url de nuestro Pinterest.

Código css

Este código nos proporciona el estilo de nuestros botones sociales.

@font-face {font-family: NexaBold;
    src: url('../font/Nexa_Bold.eot');
    src: url('../font/Nexa_Bold.eot?#iefix') format('embedded-opentype'),
         url('../font/Nexa_Bold.woff') format('woff'),
         url('../font/Nexa_Bold.ttf') format('truetype'),
         url('../font/Nexa_Bold.svg#OpenSansLight') format('svg');
}

.clear{clear: both;}

.soc-cnt{
	min-width:100px;
	height: 34px; 
	padding: 3px 0px 3px 3px;  
	margin:0px 10px 10px 0px;
	display: inline-block; 
	background-color: #fff;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.31);
    -moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.31);
    box-shadow:         0px 0px 10px rgba(50, 50, 50, 0.31);
}

.soc-cnt:hover .soc-img {
	-webkit-animation: scaleUp 0.3s;
	-moz-animation: scaleUp 0.3s;
	animation: scaleUp 0.3s;
}

.soc-img{
	width: 34px; 
	height: 34px; 
	float: left; 
	margin-right: 10px;
	background: url(../img/social-icons.png) no-repeat;
}

.follow-btn {
	position: relative;
	float:left;
	height:34px;
	padding:7px 0px 0px 0px;
	width:0px;
	opacity:0;
}

.soc-count {
	float:left;
	display:block;
	font: 24px NexaBold;
	height: 22px; 
	margin-top: 0;
	line-height: 21px;
	background:#fff;
	margin-left:4px;
	padding:6px 10px 0px 0px;
}
.soc-lab { 
	font: 11px verdana; 
	color: #333
}

.facebook-icon{ background-position:0px 0px;}
.twitter-icon{ background-position:-34px 0px;}
.gplus-icon{ background-position:-68px 0px;}
.youtube-icon{ background-position:-102px 0px;}
.pinterest-icon{background-position:-136px 0px;}

@-webkit-keyframes scaleUp {
	80% {
		opacity: 0.8;
		-webkit-transform: scale(1.5);
	}
	100% {
		opacity: 0.8;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes scaleUp {
	80% {
		opacity: 0.8;
		-moz-transform: scale(1.5);
	}
	100% {
		opacity: 0.8;
		-moz-transform: scale(1);
	}
}

@keyframes scaleUp {
	80% {
		opacity: 0.8;
		transform: scale(1.5);
	}
	100% {
		opacity: 0.8;
		transform: scale(1);
	}
}

Extra

Con estos códigos nuestros botones sociales tienen que funcionar correctamente pero ahora os voy a dar un extra más que consiste en añadir los botones me gusta y seguir a estas redes sociales de forma que cuando posicionemos el ratón sobre cada red social se desplegará este botón mediante una animación.

Os voy a poner el código necesario para que funcione correctamente, recordad que tenéis que añadirlo antes de la etiqueta </body>.

Código javascript

 

<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&#038;appId=661316190582885&#038;version=v2.0";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
		!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
		window.___gcfg = {lang: 'es'};
	  	(function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/platform.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	  	})();
		$(document).ready(function () {
			$(".soc-cnt").hover(function(){
				$(this).find(".follow-btn").stop().stop().animate({ opacity: "100", width: $(this).find('.soc-count').attr('data-soc-margin')});
			}, function() {
				$(this).find(".follow-btn").stop().stop().animate({ opacity: "0", width:"0"  });
			});							 
		});
// ]]></script>

Descargar código completo

Podéis descargar el código completo en el siguiente enlace:

botones-sociales-muchomasquewebs.rar


Ya está terminado!, si queréis este tipo de botones sociales u otros tan chulos como estos porque-se.com en nuestra web podéis contratar nuestro servicio de mantenimiento de paginas web. Debajo del artículo os dejo la demo de lo que os he enseñado para que podáis probar como funciona y ya de paso os invito a que nos sigáis en cada una de las redes sociales, que nos lo hemos currado!!

Además de esto ya sabéis que podéis compartir el artículo  con quien deseéis y esperamos vuestros comentarios, dudas o errores al respecto.

Resumen
Nombre
Como crear unos botones sociales con un estilo 'diferente'
Descripción
Tutorial paso a paso en el que te enseñamos a crear unos botones sociales con un toque diferente. Si te cansa ver lo mismo de siempre esto seguro que te gustará
Autor
Comparte 😉Buffer this pageShare on FacebookTweet about this on TwitterPin on PinterestShare on Google+Share on LinkedInEmail this to someone




11 comentarios

  • Mustafa Bahassi| Responder

    Me encanta esta solucion ya que resume varias funciones en un solo lugar. La he integrado en mi Web parece que funciona pero no logro hacer visible los numeros de los contadores en nigrita. Solo veo un espacio blanco. He incluido los tres archivos y he configurado las funciones con mis datos pero nada.
    Les agradezco si me pueden hechar una mano.
    Un saludo y gracias.

    • Emilio De Agustín Cazorla| Responder

      Hola Mustafa:

      Si me pasas la url de donde lo has integrado te puedo echar una mano. Muchas gracias por comentar y hacer uso de ello ya que es la finalidad por la que he creado estos botones.

      Ya me dices.
      Un Saludo

      • Mustafa Bahassi| Responder

        Gracias Emilio por contestar tan rapido. Mañana subiré la Web al servidor y te pasaré la url.

      • Mustafa Bahassi| Responder

        Gracias Emilio. Ya lo solucioné. El problema era que el texto tenia color blanco y no se ve sobre un fondo blanco. gracias de nuevo.

        • Emilio De Agustín Cazorla| Responder

          Genial Mustafa!

          Me alegro que te funcione bien.
          Estamos preparando un plugin con estos botones para WordPress con algunas otras funciones más.
          Si necesitas algo ya sabes donde estamos y muchas gracias por leernos.

          • Mustafa Bahassi|

            Sera muy buena idea convertirlo en plugin para WordPress. Le votaría 5 estrellas. Un saludo

  • Javier Marcilla| Responder

    Increíble trabajo Emilio, creo que son los botones sociales más bonitos y funcionales que he visto, y no es un elogio sin fundamento. Deberías plantearte el hacer un plugin de WP, un cliente seguro ya tendrías 😉

    • Emilio De Agustín Cazorla| Responder

      Javier este es el auténtico placer de tener un blog, que a la gente le guste lo que haces es la mayor de las recompensas. Pues te tomo la palabra y cuando saque tiempo pensaré en hacer un plugin.

      • Javier Marcilla| Responder

        Estupendo Emilio, si te decides a trabajar en el plugin y no te importa, te podría dar un par de sugerencias 🙂

        • Emilio De Agustín Cazorla| Responder

          Dame las sugerencias que quieras y me pongo a ello. Gracias!

          • Javier Marcilla|

            Hola Emilio, disculpa la falta de noticias, llevo unos días fuera de España (ahora mismo en Baku), si no puedo antes el fin de semana te escribo, seguramente por email. Un saludo desde “The Land of Fire”!

Soy diseñador/programador desde hace 9 años y un apasionado de las nuevas tecnologías, el deporte y las videoconsolas. No soy PRO de nada ya que me gusta tanto el mundo Apple como el Android aunque me considero un fan de Google. Si queréis contactar conmigo directamente podéis hacerlo a emilio.agustin@muchomasquewebs.com