Dicen que el camino más rápido es siempre la línea recta, pero no necesariamente es el más efectivo, ni imperativamente el que deberíamos tomar, principalmente porque a veces los caminos rectos están llenos de cuestas, baches y obstáculos.
Esto traducido a WordPress viene a querer decirte que "no por instalar más y más plugins has de tener mejores funcionalidades", ya sabes que contra más plugins instalas mayor carga ejerces en tu sitio web y luego PageSpeed o Pingdom te ¡cantan por soleares!
Yo no te voy a decir la lista de plugins que tengo activa porque te asustarías y confieso que estoy trabajando mucho en reducirla, usando más los hooks con acciones y filtros, pero mientras consigo tiempo para eso intento tirar de HTML y crear un widget de iconos de redes sociales sin utilizar plugins, de la forma más básica y sencilla que uno pueda imaginarse.
Actualmente la mayoría de temas de WordPress modernos son responsivos y se comportan bien en dispositivos móviles, mostrando nuestro sitio web en una interminable tira de elementos que viene a acabar con un pie de página o 'footer' donde a veces ponemos algunos enlaces legales, de contacto y de redes sociales.
Esto último es bastante conveniente porque si imaginas que más del 60% del tráfico que recibes en tu web probablemente proviene de dispositivos móviles y la tendencia es navegar en vertical y no en horizontal, no estaría de más (ni de menos) acabar la navegación o el 'scroll' con un widget que pinte las redes sociales en las que los visitantes pueden encontrarnos.
Si además los visitantes de tu web utilizan Apps para ver contenidos en Pinterest, Facebook, Instagram, Twitter, etc., mejor que mejor, podrán decidir verte directamente en esas redes sociales desde sus aplicaciones móviles, lo que sin duda les dará una mejor experiencia de uso.
Los contras de los plugins
He probado plugins para estas cuestiones hasta el aburrimiento y al final el que más o el que menos cojea de lo mismo:
- Mucho código adicional innecesario.
- Tiene muchos iconos y justamente faltan los que yo necesito.
- Las personalizaciones de estilos son más laboriosas.
- Los estilos de los iconos no siempre se pueden personalizar.
- Los buenos son comerciales.
- Los gratuitos son demasiados básicos.
- No todos me permiten añadir etiquetas rel="nofollow".
- Muchos carecen de "alt" y "title" Importante para SEO on-page.
- Al final acabas añadiendo "otro" plugin más a tu ya larga lista.
Total que para acabar con esto me he puesto en plan minimalista y he decidido que todo lo que pueda añadir o incorporar a mi web con marcado de estructura HTML, PHP o algo de javascript será siempre más viable, limpio y rápido (en términos de resultados) que invertir una cantidad importante de tiempo en probar plugins y más plugins para llegar al aburrimiento y acabar usando el que todos dicen que está de moda "pero a mi no me gusta".
Pues no, yo no voy a ir "donde va Vicente", y voy a crear para ti un widget en el que simplemente insertaré HTML puro y duro llamando a unos iconos con formato PNG, de 32 x 32 pixels (cada cual con sus medidas) le voy a pasar un enlace que se abrirá en ventana/pestaña nueva, y por supuesto lo voy a documentar para humanos y para 'bots' (alt y title) ;)
El código
<a href="https://www.facebook.com/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-facebook.png" alt="sigue a Webempresa en Facebook" title="sigue a Webempresa en Facebook"></a> <a href="http://www.twitter.com/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-twitter.png" alt="sigue a Webempresa Twitter" title="sigue a Webempresa Twitter"></a> <a href="http://www.youtube.com/user/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-youtube.png" alt="sigue a Webempresa en Youtube" title="sigue a Webempresa en Youtube"></a> <a href="http://plus.google.com/u/0/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-googleplus.png" alt="sigue a Webempresa Google+" title="sigue a Webempresa Google+"></a> <a href="http://www.linkedin.com/profile/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-linkedin.png" alt="sigue a Webempresa LinkedIn" title="sigue a Webempresa LinkedIn"></a> <a href="http://www.pinterest.com/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-pinterest.png" alt="sigue a Webempresa en Pinterest" title="sigue a Webempresa en Pinterest"></a> <a href="http://webempresa.com/feed/"><img src="/wp-content/uploads/icon-social-rss.png" alt="sigue el RSS de Webempresa" title="sigue el RSS de Webempresa.com"></a>
Si luego te sobra tiempo, tu Tema es un poco enrevesado o necesitas que tenga determinada estética siempre podrás trabajar con classes, por ejemplo:
<div class="social-actions"> <a href="https://www.facebook.com/webempresa" rel="nofollow"><img src="/wp-content/uploads/icon-social-facebook.png" alt="sigue a Webempresa en Facebook" title="sigue a Webempresa en Facebook"></a> <div>
Si tienes problemas con el contenedor del widget que se colapsa, es posible que tengas que cerrar con un <div> si encierras el código HTML dentro de contenedores:
<div class="clearfix"></div>
No es lo mejor ni lo más limpio, pero es rápido.
No voy a entrar en estilos CSS ya que sin ellos ya te va a funcionar perfectamente, será visible y solo tendrás que plantearte "decoraciones" y otras ostentaciones si realmente lo consideras necesario, recuerda que el minimalismo es el mejor aliado para que las cosas se vean bien en cualquier navegador.
El resultado visto desde dispositivos móviles puede ser muy interesante. Quizás te ayude un poco más a evitar la fuga de visitas desde dispositivos móviles al finalizar el 'scroll' vertical.
El vídeo donde te lo muestro
Al final esto va mas de gustos que de innovación, pues se trata de obtener resultados sin calentarse la cabeza y si es posible en el menor tiempo, a fin de cuentas ¡el tiempo es mejor invertirlo en la playa o con la familia!