Todos tenemos claro que en el internet de hoy, nuestro blog tiene que ir acompañado de una presencia en las redes sociales. Por eso hay que asegurarse de que nuestros lectores son capaces de encontrar fácilmente en nuestro blog los enlaces para seguirnos en ellas.
Me preguntaba un lector (gracias!) si los botones sociales de la parte superior de este blog estaban puestos con algún plugin o a mano. Hoy voy a explicar cómo hacer vuestro propio bloque personalizado de iconos sociales que podréis usar en cualquier lugar de vuestro tema. Como veréis es muy muy sencillo, quizás es lo primero que yo aprendí de html, así que ánimo aunque os suene a chino al principio.
Recomiendo no colocar esto en el código del tema, y mejor usar un widget o un espacio destinado a anuncios o similar. Así, si actualizamos el tema, no tendremos que acordarnos de pegar de nuevo el código. Yo uso el espacio del tema de woothemes destinado a un texto en la cabecera para colocar en el los botones sociales.
Así es como se ve en mi panel de administración del tema de wordpress woothemes (pulsa para ver en grande):
El código que yo uso es el siguiente:
<a href="http://feeds.feedburner.com/planetahuevo" target="_blank"><img src="https://lh4.googleusercontent.com/-z_EWjZDt_YA/UYEUXiGcYdI/AAAAAAAADj8/9acCM8joy_I/s55/ico-social-rss_55.png" title="Suscríbete via RSS" alt="rss"></a> <a href="http://www.twitter.com/planetahuevo" target="_blank"><img src="https://lh6.googleusercontent.com/-RMVRUixlf9I/UYEUX1F1XkI/AAAAAAAADkE/wPg6o99Z-Qc/s55/ico-social-twitter_55.png" title="Sígueme en Twitter" alt="twitter"></a> <a href="http://www.facebook.com/planetahuevo" target="_blank"><img src="https://lh3.googleusercontent.com/-9Qz7_2q1X90/UYEUXc3oRcI/AAAAAAAADj0/9o4y96RoFow/s55/ico-social-facebook_55.png" title="Sígueme en Facebook" alt="facebook"></a> <a href="http://feedburner.google.com/fb/a/mailverify?uri=Darkpollo&loc=es_ES" target="_blank"><img src="https://lh4.googleusercontent.com/-Zquy9sdRYjk/UYEUXR4x5KI/AAAAAAAADj4/pcebLlEKHk8/s55/ico-social-mail_55.png" title="Sígueme por email" alt="email"></a> <a href="https://plus.google.com/117187324952065263151" target="_blank"><img src="https://lh4.googleusercontent.com/-K7x3To-fE08/UYEUXU-txQI/AAAAAAAADjw/wm3cXL8Ji70/s55/ico-social-googleplus_55.png" title="Sígueme en Google+" alt="googleplus"></a>
Como veis no tiene ningún misterio. Son simplemente cinco imágenes con enlaces que redirigen a cada una de las redes sociales del blog. Vamos a explicarlo por partes seleccionando sólo una de las líneas porque todas son similares.
<a href="https://plus.google.com/117187324952065263151" target="_blank"><img src="https://lh4.googleusercontent.com/-K7x3To-fE08/UYEUXU-txQI/AAAAAAAADjw/wm3cXL8Ji70/s55/ico-social-googleplus_55.png" title="Sígueme en Google+" alt="googleplus"></a>
Lo primero que nos fijamos es que es un código de enlace que viene indicado por
<a></a>
Le ponemos la url a la que queremos enviar el enlace
<a href="
Y le añadimos el target si queremos que se abra en una pantalla nueva (opcional):
target="_blank"
Luego viene la imagen, lo primero es elegirla. Para eso ya os dejé la semana pasada un buen listado de sitios dónde buscar unos iconos sociales gratuitos 100%.
Luego hay que subirla al servidor. En mi caso gestiono todas las imágenes del blog en mi cuenta de Picasa (lee más sobre cómo gestionar correctamente las imágenes de tu blog en este artículo), por tanto lo que veis es un enlace externo a la imagen una vez subida:
src="https://lh4.googleusercontent.com/-K7x3To-fE08/UYEUXU-txQI/AAAAAAAADjw/wm3cXL8Ji70/s55/ico-social-googleplus_55.png"
[box type=»info»]Ojo, solo usar enlaces externos a páginas que nos pertenezcan, o por lo menos pedir permiso para usarlos. No está bonito usar los recursos de los demás. En mi caso, estos botones no son míos, podéis descargar aquí el archivo original que yo usé. También podéis enlazar las imágenes en mi carpeta de picasa pero os recomiendo haceros una cuenta propia y subir los vuestros. Así no dependéis de que a mi un día me de por borrarlos… :P[/box]
Le pones el título que quieras (se va a leer al pasar el ratón por encima de la imagen) le pones un alt (para cuando no carga la imagen) ¡y listo!
Ya tienes tu propio bloque de iconos sociales preparado para subirlo a tu web. Si tienes dudas puedes dejar un comentario e intentaré aclararlas.
Muchas gracias, darkpollo.
Ahora mismo acabo de leerlo por encima y me voy a poner a practicar un poco. Ya te comentaré como me ha ido la cosa.
Un saludo y gracias de nuevo por el trabajo y las molestias.
Me he descargado un theme nuevo de Wootheme para ir probando y resulta que el que me he descargado no tiene las mismas opciones que el tuyo (imagino que porque el mío es gratuito). Se trata del Skeptical.
El caso es que no aparece Header entre las opciones por lo que me surge la duda de dónde meter ese código…
¿Te importaría echarme un cable con eso?.
Un saludo.
Sin problema. Ahora me lo bajo y lo miro. Mientras puedes probar el código creando una página en blanco en el WordPress y usando el modo texto.
Lo estoy probando ahora con la plantilla por defecto Twenty Eleven y puedo insertar la imagen sin problema.
Sin embargo mi intención es insertar el icono de la red social (o lo que sea) en la imagen que aparece en la cabecera (como lo tienes tú), y la verdad es que no se dónde colocar la línea de código para que quede así porque si la coloco justo antes de todo el código de header.php, me sale encima de la imagen y si lo hago después, me sale debajo.
Un saludo.
Hola. Por eso es mejor usar bloques específicos como comento en el artículo. Para colocarlo arriba en el Twenty eleven y que no se pegue con la imagen debes además añadir un poco de código css. Te cuento en el twenty, pero el problema es que para cada tema es diferente. Tienes que meter el logo y el nuevo código en dos divs Y cada uno con un id diferente, en el ejemplo, id=logo e id=social, y los divs dentro del hgroup del twenty twelve.
CODIGO H1 DE TU BLOGCODIGO H2
Y luego al custom.css o al style.css añadimos:
#logo {
float: left;
}
#social {
float: right;
}
Ya me dices si te apañas. Un saludete!
Por cierto, tienes que editar el header.php en ese tema y meter el contenido dentro del
Estoy mirando cosas sobre html porque está claro que sin tener conocimientos sobre eso, me va a resultar imposible entender esos códigos. Y como tampoco quiero abusar mucho de tu confianza, prefiero buscar información y preguntar cosas específicas que no logre entender por ahí.
Un saludo.
He estado haciendo pruebas y creo (o yo al menos no doy con la tecla) que no se puede meter el logo de la red social en la imagen de cabecera de TwentyEleven. Tiene que ir o encima o debajo, pero no dentro como lo tienes tú.
Saludos.
Funcionar funciona, pero no es nada fácil para empezar. Por eso lo de los temas premium. Simplifican mucho la vida.
Descarga este header.php y sustituye el de tu theme TwentyEleven y dime si te sale lo que tu quieres.
https://www.dropbox.com/s/9uqz8r1iviswd5g/header.php
En mi blog de pruebas se ve así:
https://www.dropbox.com/s/edg264r9zs4g11n/%23034_El%20Planetahuevo%20DEV%20-.png
¿Es eso lo que buscas? Obviamente tienes que cambiar las imágenes y los enlaces por los tuyos, y puedes quitar el código entre y ponerlo en el css.
Un saludete
No. Yo lo que quiero es meter los logos dentro de la imagen del theme TwentyEleven (como lo tienes tú con tu theme) y con el header que me has pasado los logos se ven antes de la imagen de cabecera (y no dentro como lo quiero yo).
Creo que comentas que tú aprovechas un espacio para poder meter texto en tu theme e introduces el código de los logos pero en el caso de TwentyEleven no existe ese espacio y no creo que se pueda hacer igual…
PD: Quiero volver a agradecerte las molestias que te estás tomando.
Saludos.
Vale, entonces es que no entiendo el problema. :P ¿Puedes mandarme un enlace o una imagen dónde pueda ver como es tu cabcera para comprender mejor el problema?
Yo, en planetahuevo.es, no tengo ninguna imagen de cabecera, tengo un hueco superior, con un fondo de color diferente que tiene un logo a la izquierda y los iconos a la derecha. Me da, y si no es así corrigeme, que lo que tu necesitas es que la imagen de cabecera que usas se ponga de fondo del logo y de los botones.
Pero lo mejor es que me mandes un enlace para poder ver el código exactamente.
A ver si lo conseguimos. :)
El problema está en mi cabeza porque yo pensaba que esto era una imagen de cabecera y que los logos estaban metidos dentro de la imagen (ahora veo que no ajaj)….
http://prntscr.com/143o66
Y lo que yo pretendía era meter los logos en esta imagen (o cualquiera).
http://prntscr.com/143oed
Saludos.
jeje, entendido. Pues la solución es convertir esa imagen, o la que tu quieras, en un fondo, en lugar de en una imagen, así podrás poner cosas encima, logos o botones o lo que quieras. :)
Por si quieres probar intenta jugar con esto en el css:
http://www.w3schools.com/cssref/pr_background-image.asp
Tendrás que poner una url a la imagen, en tu servidor o fuera e incorporar el css a un elemento, un div suele ser lo más cómodo, pero ya nos vamos de las cosas básicas a modificaciones más avanzadas.
No se si compensa entrar en esto. :)
Un saludete!
Llevaba horas buscando una solución para un boton de twitter hasta q dí con tu blog. Mil gracias, ahora soy tu follower!
Pues me alegro! Esta es tu casa. :)
quiero saber cómo hago para que no estén en línea vertical, sino en horizontal, así como el tuyo. Me ayudas?. Gracias