¿Cómo imitar los iconos sociales de WordPress.com en Jetpack?

Iconos sociales de Jetpack

Tal y como podéis ver en la imagen que acompaña a esta entrada, hace apenas unas semanas que WordPress.com cambió los iconos sociales de sus blogs, y desde entonces queríamos modificar los feos iconos sociales de Jetpack, uno de nuestros plugins favoritos, y que nos traen los chicos de WordPress, por esos tan bonitos que habían insertado en nuestro blog de WordPress.

Y así, tras esperar a que en las dos últimas actualizaciones del plugin para WordPress sacaran los nuevos iconos, y tras comprobar que no están por la labor de incluirlos, nos hemos puesto manos a la obra cogiendo el código CSS de WordPress.com, y hemos conseguido replicar sus iconos sociales en el sitio web de APG. Tal y como podéis ver al final de esta misma entrada.

Con ello no sólo hemos conseguido que estéticamente sean mucho más bonitos, sino que la carga del sitio web sea más rápida al no utilizar ninguna imagen en los nuevos iconos sociales.

¿Y cómo lo hemos hecho?

Bueno, lo primero que vamos a necesitar es descargarnos el set de iconos de Genericons, un fantástico set de iconos vectoriales que nos llega, como no, de la mano de los chicos de WordPress.

Una vez descargado debes instalar la carpeta font y el archivo genericons.css en la carpeta de tu hijo de plantilla, o directamente en tu plantilla, si no usas un tema hijo. Lo recomendable sería insertar el código que contiene el archivo genericons.css en el archivo style.css de tu plantilla o hijo de plantilla, aunque también puedes hacer una llamada al archivo insertando este código al inicio de tu archivo style.css:

Copiar al portapapeles
Syntax Highlighter@import url(genericons.css);

Una vez que tenemos instaladas las fuentes que vamos a utilizar, vamos a insertar este pequeño código CSS al final de nuestro archivo style.css y veremos cómo ocurre magia:

Copiar al portapapeles
Syntax Highlighter/*Sharedadddy*/ .entry-content .sharedaddy a.sd-button {
    background: none;
    border: 0 none !important;
    box-shadow: 0 0 0 0;
    color: #fff !important;
}
.sharedaddy ul li a.sd-button > span {
    background-image: none;
}
.sd-social-icon .sd-content ul li a.sd-button, .sd-social-text .sd-content ul li a.sd-button, .sd-content ul li a.sd-button, .sd-content ul li .option a.share-ustom, .sd-content ul li.preview-item div.option.option-smart-off a, .sd-content ul li.advanced a.share-more, .sd-social-icon-text .sd-content ul li a.sd-button, .sd-social-official .sd-content > ul > li > a.sd-button, #sharing_email .sharing_send, .sd-social-official .sd-content > ul > li .digg_button > a {
    border: none !important;
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    margin: 0 5px 5px 0;
    padding: 1px 8px 0 5px;
    text-decoration: none !important;
    text-shadow: none;
    width: 16px;
    height: 16px;
    color: #777777 !important;
}
.sd-content ul li a.sd-button:before {
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font: 16px/1 'Genericons' !important;
    position: relative;
    text-align: center;
    top: 3px;
    vertical-align: top;
}
.sd-social-icon .sd-content ul li.share-print a:before, .sd-social-text .sd-content ul li.share-print a:before, .sd-content ul li.share-print div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-print a:before, .sd-social-official .sd-content li.share-print a:before {
    content: "\f469";
}
.sd-social-official .sd-content li.share-print a:before {
    color: #777777 !important;
}
.sd-social-icon .sd-content ul li.share-digg a:before, .sd-social-text .sd-content ul li.share-digg a:before, .sd-content ul li.share-digg div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-digg a:before, .sd-social-official .sd-content li.share-digg a:before {
    content: "\f221";
}
.sd-social-icon .sd-content ul li.share-email a:before, .sd-social-text .sd-content ul li.share-email a:before, .sd-content ul li.share-email div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-email a:before, .sd-social-official .sd-content li.share-email a:before {
    content: '\f410';
}
.sd-social-official .sd-content li.share-email a:before {
    color: #777777 !important;
}
.sd-social-icon .sd-content ul li.share-linkedin a:before, .sd-social-text .sd-content ul li.share-linkedin a:before, .sd-content ul li.share-linkedin div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-linkedin a:before {
    content: '\f207';
}
.sd-social-icon .sd-content ul li.share-twitter a:before, .sd-social-text .sd-content ul li.share-twitter a:before, .sd-content ul li.share-twitter div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-twitter a:before {
    content: '\f202';
}
.sd-social-icon .sd-content ul li.share-reddit a:before, .sd-social-text .sd-content ul li.share-reddit a:before, .sd-content ul li.share-reddit div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-reddit a:before {
    content: '\f222';
}
.sd-social-icon .sd-content ul li.share-tumblr a:before, .sd-social-text .sd-content ul li.share-tumblr a:before, .sd-content ul li.share-tumblr div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-tumblr a:before {
    content: '\f214';
}
.sd-social-icon .sd-content ul li.share-stumbleupon a:before, .sd-social-text .sd-content ul li.share-stumbleupon a:before, .sd-content ul li.share-stumbleupon div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-stumbleupon a:before {
    content: '\f223';
}
.sd-social-icon .sd-content ul li.share-pocket a:before, .sd-social-text .sd-content ul li.share-pocket a:before, .sd-content ul li.share-pocket div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-pocket a:before {
    content: '\f224';
}
.sd-social-icon .sd-content ul li.share-pinterest a:before, .sd-social-text .sd-content ul li.share-pinterest a:before, .sd-content ul li.share-pinterest div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-pinterest a:before {
    content: '\f209';
}
.sd-social-icon .sd-content ul li.share-google-plus-1 a:before, .sd-social-text .sd-content ul li.share-google-plus-1 a:before, .sd-content ul li.share-google-plus-1 div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-google-plus-1 a:before {
    content: '\f218';
}
.sd-social-icon .sd-content ul li.share-facebook a:before, .sd-social-text .sd-content ul li.share-facebook a:before, .sd-content ul li.share-facebook div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-facebook a:before {
    content: '\f204';
}
.sd-social-icon .sd-content ul li.share-press-this a:before, .sd-social-text .sd-content ul li.share-press-this a:before, .sd-content ul li.share-press-this div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-press-this a:before, .sd-social-official .sd-content li.share-press-this a:before {
    content: '\f205';
}
.sd-social-official .sd-content li.share-press-this a:before {
    color: #2BA1CB;
}
.sd-social-official .sd-content ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.sd-social-official .sd-content .sharing-hidden ul > li.share-end {
    clear: both;
    height: 0;
    margin: 0;
}
.sharing-hidden ul {
    margin: 0;
}
.sd-social-icon .sd-content ul li[class*="share-"] a, .sd-social-icon .sd-content ul li[class*="share-"] div.option a {
    border: 0 none;
    border-radius: 50%;
    box-shadow: none;
    line-height: 1;
    padding: 8px;
    position: relative;
    top: -2px;
}
.sd-social-icon .sd-content ul li[class*="share-"] a.sd-button > span, .sd-social-icon .sd-content ul li[class*="share-"] div.option a span {
    line-height: 1;
}
.sd-social-icon .sd-content ul li[class*="share-"] a:hover, .sd-social-icon .sd-content ul li[class*="share-"] div.option a:hover {
    border: medium none;
    opacity: 0.6;
}
.sd-social-icon .sd-content ul li[class*="share-"] a.sd-button:before {
    top: 0;
}
.sd-social-icon .sd-content ul li[class*="share-"] a.sd-button.share-custom {
    padding: 8px 8px 6px;
    top: 5px;
}
.sd-social-icon .sd-content ul li a.sd-button.share-more {
    margin-left: 10px;
}
.sd-social-icon .sd-content ul li:first-child a.sd-button.share-more {
    margin-left: 0;
}
.sd-social-icon .sd-content ul li[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #E9E9E9;
    margin-top: 2px;
    text-indent: 0;
}
.sd-social-icon .sd-content ul li.share-tumblr[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #2C4762;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-facebook[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #3B5998;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-stumbleupon[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #EA4B24;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-twitter[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #00ACEE;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-pinterest[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #CA1F27;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-digg[class*="share-"] a.sd-button {
    color: #555555 !important;
}
.sd-social-icon .sd-content ul li.share-press-this[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #1E8CBE;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-linkedin[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #0077B5;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-google-plus-1[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #DD4B39;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-pocket[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #EE4056;
    color: #FFFFFF !important;
}
.sd-social-icon .sd-content ul li.share-reddit[class*="share-"] a.sd-button {
    background: none repeat scroll 0 0 #CEE3F8;
    color: #555555 !important;
}

Esperamos que os guste y os resulte útil esta pequeña modificación de la hoja de estilo del fantástico plugin Jetpack.

Por cierto, el código lo hemos limpiado de todo aquello que hemos visto que no es necesario, pero todavía se podría limpiar un poco más, así que esperamos vuestros aportes para ir actualizando y acortando todo lo posible esta hoja de estilo.