Implementar íconos para redes sociales con Socicon

Casi en todos los sitos del planeta se promueve la posibilidad de estar actualizado a través de las redes sociales, así como también la posibilidad de compartir los contenidos del sitio en las redes sociales. Por eso, en algún lado hay que mostrarle al usuario los links de twitter, facebook, pinterest, linkedin, google y alguna otra que se use todavía menos.

En este ejemplo, vamos a mostrar como hacer el típico bloque: síguenos en...

Nuestro proveedor de imagen será Socicon. Es muy simple. Una fuente y una hoja de estilo.

Descargar y copiar los archivos de Socicon dentro el theme, por ejemplo: sites/dominio.com/themes/bootstrap-subtheme/libs/socicon

En este caso, trabajamos con un sub-theme de Bootstrap, pero el modo en el que se implementa Socicon es similar en otros theme engines.

Crear un archivo dentro el directorio less de nuestro subtheme de Bootstrap... lo podemos llamar social.less

@font-face {
    font-family: 'socicon';
    src: url('../libs/socicon/font/socicon-webfont.eot');
    src: url('../libs/socicon/font/socicon-webfont.eot?#iefix') format('embedded-opentype'),
         url('../libs/socicon/font/socicon-webfont.woff') format('woff'),
         url('../libs/socicon/font/socicon-webfont.woff2') format('woff2'),
         url('../libs/socicon/font/socicon-webfont.ttf') format('truetype'),
         url('../libs/socicon/font/socicon-webfont.svg#sociconregular') format('svg');
    font-weight: normal;
    font-style: normal;
    text-transform: initial;
}

.socicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'socicon';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.socicon:empty{
    width: 1em;
}

.socicon-twitter:before { content: "a"; }
.socicon-facebook:before { content: "b"; }
.socicon-google:before { content: "c"; }
.socicon-pinterest:before { content: "d"; }
.socicon-foursquare:before { content: "e"; }
.socicon-yahoo:before { content: "f"; }
.socicon-skype:before { content: "g"; }
.socicon-yelp:before { content: "h"; }
.socicon-feedburner:before { content: "i"; }
.socicon-linkedin:before { content: "j"; }
.socicon-viadeo:before { content: "k"; }
.socicon-xing:before { content: "l"; }
.socicon-myspace:before { content: "m"; }
.socicon-soundcloud:before { content: "n"; }
.socicon-spotify:before { content: "o"; }
.socicon-grooveshark:before { content: "p"; }
.socicon-lastfm:before { content: "q"; }
.socicon-youtube:before { content: "r"; }
.socicon-vimeo:before { content: "s"; }
.socicon-dailymotion:before { content: "t"; }
.socicon-vine:before { content: "u"; }
.socicon-flickr:before { content: "v"; }
.socicon-500px:before { content: "w"; }
.socicon-instagram:before { content: "x"; }
.socicon-wordpress:before { content: "y"; }
.socicon-tumblr:before { content: "z"; }
.socicon-blogger:before { content: "A"; }
.socicon-technorati:before { content: "B"; }
.socicon-reddit:before { content: "C"; }
.socicon-dribbble:before { content: "D"; }
.socicon-stumbleupon:before { content: "E"; }
.socicon-digg:before { content: "F"; }
.socicon-envato:before { content: "G"; }
.socicon-behance:before { content: "H"; }
.socicon-delicious:before { content: "I"; }
.socicon-deviantart:before { content: "J"; }
.socicon-forrst:before { content: "K"; }
.socicon-playstore:before { content: "L"; }
.socicon-zerply:before { content: "M"; }
.socicon-wikipedia:before { content: "N"; }
.socicon-apple:before { content: "O"; }
.socicon-flattr:before { content: "P"; }
.socicon-github:before { content: "Q"; }
.socicon-chimein:before { content: "R"; }
.socicon-friendfeed:before { content: "S"; }
.socicon-newsvine:before { content: "T"; }
.socicon-identica:before { content: "U"; }
.socicon-bebo:before { content: "V"; }
.socicon-zynga:before { content: "W"; }
.socicon-steam:before { content: "X"; }
.socicon-xbox:before { content: "Y"; }
.socicon-windows:before { content: "Z"; }
.socicon-outlook:before { content: "1"; }
.socicon-coderwall:before { content: "2"; }
.socicon-tripadvisor:before { content: "3"; }
.socicon-appnet:before { content: "4"; }
.socicon-goodreads:before { content: "5"; }
.socicon-tripit:before { content: "6"; }
.socicon-lanyrd:before { content: "7"; }
.socicon-slideshare:before { content: "8"; }
.socicon-buffer:before { content: "9"; }
.socicon-rss:before { content: ","; }
.socicon-vkontakte:before { content: ";"; }
.socicon-disqus:before { content: ":"; }
.socicon-houzz:before { content: "+"; }
.socicon-mail:before { content: "@"; }
.socicon-patreon:before { content: "="; }
.socicon-paypal:before { content: "-"; }
.socicon-playstation:before { content: "^"; }
.socicon-smugmug:before { content: "¨"; }
.socicon-swarm:before { content: "$"; }
.socicon-triplej:before { content: "*"; }
.socicon-yammer:before { content: "&"; }
.socicon-stackoverflow:before { content: "("; }
.socicon-drupal:before { content: "#"; }
.socicon-odnoklassniki:before { content : ".";}
.socicon-android:before { content: "_"; }
.socicon-meetup:before { content: "]"; }
.socicon-persona:before { content: ")"; }

Luego, incluimos social.less en less/style.less

@import 'social.less';

Crear el bloque con los vínculos a las redes sociales

Ahora creamos un bloque. El siguiente código html es solo un ejemplo.

<ul class="social-net">
  <li class="twitter"><a href="https://twitter.com/tunombre" target="_blank"><span class="socicon socicon-twitter"></span></a></li>
  <li class="google"><a href="https://plus.google.com/123456789012345678901?rel=author" target="_blank"><span class="socicon socicon-google"></span></a></li>
  <li class="linkedin"><a href="https://www.linkedin.com/pub/tu-nombre" target="_blank"><span class="socicon socicon-linkedin"></span></a></li>
</ul>

Seleccionar Full HTML como formato de texto y la región donde se desee ubicar el bloque, generalmente en el footer.

Color a cada logo

Por último, con un poco de css damos el color justo a nuestros íconos.

Agregamos al final de social.less los colores para cada brand.

// append to social.less
// Social Media Brand Colors 
@twitter: #00aced;
@facebook: #3b5998;
@googleplus: #dd4b39;
@pinterest: #cb2027;
@linkedin: #007bb6;
@youtube: #bb0000;
@vimeo: #aad450;
@tumblr: #32506d;
@instagram: #517fa4;
@flickr: #ff0084;
@dribbble: #ea4c89;
@quora: #a82400;
@foursquare: #0072b1;
@forrst: #5B9A68;
@vk: #45668e;
@wordpress: #21759b;
@stumbleupon: #EB4823;
@yahoo: #7B0099;
@blogger: #fb8f3d;
@soundcloud: #ff3a00;

Y por fin, aplicamos algunas reglas de estilo para las lista del footer.

@social-height: 36px;
  @social-width: @social-height;
  
  ul.social-net {
    display: table;
    margin: 0 auto;
    padding: 15px 0;
    list-style: none;
    li {
      float: left;
      margin: 0 4px;
      display: block;
      color: #fff;
      border-radius: 50%;
      border: 1px solid transparent;
      width: @social-width;
      height: @social-width;
      overflow: hidden;
      &.twitter {
        background-color: #00aced;
      }
      &.google {
        background-color: #dd4b39;
      }
      &.linkedin {
        background-color: #007bb6;
      }
      a {
        font-size: 20px;
        line-height: @social-width;
        color: #fff;
        text-align: center;
      }
    }
  }