En esta oportunidad vamos a mostrar como implementar los botones sociales en nuestra web sin utilizar los botones oficiales de cada red social, en este ejemplo vamos a utilizar los iconos de cada red social en SVG «Gráficos Vectoriales Redimensionables» implementados en nuestro código HTML y luego creando cada estilo para cada botón en nuestra hoja de estilo CSS y como un extra en este ejemplo vamos a traernos la información de cada red social para colocar el numero de la cantidad de veces que fue compartido la url en que estamos actualmente esto lo vamos hacer desde nuestro código Javascript con la ayuda de la la librería JQuery.
HTML
En nuestras etiquetas HTML definimos varias clases importantes aqui puedes ver la lista con la explicación de cada clase
– socials-button : Es la clase que nos agrupara todos nuestros botones sociales
– contentsocial : Una clase interna que nos ayudara a alinear nuestros botones
– sc-btn : Esta clase nos da la base de cada botón como el ancho, el alto, el borde redondeado, luego cada boton tiene su clase para aplicar el resto de los estilos.
– sc-icon : Es la etiqueta span con esta clase en donde colocamos nuestro icon en SVG
– sc–twitter : Se definen los colores del botón para twitter
– sc–facebook : Se definen los colores del botón para facebook
– sc–linkedin : Se definen los colores del botón para linkedin
– sc-text : La etiqueta span con esta clase es en donde se va a colocar la cantidad de veces compartidas de cada red social
<div class="socials-button">
<div class="contentsocial">
<a href="#" class="sc-btn sc--twitter sc--tiny">
<span class="sc-icon"><svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z"></path></g></svg></span>
<span class="sc-text">0</span>
</a>
<a href="#" class="sc-btn sc--facebook sc--tiny">
<span class="sc-icon"><svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path></g></svg></span>
<span class="sc-text">0</span>
</a>
<a href="#" class="sc-btn sc--google-plus sc--tiny">
<span class="sc-icon"><svg viewBox="0 0 33 33" width="25" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M 17.471,2c0,0-6.28,0-8.373,0C 5.344,2, 1.811,4.844, 1.811,8.138c0,3.366, 2.559,6.083, 6.378,6.083 c 0.266,0, 0.524-0.005, 0.776-0.024c-0.248,0.475-0.425,1.009-0.425,1.564c0,0.936, 0.503,1.694, 1.14,2.313 c-0.481,0-0.945,0.014-1.452,0.014C 3.579,18.089,0,21.050,0,24.121c0,3.024, 3.923,4.916, 8.573,4.916 c 5.301,0, 8.228-3.008, 8.228-6.032c0-2.425-0.716-3.877-2.928-5.442c-0.757-0.536-2.204-1.839-2.204-2.604 c0-0.897, 0.256-1.34, 1.607-2.395c 1.385-1.082, 2.365-2.603, 2.365-4.372c0-2.106-0.938-4.159-2.699-4.837l 2.655,0 L 17.471,2z M 14.546,22.483c 0.066,0.28, 0.103,0.569, 0.103,0.863c0,2.444-1.575,4.353-6.093,4.353 c-3.214,0-5.535-2.034-5.535-4.478c0-2.395, 2.879-4.389, 6.093-4.354c 0.75,0.008, 1.449,0.129, 2.083,0.334 C 12.942,20.415, 14.193,21.101, 14.546,22.483z M 9.401,13.368c-2.157-0.065-4.207-2.413-4.58-5.246 c-0.372-2.833, 1.074-5.001, 3.231-4.937c 2.157,0.065, 4.207,2.338, 4.58,5.171 C 13.004,11.189, 11.557,13.433, 9.401,13.368zM 26,8L 26,2L 24,2L 24,8L 18,8L 18,10L 24,10L 24,16L 26,16L 26,10L 32,10L 32,8 z"></path></g></svg></span>
<span class="sc-text">0</span>
</a>
<a href="#" class="sc-btn sc--linkedin sc--tiny">
<span class="sc-icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="linkedin" x="0px" y="0px" width="25px" height="25px" viewBox="0 0 146 146" enable-background="new 0 0 146 146" xml:space="preserve">
<path fill="rgba(0,0,0,0)" d="M135.185,0H10.77C4.83,0,0,4.712,0,10.519v124.946C0,141.279,4.83,146,10.77,146h124.415 c5.951,0,10.815-4.721,10.815-10.535V10.519C146,4.712,141.136,0,135.185,0z"></path>
<path fill="#FFFFFF" d="M21.6,54.736h21.69v69.671H21.6V54.736z M32.45,20.101c6.933,0,12.56,5.626,12.56,12.551 c0,6.932-5.627,12.559-12.56,12.559c-6.96,0-12.571-5.627-12.571-12.559C19.879,25.727,25.49,20.101,32.45,20.101"></path>
<path fill="#FFFFFF" d="M56.885,54.736h20.77v9.519h0.297c2.89-5.479,9.964-11.254,20.505-11.254 c21.925,0,25.979,14.427,25.979,33.19v38.216h-21.65V90.529c0-8.081-0.156-18.475-11.262-18.475c-11.276,0-12.997,8.8-12.997,17.888 v34.465H56.885V54.736z"></path>
</svg></span>
<span class="sc-text">0</span>
</a>
</div>
</div>
CSS
En nuestra definición de clases en nuestra hoja de estilos podemos destacar lo siguiente – Cada clase para el botón de cada red social por ejemplo .sc–facebook tiene a su ves dos eventos más definidos en la hoja de estilo como son .sc–facebook:hover y .sc–facebook:active esto seria para nuestro boton de facebook, esto es lo que nos ayudara a poder seguir creando más botones para más redes sociales.
.socials-button {
border-top: 1px solid #F4F1F1;
padding-top: 15px;
}
.sc-btn {
display: inline-block;
position: relative;
margin: 0 .25em .5em 0;
padding: 0;
color: #fff;
font-family: "Helvetica Neue", "Helvetica", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1em;
text-decoration: none;
text-shadow: rgba(0, 0, 0, 0.3) 0px -0.1em 0px;
border: 0;
border-radius: 0.4em;
-webkit-border-radius: 0.4em;
-moz-border-radius: 0.4em;
-ms-border-radius: 0.4em;
-o-border-radius: 0.4em;
background-color: #1a1a1a;
background-image: -webkit-linear-gradient(top, #595959, #1a1a1a 100%);
background-image: -moz-linear-gradient(top, #595959, #1a1a1a);
background-image: -ms-linear-gradient(top, #595959, #1a1a1a);
background-image: -o-linear-gradient(top, #595959, #1a1a1a);
background-image: linear-gradient(top, #595959, #1a1a1a);
box-shadow: inset rgba(0, 0, 0, 0.1) 0px -0.15em 0px, inset rgba(255, 255, 255, 0.2) 0px 0.15em 0px, rgba(0, 0, 0, 0.3) 0px 0.1em 0.3em;
text-align: center;
background-repeat: no-repeat;
-webkit-transition: background-position .1s ease-in-out;
-webkit-appearance: none;
cursor: pointer;
overflow: hidden; }
.sc-btn:hover {
color: #fff; }
.sc-btn:active {
box-shadow: rgba(255, 255, 255, 0.2) 0 0.1em 0, inset rgba(0, 0, 0, 0.3) 0px 0.25em 1em; }
.sc-icon, .sc-text {
display: block;
float: left; }
.sc-icon {
margin: 0 -.4em 0 0;
padding: 0.6em .8em .5em;
border-right: rgba(255, 255, 255, 0.1) 0.1em solid;
box-shadow: inset rgba(0, 0, 0, 0.1) -0.1em 0px 0px; }
.sc-text {
padding: .95em 1em .85em 1em;
font-size: 1.15em;
text-align: center; }
svg {
width: 1.8em;
height: 1.8em;
fill: #fff; }
.sc-block {
display: block; }
.sc--big {
font-size: 24px; }
.sc--small {
font-size: 12px; }
.sc--tiny {
font-size: 9px; }
.sc--tiny .sc-text {
padding: .85em .75em .5em .75em;
text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0px; }
.sc--tiny .sc-icon {
padding: .5em .75em .5em .75em;
border-right: rgba(255, 255, 255, 0.1) 1px solid;
box-shadow: inset rgba(0, 0, 0, 0.1) -1px 0px 0px; }
.sc--short .sc-icon {
padding: 0.4em .9em .35em; }
.sc--short .sc-text {
padding: .75em 1em .75em 1em; }
.sc--tall {
font-size: 1.15em; }
.sc--tall .sc-icon {
padding: 1em .9em .85em; }
.sc--tall .sc-text {
padding: 1.25em 1em 1em 1em; }
.sc--round {
border-radius: 5em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
-ms-border-radius: 5em;
-o-border-radius: 5em; }
.sc--round .sc-icon {
padding: 0.7em .8em .5em 1em; }
.sc--flat {
box-shadow: none;
background-image: none !important; }
.sc--flat .sc-icon {
border-color: transparent; }
.sc--flat:active {
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 0.15em 0.25em; }
.sc--shine {
box-shadow: inset rgba(0, 0, 0, 0.1) 0px -0.15em 0px, inset rgba(255, 255, 255, 0.1) 0px 0.15em 0px, rgba(0, 0, 0, 0.3) 0px 0.1em 0.3em, inset rgba(255, 255, 255, 0.15) 0px 2.5em 0px -1em; }
.sc--shine:active {
box-shadow: rgba(255, 255, 255, 0.2) 0 0.1em 0, inset rgba(0, 0, 0, 0.3) 0px 0.25em 1em, inset rgba(255, 255, 255, 0.1) 0px 2.5em 0px -1em; }
.sc--shine:before, .sc--shine:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0.1em; }
.sc--shine:before {
top: 0;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0) 100%); }
.sc--shine:after {
bottom: .05em;
background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0) 100%); }
.sc--shine:active:before, .sc--shine:active:after {
opacity: 0.5; }
.sc--default {
color: #222;
text-shadow: rgba(255, 255, 255, 0.4) 0 0.1em 0;
background-color: #ebebeb;
background-image: -webkit-linear-gradient(top, white, #ebebeb 100%);
background-image: -moz-linear-gradient(top, white, #ebebeb);
background-image: -ms-linear-gradient(top, white, #ebebeb);
background-image: -o-linear-gradient(top, white, #ebebeb);
background-image: linear-gradient(top, white, #ebebeb); }
.sc--default svg {
fill: #222; }
.sc--default:hover {
color: #222;
background-color: #d2d2d2;
background-image: -webkit-linear-gradient(top, white, #d2d2d2 90%);
background-image: -moz-linear-gradient(top, white, #d2d2d2);
background-image: -ms-linear-gradient(top, white, #d2d2d2);
background-image: -o-linear-gradient(top, white, #d2d2d2);
background-image: linear-gradient(top, white, #d2d2d2);
background-color: #fdfdfd; }
.sc--default:active {
background-color: #dfdfdf;
background-image: -webkit-linear-gradient(top, white, #dfdfdf 100%);
background-image: -moz-linear-gradient(top, white, #dfdfdf);
background-image: -ms-linear-gradient(top, white, #dfdfdf);
background-image: -o-linear-gradient(top, white, #dfdfdf);
background-image: linear-gradient(top, white, #dfdfdf); }
.sc--facebook {
background-color: #33477a;
background-image: -webkit-linear-gradient(top, #5975ba, #33477a 100%);
background-image: -moz-linear-gradient(top, #5975ba, #33477a);
background-image: -ms-linear-gradient(top, #5975ba, #33477a);
background-image: -o-linear-gradient(top, #5975ba, #33477a);
background-image: linear-gradient(top, #5975ba, #33477a); }
.sc--facebook:hover {
background-color: #304373;
background-image: -webkit-linear-gradient(top, #6b84c1, #304373 90%);
background-image: -moz-linear-gradient(top, #6b84c1, #304373);
background-image: -ms-linear-gradient(top, #6b84c1, #304373);
background-image: -o-linear-gradient(top, #6b84c1, #304373);
background-image: linear-gradient(top, #6b84c1, #304373);
background-color: #4560a5; }
.sc--facebook:active {
background-color: #33477a;
background-image: -webkit-linear-gradient(top, #4a66b0, #33477a 100%);
background-image: -moz-linear-gradient(top, #4a66b0, #33477a);
background-image: -ms-linear-gradient(top, #4a66b0, #33477a);
background-image: -o-linear-gradient(top, #4a66b0, #33477a);
background-image: linear-gradient(top, #4a66b0, #33477a); }
.sc--twitter {
background-color: #108ac1;
background-image: -webkit-linear-gradient(top, #47bbf0, #108ac1 100%);
background-image: -moz-linear-gradient(top, #47bbf0, #108ac1);
background-image: -ms-linear-gradient(top, #47bbf0, #108ac1);
background-image: -o-linear-gradient(top, #47bbf0, #108ac1);
background-image: linear-gradient(top, #47bbf0, #108ac1); }
.sc--twitter:hover {
background-color: #0f83b8;
background-image: -webkit-linear-gradient(top, #76cdf4, #0f83b8 90%);
background-image: -moz-linear-gradient(top, #76cdf4, #0f83b8);
background-image: -ms-linear-gradient(top, #76cdf4, #0f83b8);
background-image: -o-linear-gradient(top, #76cdf4, #0f83b8);
background-image: linear-gradient(top, #76cdf4, #0f83b8);
background-color: #21aded; }
.sc--twitter:active {
background-color: #108ac1;
background-image: -webkit-linear-gradient(top, #30b3ee, #108ac1 100%);
background-image: -moz-linear-gradient(top, #30b3ee, #108ac1);
background-image: -ms-linear-gradient(top, #30b3ee, #108ac1);
background-image: -o-linear-gradient(top, #30b3ee, #108ac1);
background-image: linear-gradient(top, #30b3ee, #108ac1); }
.sc--google-plus {
background-color: #b92d25;
background-image: -webkit-linear-gradient(top, #e06b64, #b92d25 100%);
background-image: -moz-linear-gradient(top, #e06b64, #b92d25);
background-image: -ms-linear-gradient(top, #e06b64, #b92d25);
background-image: -o-linear-gradient(top, #e06b64, #b92d25);
background-image: linear-gradient(top, #e06b64, #b92d25); }
.sc--google-plus:hover {
background-color: #b12b23;
background-image: -webkit-linear-gradient(top, #e57f79, #b12b23 90%);
background-image: -moz-linear-gradient(top, #e57f79, #b12b23);
background-image: -ms-linear-gradient(top, #e57f79, #b12b23);
background-image: -o-linear-gradient(top, #e57f79, #b12b23);
background-image: linear-gradient(top, #e57f79, #b12b23);
background-color: #da4a42; }
.sc--google-plus:active {
background-color: #b92d25;
background-image: -webkit-linear-gradient(top, #dc564e, #b92d25 100%);
background-image: -moz-linear-gradient(top, #dc564e, #b92d25);
background-image: -ms-linear-gradient(top, #dc564e, #b92d25);
background-image: -o-linear-gradient(top, #dc564e, #b92d25);
background-image: linear-gradient(top, #dc564e, #b92d25); }
.sc--linkedin {
background-color: #007BB6;
background-image: -webkit-linear-gradient(top, #0497DD, #007BB6 100%);
background-image: -moz-linear-gradient(top, #0497DD, #007BB6);
background-image: -ms-linear-gradient(top, #0497DD, #007BB6);
background-image: -o-linear-gradient(top, #0497DD, #007BB6);
background-image: linear-gradient(top, #0497DD, #007BB6); }
.sc--linkedin:hover {
background-color: #007BB6;
background-image: -webkit-linear-gradient(top, #007BB6, #0497DD 90%);
background-image: -moz-linear-gradient(top, #007BB6, #0497DD);
background-image: -ms-linear-gradient(top, #007BB6, #0497DD);
background-image: -o-linear-gradient(top, #007BB6, #0497DD);
background-image: linear-gradient(top, #007BB6, #0497DD);
background-color: #007BB6; }
.sc--linkedin:active {
background-color: #007BB6;
background-image: -webkit-linear-gradient(top, #0497DD, #007BB6 100%);
background-image: -moz-linear-gradient(top, #0497DD, #007BB6);
background-image: -ms-linear-gradient(top, #0497DD, #007BB6);
background-image: -o-linear-gradient(top, #0497DD, #007BB6);
background-image: linear-gradient(top, #0497DD, #007BB6); }
Javascript
Con respecto a nuestro código javascript podemos comentar lo siguiente
– La variable url sera la url objetivo para consultar a las redes sociales para saber cuantas veces esta url fue compartida
– La función window.services.gplus es una función necesaria para nuestro callback cuando se ejecute la consulta a Google +
– Todas las consultas a los servicios de cada red social se realiza con el uso de la función $.getJSON de la librería Jquery
function linksocial(){
url=document.URL;
//url='http://codepen.io/';
if (!window.services) window.services = {};
window.services.gplus = {
cb: function(number) {
//console.log(number);
$('.sc--google-plus .sc-text').html(number);
}
};
// Facebook Shares Count
$.getJSON( 'http://graph.facebook.com/?id=' + url, function( fbdata ) {
$('.sc--facebook .sc-text').html(fbdata.shares);
});
// Twitter Shares Count
$.getJSON( 'http://cdn.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function( twitdata ) {
$('.sc--twitter .sc-text').html(twitdata.count);
});
// Google+ Shares Count
$.getJSON( 'http://share.yandex.ru/gpp.xml?url=' + url + '&callback=?', function( googledata ) {
});
// LinkIn Shares Count
$.getJSON( 'http://www.linkedin.com/countserv/count/share?url=' + url + '&callback=?', function( linkdindata ) {
$('.sc--linkedin .sc-text').html(linkdindata.count);
});
}
$(document).ready(function() {
linksocial();
});
Resultado Final
Ahora solo resta que puedas probar estos botones sociales en tu sitio web se puede implementar en nuestros servicios de Hosting Virtual, Hosting Multidominios , Cloud VPS o Servidores Dedicados. Si tienes alguna inquietud sobre este tema no dudes en dejarnos un comentario.
