Como crear un widget con todas vuestras redes sociales en wordpress.com

Hoy voy a contaros como crear un Widget lateral para vuestros blogs, donde aparezcan unos iconos, que al hacer click sobre ellos, lleven a la gente a vuestras páginas en las redes sociales, o a cualquier otro lugar que os interese (igual que el que tengo yo en mi lateral). He enfocado este mini tutorial en plan copia y pega, prescindiendo de explicaciones sobre HTML, para no extenderme demasiado, y para que cualquiera pueda hacerlo. Si tenéis alguna duda concreta preguntad en los comentarios (si queréis aprender HTML, la web está llena de buenas opciones para aprenderlo).

Yo recurrí a esta solución porque me pareció más claro y más limpio que tener varios Widgets de diferentes estilos, para cada red social. Porque no hay Widget para Google+, y porque al tener pocos seguidores en las redes sociales, no quería darlas demasiado protagonismo en el área de Widgets. Aparte también os voy a enseñar como introducir otro icono más, para dar la posibilidad de que os sigan por Feeds en el mismo Widget, y así matamos más pájaros de un mismo tiro.

No tenía la intención de hacer tutoriales en este blog, pero la semana pasada me comprometí a ayudar a Hesperetusa➠  a poder relacionar su cuenta de Google+ con su blog, y creo que esta es la mejor forma de hacerlo. Además el código que os voy a poner abajo, también lo podréis usar en vuestros artículos, para introducir imágenes que se comporten como enlaces (en vez usar el texto normal), lo que en determinadas circunstancias resulta un recurso muy útil y elegante.

Los pasos a seguir son los siguientes:

❶ Tener preparadas todas las direcciones web, de vuestras páginas en las redes sociales. Por ejemplo la dirección de mi página web en Facebook, que utilizaré más adelante en este ejemplo es: https://www.facebook.com/pages/Palabra-de-Lost/143716552482789

❷ Buscar y elegir un pack de iconos en formato .jpg o .png para las redes sociales que nos guste, y valla con el look de nuestro blog (los que yo tengo son de 45X45 píxeles, vosotros sabréis si los queréis más grandes o más pequeños). Para localizarlos, podéis usar vuestro buscador favorito, descargar alguno de los que os proponen en este artículo➠, o hacéroslos vosotros mismos en Photoshop, GIMP➠ o cualquier otro programa de retoque de imagen que utilicéis.

❸ Una vez elegido vuestro pack de iconos, tenéis que subirlos a la red, uno por uno y guardar sus direcciones url.

Por ejemplo mi icono de Facebook (que veis arriba y en el Widget), lo tengo localizado en esta dirección: http://img208.imageshack.us/img208/8821/nu8l.png Como podéis ver, uso un servidor de imágenes dedicado llamado ImageShack➠, en vez del de wordpress.com, como truquillo para que el blog cargue un poco más rápido (así mejoro un poquito mi SEO). Por si os ha gustado la idea, os adjunto un tutorial bastante bueno sobre como subir imágenes a Imageshack➠ (si a alguien le quedan dudas, repito, no os cortéis en preguntar, nadie nace enseñado).

❹ Entramos a nuestro blog, y vamos a la sección de Widgets (Escritorio > Apariencia > Widgets), y arrastramos uno que se llama «texto», y en cuya descripción aparece «texto o HTML alternativo», a nuestra barra para Widgets.

❺ El código HTML que utilizaremos para cada uno de los iconos de nuestras redes sociales explicado es este:

<a title="Texto que aparecerá al poner el ratón sobre el icono que hayas elegido para la red social" href="dirección web incluido el http:// de tu perfil en las redes sociales" target="_blank"><img src="dirección url de alojamiento del icono" width="ancho del icono en píxeles" height="alto del icono en píxeles" border="0"/></a>

Nota: Por si tenéis curiosidad, lo de de target=»_blank» sirve para que los enlaces se abran en nuevas pestañas del navegador. Lo demás si lo pensáis un poco es bastante lógico.

Utilizando los datos que os he ido dado en los pasos ❶, ❷ y ❸, para reemplazar los textos explicativos de su mismo color, el código para mi icono de Facebook sería:

<a title="Ver la página del blog en Facebook" href="https://www.facebook.com/pages/Palabra-de-Lost/143716552482789" target="_blank"><img src="http://img208.imageshack.us/img208/8821/nu8l.png" width="45" height="45" border="0"/></a>

Nota: Ignorad los cambios de renglón del código, se pueden sustituir por simples espacios, y si los dejáis tal cual, los navegadores los ignorarán, pero están porque todo el código no cabe en un renglón.

El resultado del código anterior, es un enlace distinto de la imagen de arriba, aunque a simple vista parezcan lo mismo (probad a hacer click sobre los dos):

Nota: WordPress es un poco peculiar con las comillas «. En el Widget no vais a tener problemas, pero si el código no os funciona en los artículos: Ponéis la imagen en el artículo > la seleccionáis > y seguís los mismos pasos, que ya hubierais seleccionado un texto y lo quisierais hacer enlace, y eso funcionará seguro.

❻ Este es solo uno de los 4 iconos que tengo en la barra lateral. Hay que hacer uno de estos textos para cada red social, y pegarlos en el orden que queramos que aparezcan uno detrás de otro en el Widget, colocando entre ellos « » (sin comillas), que es un espacio entre imágenes, para que no queden pegadas. El esquema de mi Widget es:

<a title="...ICONO Feeds...</a>&nbsp;<a title="...ICONO Twiter...</a>&nbsp;<a title="...ICONO Facebook...</a>&nbsp;<a title="...ICONO Google+...</a>

He puesto <a title="...ICONO Facebook...</a> para representar el código del icono de Facebook en vez de todo el código HTML que he desarrollado en el paso ❺ (y igual para los Feeds, Twiter y Google+), porque la idea es mostraros el esquema, y como usar   no embarullarlo todo con las 12 líneas que ocupa el código completo del Widget.

❼ Recomiendo cambiar el título al Widget, porque «Texto» no queda nada elegante. Yo por ejemplo, le tengo puesto «Otras formas de seguirme»

Nota: Si queréis añadir la opción de que os sigan a través de los «Feeds», se hace igual que para las redes sociales, pero sabiendo que la dirección web que tenéis que usar es la dirección principal de vuestro blog acabada en /feed/. Por ejemplo en este blog https://palabradelost.wordpress.com la dirección de los Feeds es https://palabradelost.wordpress.com/feed/

Pd: He usado muchos colorines, para ayudar a entender mejor el código, espero no marearos demasiado :). Parece complicado, pero si vais con cuidado, en 5 minutos está hecho.

Anuncio publicitario

Lost va a la Montaña

Primero fue María Gilabert con un comentario, luego fue Un lugar para ti con una subscripción, y después llegó Urielarte, y Lost se dio cuenta de que era bueno, y de que le gusta que le sigan. Lost se dio cuenta también de que el sistema de seguidores de blogs por email de WordPress es una mierda, así que se decidió a crear una cuenta de Twiter, y el primer día llegaron 6 nuevos seguidores, lo que asombró a Lost.

Todo ello llevó a Lost a considerar que si deseaba expandir su mensaje de forma efectiva, debía hacer algo que había desdeñado siempre hasta ese momento, ir a las montañas de las redes sociales. Poco sabía Lost de ellas aparte de su nombre, y de que por su naturaleza traicionera es muy sencillo entrar en ellas, pero muy complicado salir sin que se queden con una parte de ti para tratar de exprimirla hasta el día del Juicio Final.

Creo que acudir a las redes sociales, siempre que no pierda mi objetivo de vista (y no me dedique a perder el tiempo a lo tonto), va a ser muy positivo para este Blog, ya que hará su contenido visible y más fácil de seguir para muchas personas. En la mayoría de las redes van comerciar con todos los datos que les dé, de todas las formas que se les ocurran, pero para un bloguero lo veo justo. Como escudo tengo mi Alias en todas ellas, ya que mi idea es compartir mis opiniones, y buscar personas afines, que me enriquezcan. No hablar de mi vida personal o marujear con gente que tengo olvidada porque no me interesa.

Como la mayoría sabréis, los primeros pasos son muy sencillos, pero usarlas bien requiere bastante tiempo. Os pido que tengáis paciencia conmigo si intentáis comunicaros conmigo y no respondo de forma adecuada al principio, me he metido en todas a la vez, y tardaré un tiempo en aprender a manejarlas adecuadamente. Aquí van mis perfiles:

• Perfil de Twiter

• Perfil de Facebook

• Perfil Google+ (este es el perfil con el que menos satisfecho estoy).

Nota: Aprovecharé las redes sociales también, para revelar otra de mis grandes pasiones, el cine. Llevo unos meses haciendo críticas de películas de vez en cuando en  Filmaffinity, el problema es que si allí es complicado que te lean una crítica, imaginaos obtener opiniones de otros usuarios que es lo que yo quiero.