La conexion entre un blog o web y las redes sociales es imprescindible hoy en dia, como ya sabeis. Pensando en este tema, he diseñado estos dos botones, uno de Facebook y el otro de Twitter que son '2 en uno'. Si, porque realizan la funcion de enlace a nuestro perfil y ademas disponen de un contador que marca las veces que han compartido nuestra pagina en estas redes. Para su realizacion he utilizado CSS3 (sin ningun tipo de imagen) y jQuery para se obtengan los datos automaticamente. El resultado final es este que veis aqui:Si quieres ponerte estos botones en tu blog o web, copia y pega el siguiente codigo donde quieras que se muestren. Donde pone URL DE TU BLOG (en color rojo) escribe la direccion de tu pagina para que funcionen los contadores. Ahora, sustituye lo esta escrito en color azul por tu direccion URL de tu Facebook y la de tu Twitter para que enlacen con tu blog.
ver el codigo<center><div class="contadorredes"><a href="DIRECCION DE FACEBOOK" target="_blank" class="facebook">Facebook<span></span></a><a href="DIRECCION DE TWITTER" target="_blank" class="twitter">Twitter<span></span></a></div></center>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {
var url = "URL DE TU BLOG";
$.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
$('.twitter span').html(data.count);
});
$.getJSON("https://graph.facebook.com/"+url, function(data) {
var sayi = data.shares;
$(".facebook span").html( sayi ? sayi : 0 );
});
})();
</script>
<style>
.contadorredes a {
margin: 2px;color:#ffffff !important;
}
.contadorredes .facebook {
font: bold 18px Trebuchet MS;display: inline-block;
padding: 10px 15px 10px 15px;border:2px solid #3B5998;
text-shadow: -1px 0 #3B5998, 0 1px #3B5998, 1px 0 #3B5998, 0 -1px #3B5998, -1px 1px 2px #3B5998;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);background: #cedce7;background: -moz-linear-gradient(top, #cedce7 0%, #3b5998 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#3b5998));
background: -webkit-linear-gradient(top, #cedce7 0%,#3b5998 100%);
background: -o-linear-gradient(top, #cedce7 0%,#3b5998 100%);
background: -ms-linear-gradient(top, #cedce7 0%,#3b5998 100%);
background: linear-gradient(to bottom, #cedce7 0%,#3b5998 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#3b5998',GradientType=0 );}
.contadorredes .facebook:hover {background: #3b5998;
background: -moz-linear-gradient(top, #3b5998 0%, #cedce7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b5998), color-stop(100%,#cedce7));
background: -webkit-linear-gradient(top, #3b5998 0%,#cedce7 100%);
background: -o-linear-gradient(top, #3b5998 0%,#cedce7 100%);
background: -ms-linear-gradient(top, #3b5998 0%,#cedce7 100%);
background: linear-gradient(to bottom, #3b5998 0%,#cedce7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b5998', endColorstr='#cedce7',GradientType=0 );}
.contadorredes .facebook span {
background: #3B5998;padding: 1px 4px;margin-left:5px;border-radius: 2px;font-size: 14px;}
.contadorredes .twitter {
display: inline-block;font: bold 18px Trebuchet MS;padding: 10px 15px 10px 15px;border:2px solid #32B0D9;text-shadow: -1px 0 #32B0D9, 0 1px #32B0D9, 1px 0 #32B0D9, 0 -1px #32B0D9, -1px 1px 2px #32B0D9;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;-webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.75);background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 0%, #32b0d9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#32b0d9));
background: -webkit-linear-gradient(top, #cedce7 0%,#32b0d9 100%);
background: -o-linear-gradient(top, #cedce7 0%,#32b0d9 100%);
background: -ms-linear-gradient(top, #cedce7 0%,#32b0d9 100%);
background: linear-gradient(to bottom, #cedce7 0%,#32b0d9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#32b0d9',GradientType=0 );}
.contadorredes .twitter:hover {background: #32b0d9;
background: -moz-linear-gradient(top, #32b0d9 0%, #cedce7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#32b0d9), color-stop(100%,#cedce7));
background: -webkit-linear-gradient(top, #32b0d9 0%,#cedce7 100%);
background: -o-linear-gradient(top, #32b0d9 0%,#cedce7 100%);
background: -ms-linear-gradient(top, #32b0d9 0%,#cedce7 100%);
background: linear-gradient(to bottom, #32b0d9 0%,#cedce7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b0d9', endColorstr='#cedce7',GradientType=0 );}
.contadorredes .twitter span {
background: #32B0D9;margin-left:5px;padding: 1px 4px;border-radius: 2px;font-size: 14px;}
</style>
