Cómo poner botones de redes sociales en nuestro Blog o Web. Código html

Hola a todos/as y bienvenidos a tublogfacil.com

En esta primera entrada os enseñare a colocar en vuestro sitio web los botones de las diferentes redes sociales para que los visitantes de vuestro espacio puedan compartir vuestros contenidos más fácilmente y ademas que os puedan seguir en vuestras redes sociales. algo muy útil para vuestro sitio web.

El resultado que obtendremos al final, es el siguiente:

Siguenos en FacebookSíguenos en TwitterSiguenos en YouTubeSigueme en LinkedIn

 

Como podeís comprobar, si pulsaís sobre los diferentes enlaces, os lleva directamente a mis redes sociales donde podreís seguirme y saber al momento cuando subo nuevo contenido. Lógicamente esto es muy útil tanto para atraer más lectores y fans cada vez, como para posicionaros en google a través de enlaces de calidad que atraen visitas a vuestra web.

Bien vamos a ver como podemos hacerlo:

En primer lugar, iremos a nuestro escritorio o panel control de nuestro espacio web. Si sois usuarios de blogger o wordpress os servirá de igual forma.

Una vez ally lo unico que tendremos que hacer es añadir un nuevo widgets de texto o html, no hago capturas de pantalla porque sabeis que los interfaces cambian cada poco tiempo.

Nos dará la opcion entonces de de incluir un titulo, cosa que yo no uso ya que los iconos los reconoce todo el mundo y sabemos para lo que sirven, y en la descripción tenemos que pegar el siguiente texto o código html para que aparezcan después los iconos cuando incluyamos los enlaces apuntando a nuestros sitios:

<a href=”https://www.facebook.com/pages/Tublogfacil/818381101542034” target=”_blank”><img alt=”Siguenos en Facebook” src=”https://lh3.googleusercontent.com/-NSLbC_ztNls/T6VX0g6z8AI/AAAAAAAAA0A/_vyIBrmZbuY/s48/facebook48.png” width=”57″ height=”57″ /></a>

<a href=”https://twitter.com/TuBlogFacilcom” target=”_blank”><img src=”https://lh6.googleusercontent.com/-vao9pzZoGtk/T6VYC4d1YMI/AAAAAAAAA0U/4rdP2chJido/s48/twitter48.png” width=”57″ height=”57″ alt=”Síguenos en Twitter” /></a>

<a rel=”author” href=”https://plus.google.com/106748505392995859461/about?pageId=102333114368416049362” target=”_blank”><img alt=”Siguenos en Google+” src=”https://lh4.googleusercontent.com/-YkgFxeGiyTs/T6VX1-4b99I/AAAAAAAAA0A/OVEd2C4lyK4/s48/google48.png” width=”57″ height=”57″ /></a>

<a href=”https://www.youtube.com/channel/UCwQA-PRV91TT16l66eyXyeQ” target=”_blank”><img alt=”Siguenos en YouTube” src=”https://lh6.googleusercontent.com/-Atgpy-x_OwI/T6mYkA18hYI/AAAAAAAAA1U/qksUJ5uBq3c/s48/youtube48.png” width=”57″ height=”57″ /></a>

<a href=”https://www.linkedin.com/profile/view?id=316432146&trk=nav_responsive_tab_profile_pic” target=”_blank”><img alt=”Sigueme en LinkedIn” src=”http://www.exprimiendolinkedin.com/wp-content/uploads/2011/04/Bot%C3%B3n-IN.jpg” width=”57″ height=”57″ /></a>

 

Como veis,  tenemos 5 parrafo, cada uno apuntando a una red social, facebook, twitter, google+, youtube y linkedin. Lo que os aparece tachado y en negrita, es lo que debéis sustituir por los enlaces a vuestras paginas de fb, twitter, etc.

¿Cómo incluir más botones de más RRSS?

Muy sencillo, para ello vamos a coger como ejemplo el parrafo de facebbok :

<a href=”https://www.facebook.com/pages/Tublogfacil/818381101542034” target=”_blank”><img alt=”Siguenos en Facebook” src=”https://lh3.googleusercontent.com/-NSLbC_ztNls/T6VX0g6z8AI/AAAAAAAAA0A/_vyIBrmZbuY/s48/facebook48.png” width=”57″ height=”57″ /></a>

Simplemente cambiaremos el enlace que esta tachado por el de cualquier otra red social, el “Siguenos en Facebook” lógicamente también, y el enlace a la imagen que se muestra que es :  https://lh3.googleusercontent.com/-NSLbC_ztNls/T6VX0g6z8AI/AAAAAAAAA0A/_vyIBrmZbuY/s48/facebook48.png

por el de una url con el logo de la red social en cuestión lo cual simplemente debéis ir a google imagenes, buscar por ejemplo, pinterest button logo, y hacer click derecho, copiar url y sustituirla. Ten en cuenta que lo ideal es que subas tu la imagen para que la url no se caiga nunca. Si os fijais, yo lo hice con el de linkedin porque no vino con el código que encontré. os puede servir de ejemplo.

¿Cómo cambiar el tamaño de los iconos?

Cambiar el tamaño de los iconos también sera muy facil, simplente donde pone width=”57″ height=”57″ /> (la altura y la anchura) teneis que sustituir el 57 por un numero mayor si lo quereis agrandar, o por uno más pequeño si quereis reducir la imagen.

y finamente el resultado que obtendremos:
Siguenos en FacebookSíguenos en TwitterSiguenos en YouTubeSigueme en LinkedIn

 

Podéis comprobar como queda en esta misma web ya que yo lo utilizo personalmente.

 

About

View all posts by

One thought on “Cómo poner botones de redes sociales en nuestro Blog o Web. Código html

Deja un comentario

Tu dirección de correo electrónico no será publicada.