wordpress

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.

redes_socialesPASO 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.

photoshopPASO 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.

 

wordpress3.- 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.

wordpress4.- 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.

4 pasos para crear tu propio “widget” de redes sociales en wordpress
1 (20%) 1 vote

David Campos Roca
davidcamposroca@gmail.com

Especialista y formador en aulaCM donde enseño a los alumnos a obtener sus Certificaciones Oficiales de Google Adwords y también a diseñar sus propias paginas con WordPress. Me encanta ayudar a los demás a conseguir sus objetivos y metas profesionales. No hay mayor recompensa que ver como un alumno finaliza un curso y sus expectativas quedan cubiertas. "Localiza tu objetivo y alcanzarás tu meta"

18 Comentarios
  • cinacio06
    Publicado a las 09:36h, 04 noviembre Responder

    Muy bien David, es un post muy útil y interesante a la vez. Gracias por compartir esa información!!

  • Sricote
    Publicado a las 12:31h, 04 noviembre Responder

    Me gusta mucho como desarrollas esta entrada; vas al grano y todo está muy bien explicado.

    • davidcamposroca
      Publicado a las 13:11h, 04 noviembre Responder

      Gracias Sergio. Super motivador tu comentario, seguiré en esta línea.

  • nathcordero
    Publicado a las 14:45h, 04 noviembre Responder

    Es genial David!! me sirve 1000 para mi blog!! :)

  • davidcamposroca
    Publicado a las 14:57h, 04 noviembre Responder

    Gracias Natalia 😉 me alegro os sirva

  • NewSocialCloud
    Publicado a las 19:08h, 04 noviembre Responder

    David, muy, muy interesante: sencillo de seguir y muy práctico. Enhorabuena!

    • davidcamposroca
      Publicado a las 19:40h, 04 noviembre Responder

      Muchas gracias. Un placer apotar y recibir estos comentarios.

  • elenacharameli
    Publicado a las 14:36h, 06 noviembre Responder

    Un post útil y bien explicado David, paso a paso y con una estructura didáctica. ¡Todo buen blogger tiene que incluir este widget en su blog! es fundamental enlazar a redes sociales. Muy bien

    • davidcamposroca
      Publicado a las 14:54h, 06 noviembre Responder

      Gracias Elena. Es lo que intenté, algo escueto pero directo a lo que nos puede hacer falta para crear ese widget. Me alegro te haya gustado.

  • davidcamposroca
    Publicado a las 14:54h, 06 noviembre Responder

    Gracias Elena. Es lo que intenté, algo escueto pero directo a lo que nos puede hacer falta para crear ese widget. Me alegro te haya gustado.

  • MailChimp, sencillos pasos para enviar tu primer newsletter | David Campos
    Publicado a las 21:11h, 10 noviembre Responder

    […] Antes de seguir, podemos dar un toque personal al formulario incluyendo los iconos de nuestras redes sociales, para ello accede al recuadro superior (el que es de línea discontinua) y una vez dentro,  pulsa el icono <>, lo que haremos es copiar todo el código HTML de nuestros iconos de redes sociales en el espacio en blanco. Te recomiendo dar una lectura al artículo de mi blog, “4 pasos para crear tu propio widget de redes sociales en Worpress”.  […]

  • aliciaro2010
    Publicado a las 08:21h, 13 noviembre Responder

    ¡Estupendo, David! Me parece un paso imprescindible para cualquiera que tenga su propio blog o web. El post resulta muy didáctico y útil. Este tipo de contenidos, tan prácticos y concretos, suelen funcionar bastante bien. ¡Felicidades!

  • davidcamposroca
    Publicado a las 08:59h, 13 noviembre Responder

    Gracias Alicia. Me alegro te haya gustado. Sirve como una “chuleta” para consultar cuando se nos olvide.

  • Miguel
    Publicado a las 20:05h, 16 diciembre Responder

    Hola

    No consigo que se me vea el logo de facebook

    Gracias

    • davidcamposroca
      Publicado a las 21:28h, 16 diciembre Responder

      Hola Miguel, gracias por haber leído el artículo. En que punto has tenido problemas?

  • Jorge ruiz
    Publicado a las 00:58h, 20 septiembre Responder

    Queria saber que plugin (aunque algo me hace pensar que de repente utilizaste codigo ) habias utilizado para agregar los botones de compartir, no es la parte lateral , sino los que pusiste al final de la publicacion. Por favor, si fueras tan amable !!

    • David Campos Roca
      Publicado a las 12:18h, 21 septiembre Responder

      Hola Jorge, muchas gracias por visitar mi blog y dejar un comentario. El plugin que utilizo es Monarch. Es muy potente en cuanto a configuraciones y me funciona bastante bien. Un saludo

Escribe un comentario

Pin It on Pinterest

Shares
Share This
Optimization WordPress Plugins & Solutions by W3 EDGE