Añade los botones de las redes sociales a tu Tumblr

por

¿Tienes cuentas en diferentes redes sociales y quieres que la gente las encuentre a través de tu Tumblr? Entonces necesitas enlaces a tus perfiles. La mayoría de las páginas web y el blogs utilizan los botones de las diferentes redes sociales para lograrlo.

Hay maneras distintas para colocar estos botones de las redes sociales a tu blog o página. Un modo interesante es colocarlos a lado izquierda de tu blog en una manera que estos botones siempre están visibles en la pantalla. Entonces cuando los visitantes de tu página o blog hacen scroll los botones se quedan en su posición en la pantalla (no en una posición fija dentro de la página web). 

¿Cómo añadir los botones de las redes sociales como Facebook, Twitter o Google+ a lado izquierda de tu blog de Tumblr para ellos siempre están visibles en la pantalla? 

A. El código para los botones

Bueno, primero necesitas los botones de las redes sociales en donde tienes un perfil. Principalmente hay dos maneras diferentes para obtener estos botones.

1. La mayoría de las redes sociales ofrecen a sus usuarios un código que contiene un enlace a tu perfil con la imagen de un botón.  Por ejemplo el código para Google+: 

<a href=”https://plus.google.com/el-número-de-tu-cuenta-en-google+-1234567” target=”_blank” rel=”author” style=”text-decoration:none;”><img src=”https://ssl.gstatic.com/images/icons/gplus-64.png” alt=”” style=”border:0;width:44px;height:44px;”/></a>

2. La otra opción es bajar de la web los botones como imágenes (o mejor: crear sus propios botones)y vincular estos botones manualmente a tus perfiles. Para hacerlo necesitas un espacio en la web como un hosting o un “Cloud Servicio” para tener las imágenes de los botones online. El código sería en este caso algo como: <a href=https://plus.google.com/el-número-de-tu-cuenta-en-google+-1234567><img src=”http://xxx.com/boton-google-plus” /></a>

B. Insertar el código en tu blog de Tumblr

Cuando  tienes el código para todas tus cuentas tienes que ponerlo en el código html de tu blog.  Puedes hacerlo al final del código de tu Tumblr, arriba de las etiquetas </body></html>. 

La forma más sencillo de hacerlo uno debajo del otro es utilizar la etiqueta <p></p>, entonces: 
<p>código para Google+</p>
<p>código para Facebook</p>
…
Por ejemplo en mi blog el código es el siguiente:  

<p><a title=”SEO Quito en Twitter” href=”http://twitter.com/#!/SeoQuito”   target=”_blank” rel=”nofollow”><img width=”44” height=”44” src=”http://www.webservicio-quito.com/tumblr/social/twitter-button.png”   /></a></p>
<p><a href=”https://plus.google.com/113119987002671367862?prsrc=3”     target=”_blank” rel=”author” style=”text-decoration:none;”><img src=”https://ssl.gstatic.com/images/icons/gplus-64.png” alt=”“     style=”border:0;width:44px;height:44px;”/></a></p> 
<p><a title=”Robert Korntheuer en LinkedIn” href=”http://ec.linkedin.com/pub/robert-korntheuer/2a/921/519/es”     target=”_blank”><img width=”44” height=”44” src=”http://www.webservicio-quito.com/tumblr/social/linkedin-button.png” /></a></p>
<p><a title=”SEO Quito en Pinterest” href=”http://pinterest.com/seoquito/”     target=”_blank”><img width=”44” height=”44” src=”http://www.webservicio-quito.com/tumblr/social/pinterest-button.png” /></a></p> 

C. Un poco de css para colocar los botones en la posición correcta

Añadir fácilmente código de css a tu blog de Tumblr

Añadir fácilmente nuevo código de css a tu Tumblr 

Bueno, hasta ahora tienes los botones uno debajo del otro, pero al final de tu blog. Para colocar los botones a lado izquierda de la pantalla en una posición en donde ellos siempre están visibles necesitas un poco de css. Tienes que crear un selector ID. 
Algo como:
#social-media {position:fixed; left:5px; top: 200px;}

Este código de css puedes copiar directamente en el código de tu blog antes de     la etiqueta </style> (fixed significar que el selector ID está colocada en una posición relacionada a la pantalla. Entonces siempre visible. Con “left” y “top” determinas esta posición (“left” distancia hacía a lado izquierdo de la pantalla y “top” la distancia hacía arriba).  

(También es posible – y más fácil – añadir este código a través de “personalizar tema”, “avanzadas”, “añadir css personalizado” a tu Tumblr. Solo debes copiar este código – #social-media {position:fixed; left:5px; top: 200px;} – en el campo “añadir css personalizado”.)

Ahora debes añadir este selector ID al código de los botones:
<div id=”social-media”>
<p>…</p>
<p>…</p>
<p>…</p>
</div>

Listo.

En mi blog por ejemplo:   

#social-media {position:fixed; top:200px; left:5px;} 
</style>

….

<div id=”social-media”> 

<p><a title=”SEO Quito en Twitter” href=”http://twitter.com/#!/SeoQuito” target=”_blank” rel=”nofollow”><img width=”44” height=”44” src=”http://www.webservicio-quito.com/tumblr/social/twitter-button.png”  /></a></p> 
<p><a href=”https://plus.google.com/113119987002671367862?prsrc=3” target=”_blank” rel=”author” style=”text-decoration:none;”><img src=”https://ssl.gstatic.com/images/icons/gplus-64.png” alt=”“        style=”border:0;width:44px;height:44px;”/></a></p>
<p><a title=”Robert Korntheuer en LinkedIn”         href=”http://ec.linkedin.com/pub/robert-korntheuer/2a/921/519/es”         target=”_blank”><img width=”44” height=”44” src=”http://www.webservicio-quito.com/tumblr/social/linkedin-button.png” /></a></p>
<p><a title=”SEO Quito en Pinterest” href=”http://pinterest.com/seoquito/”         target=”_blank”><img width=”44” height=”44” src=”http://www.webservicio-quito.com/tumblr/social/pinterest-button.png” /></a></p> 
</div>
</body>
</html>

Esto es todo, principalmente no es tan complicado ;)

Leer también: Añadir botones de redes sociales como “me gusta” a tus entradas de Tumblr.