:::: MENÚ ::::

Cómo añadir mis redes sociales a #WordPress y #Blogger sin #plugins ni #gadgets

Si tienes un blog o una página corporativa, y además tienes cuentas en las redes sociales, seguramente te ha surgido la idea de ¿cómo añadir los iconos de mis redes en mi página?

El procesos va a ser muy sencillo, no vamos a usar plugins o gadgets externos, en pocas palabras código de terceros, vamos a usar los que vienen por defecto en Blogger o WordPress. Localizaremos los botones que mas nos gusten y después simplemente los añadiremos mediante HTML5.

Localizando los botones

Los botones que vamos a usar son simplemente los que nos van a llevar a nuestra página en la red social, no son los botones de me gusta, twettear, pin, ni nada parecido.

Para buscar las imágenes que más nos gusten para nuestros botones sociales, es mejor ir a una biblioteca de iconos, yo uso con bastante frecuencia iconfinder.com, tienen un gran surtido y nos podemos encontrar con iconos gratis y de pago.

Yo en este ejemplo voy a usar los iconos del set: Soft Social Icons.

Añadir el gadget en Blogger

En nuestro blog de blogger simplemente deberemos acceder a la sección Diseño y en donde queramos que aparezca nuestros iconos añadir un Gadget, este debe de ser del tipo HTML/Javascript, para nosotros poder introducir nuestro HTML5 con los enlaces.

Añadir el Widget en WordPress

En el menú lateral izquierda de nuestro panel de administración, en la sección Apariencias, nos encontramos con Widgets, añadiremos uno del tipo Texto.

Los Botones

Para añadir uno de los botones, simplemente deberemos de usar el siguiente código:

<a href="http://[Enlace a nuestra página en la red social]" target="_blank">
    <img src="http://[Dirección del botón]" />
</a>

Simplemente deberemos cambiar los elementos entre corchete por los datos de nuestra página social y la imagen.

Poniendo un ejemplo, en el caso de Facebook para fondantymas.com, se quedaría así:

<a href="https://www.facebook.com/FondantYMas" target="_blank">
    <img src="https://cdn3.iconfinder.com/data/icons/social-icon-pack-by-citni/48/Facebook.png" />
</a>

Cuanta más redes deseamos añadir más veces tendremos que repetir el código y adaptarlo para cada una. Por ejemplo:

<a href="https://www.facebook.com/FondantYMas" target="_blank">
    <img src="https://cdn3.iconfinder.com/data/icons/social-icon-pack-by-citni/48/Facebook.png" />
</a>
<a href="https://www.twitter.com/FondantYMas" target="_blank">
    <img src="https://cdn3.iconfinder.com/data/icons/social-icon-pack-by-citni/48/Twitter.png" />
</a>
Share on Facebook0Tweet about this on TwitterShare on Google+2Share on LinkedIn6Share on Tumblr0Pin on Pinterest0Email this to someone

  • Yolanda Martin (Fondantymas)

    Muy bien explicado, y muchas gracias
    por hacerlo en el blog al mismo tiempo!

  • Laura Diez

    me encanto, facilisimo, perfecto!!! muchas gracias.

  • Alejandro Paredes

    que plugin usas en esta pagina para tus redes sociales? gracias :D