04 Nov 4 pasos para crear tu propio “widget” de redes sociales en wordpress

En ocasiones vemos algún blog con unos iconos de acceso a redes sociales que nos dejan “cautivados”, pero no sabemos cómo tener unos parecidos en el nuestro ¿quieres que te ayude? sigue leyendo y verás que no es tan difícil tener tu widget de redes sociales personalizado en wordpress en tan solo cuatro pasos.

PASO 1.- Localizar las imágenes de los iconos que vas a utilizar en wordpress

Existen varios sitios donde encontrar packs de logos gratuitos, a mí me gusta, http://line25.com/articles/20-free-social-media-icon-sets-to-use-on-your-website, tienen mucha variedad y vienen en distintos tamaños.

Si tu idea es poner en el blog varios iconos, más de cuatro, unas dimensiones razonables de cada uno de ellos pueden ser 45×45 píxeles o 65×65 píxeles, ahora si solo quieres poner uno, este tamaño quedará un poco “ridículo” y sería conveniente que utilizaras uno algo mayor, por ejemplo de 130×130 píxeles.

PASO 2.- Subir los iconos a wordpress

Una vez que hayas elegido los iconos que más te gustan y los tengas en una carpeta de tu pc, te sitúas en el Panel de Administrador de tu wordpress, localizas “medios”, “biblioteca” y “seleccionar archivos”, y de esta forma pasarán a formar parte de tu biblioteca personal.

Desde la galería tendrás que seleccionar uno de ellos y te aparecerá una pantalla como la que te mostramos a continuación, es importante copiar la “url” en un bloc de notas (nos hará falta luego) y aprovechar a cumplimentar los campos de “título”, “texto alternativo» y “descripción”, y así nos vamos acostumbrando a tener nuestras imágenes en buenas condiciones. Tendrás que hacer lo mismo con el resto de logos que vayas a utilizar.

3.- Crear nuestro widget en wordpress

Desde “apariencia” y “widgets” busca uno que ponga “texto” y lo arrastras al lugar donde luego quieras que se vea en tu blog.

En el “titulo”, puedes poner “sígueme en” o lo que tu prefieras  y en el espacio en blanco es donde vas a comenzar a diseñar tu widget de redes sociales personalizado.

4.- Tenemos que usar código HTML

Entramos en el momento crítico, pero tranquilo que lo vamos a ir viendo de una forma muy sencilla:

• Insertar la imagen, para ello tenemos que poner el siguiente código
  

  ---

  <img SRC=» aquí pon la url de la imagen» WIDTH=»45» HEIGHT=»45» />
  

  ---

  (los dígitos 45 indican los píxeles de las imágenes, solo tienes que poner los valores correspondientes a las dimensiones de los iconos que has descargado y en el texto en rojo debes de colocar la url de la imagen, recuerda que la dejamos anotada en el paso 2 de este tutorial)

• Insertar el enlace a nuestro perfil de la red social, ya que si compruebas en tu blog veras que efectivamente aparece el icono, pero no te lleva a ningún sitio, vamos a insertar algo más de código, lo que queremos hacer es “envolver» nuestra imagen en una instrucción que le diga que cuando alguien pinche en ella, le lleve a nuestro perfil de una red social determinada. Coloca delante del código generado anteriormente este nuevo:
  

  ---

  <a href=»aquí pon la url de tu perfil en la red social/»> y, al final del todo, cerramos con </a>

  ---

  Tiene que quedar algo parecido a esto

  ---

  <a href=»aquí pon la url de tu perfil en la red social/ «><img SRC=»aquí pon la url de la imagen» WIDTH=»45» HEIGHT=»45» /></a>

¿Lo tienes? Haz la prueba, desde tu blog pincha en el icono y verás que te lleva al perfil de tu red social, pero ¿te saca de tu blog? pués  eso no nos interesa, ya que nosotros queremos que nuestro visitante pueda seguir viendo nuestro blog a la vez que visita nuestro perfil de una red social.

• Insertar instrucción para que se abra en nueva ventana de navegación, sólo tienes que insertar esta instrucción target=»_blank dentro del código ya creado:
  

  ---

  <a href=»aquí pon la url de tu perfil en la red social/»target=»_blank«><img SRC=»aquí pon la url de la imagen» WIDTH=»45» HEIGHT=»45» /></a>

Ahora sí, verás que desde tu blog y al pinchar en esa imagen, te lleva a tu perfil de la red social y se abre además en una ventana nueva.

GENIAL!!! solo te quedaría repetir estos mismos pasos para el resto de iconos, siempre desde este mismo widget que ya estamos utilizando.

Un placer si te he ayudado, seguimos colaborando en la red.