Es posible que me digáis que este tema está muy trillado y que en cualquier post que encontréis en Google os cuentan esto detalladamente. Mi respuesta es… sí y no. Recientemente me he estado peleando con WordPress y con estos artículos y la verdad es que al final he aprendido a hacerlo sola porque nadie lo contaba del todo bien.
Mi reto de hoy es explicarlo tan detalladamente que no quede lugar a dudas de cómo se hace, pues había muchas cosas básicas que daban por entendidas en otros blogs y que no eran tan fáciles de sacar si no investigabas un poco en el escritorio de tu blog WordPress.
Voy a explicarlo en un solo post. Sé que quedará largo pero me niego a dividirlo, no creo que a quien le interese hacer esto quiera esperar o cambiar de artículo.
Descarga los botones con el diseño que quieras
Escribe en Google “pack de botones sociales”. Incluso puede que encuentres mejores resultados si escribes algo en inglés como “social buttons pack”. Cualquiera de los resultados son páginas que ponen a tu disposición zips de fácil descarga con todos los botones en forma de imagen. Los míos los bajé de aquí. Descargar los packs es muy fácil. El siguiente paso es descomprimir el zip en un lugar que puedas localizar fácilmente.
Qué redes sociales vas a añadir
Antes de ponerme manos a la obra me hice una lista con los botones que quería agregar en mi blog y el orden. Al final me decanté por Twitter, Google Plus y LinkedIn, que es por donde profesionalmente más me muevo. Pero quedaban huecos libres y eso no me gusta. Si de momento solo tenéis perfil en dos o tres redes sociales y no queréis que el lateral de vuestro blog se quede cojo hay botones comodín como el del RSS o el del correo electrónico. Además, como ya explicaré más adelante, podéis variar el tamaño de los botones para que abarquen más, si no os gustan tan pequeñitos.
Sube las imágenes a WordPress y quédate con su URL
Una vez tengas localizados los botones de las redes sociales que vas a vincular, es hora de subirlos a WordPress. En Escritorio, pincha en Medios > Añadir nuevo. Teniéndolos localizados, puedes subir todos los que quieras de golpe.
El siguiente paso es obtener la URL de la imagen de cada botón. Una vez subidos puedes hacer clic en Editar o ir a Librería Multimedia (también desde Medios) > Editar. No tocaremos nada, pero nos fijaremos en la zona derecha donde dice ‘URL archivo’. Cogemos la ruta de la imagen y nos la pegamos en un blog de notas. Haremos esto por cada botón.
Como veréis la ruta quedará algo así como: http://nombredelblog.files.wordpress.com/año/mes/nombreimagen.formato (.png, .jpg)
Analizando y preparando el código HTML
Una vez tenemos las URL’s de nuestros botones, vamos a construir el código. Os dejo el mío por si queréis partir de él, sé que queda feo pero es más cómodo así (os recomiendo que lo peguéis en un bloc de notas o un Wordpad para que podáis trabajar mejor con él):
<a href=»URL de tu Twitter» target=»_blank»><img style=»border:0 none;» title=»Twitter» alt=»Twitter» src=»URL del botón de Twitter subido previamente en la Librería Multimedia de tu WordPress» width=»60″ height=»60″ border=»0″ /></a><a rel=»me» href=»URL de tu Google Plus» target=»_blank»><img style=»border:0 none;» title=»Google+» alt=»Google+» src=»URL del botón de Google Plus subido previamente en la Librería Multimedia de tu WordPress» width=»60″ height=»60″ border=»0″ /></a><a href=»URL de tu LinkedIn» target=»_blank»><img style=»border:0 none;» title=»Linkedin» alt=»linkedin» src=»URL del botón de LinkedIn subido previamente en la Librería Multimedia de tu WordPress» width=»60″ height=»60″ border=»0″ /></a><a href=»URL de tu feed» target=»_blank»><img style=»border:0 none;» title=»RSS» alt=»RSS» src=»URL del botón de Feed subido previamente en la Librería Multimedia de tu WordPress» width=»60″ height=»60″ border=»0″ /></a>
Como veis se repite todo el tiempo el mismo código. Cada bloque corresponde a una red social, tal como os marco en colores. Lo único que tenéis que hacer es:
- Escribir las URL’s de vuestros perfiles sociales donde digo «URL de tu (red social)».
- Dejar las etiqueta target=”_black” tal como está. Leí en algún sitio que si la eliminas, el enlace a la red social se abre en una nueva ventana. Probad si queréis, pero a mí me dio muchísimos problemas.
- Escribir el nombre de la red social correspondiente en las etiquetas title y alt. Por temas de usabilidad…
- Escribir las rutas de las imágenes de los botones sociales que habéis subido previamente a la Librería Multimedia.
- Ajustar el tamaño de los botones en las etiquetas width=»60″ height=»60″. Esto depende del espacio que tengáis, de lo grandes que queráis que sean los botones, de la cantidad, de lo que queréis que abarquen… Yo quería incluir 4 botones y no quería espacios en blanco así que fui probando a cambiar estos valores hasta quedar de manera que me convencieran. Todo es ir probando.
¿Y si en lugar de cuatro botones, como tú, quiero cinco? Sólo tendrías que añadir una secuencia más de código (<a href=»URL de tu perfil en esa red social» target=»_blank»><img style=»border:0 none;» title=»RSS» alt=»RSS» src=»URL del botón de la red social correspondiente subido previamente en la Librería Multimedia de tu WordPress» width=»60″ height=»60″ border=»0″ /></a>) y realizar los 5 pasos que he indicado en las últimas líneas.
Instalación del código
Una vez tengamos nuestro código preparado en el bloc de notas o Wordpad, lo seleccionamos y pinchamos en Copiar.
- En Escritorio (de WordPress) > Apariencia, accede a Widgets. En la columna central tienes que seleccionar una cajita llamada Texto (con subtítulo «Texto o HTML arbitrario») y arrastrarla a la barra lateral de la derecha. Aquí podrás ponerla en el orden que quieras.
- En la caja de texto que se despliega tienes que Pegar el código que has copiado anteriormente, y si quieres donde dice título poner algo así como “Sígueme en redes sociales” o lo que creas oportuno.
- Pincha en Guardar y refresca tu blog en su versión pública (Ctrl + F5) para ver cómo ha quedado.
- ¡Tachán! Puede que a la primera no te guste cómo ha quedado pero esto ya se solucionaría jugando con los width=»60″ height=»60″ que os comentaba líneas más arriba.
¿Os ha quedado más claro que a mi leyendo otros blogs? He intentado ser todo lo ilustrativa que he podido. De todos modos, cualquier cosa que necesitéis comentar o preguntar hacedlo en comentarios y os ayudaré en todo lo que pueda.
EDITADO a fecha 19/09/2013
Os facilito otro código HTML para los botones sociales que le ha servido a nuestra amiga Marian Toulemonde:
<a href=»URL de tu Twitter» target=»_blank»><img alt=»Twitter» title=»Twitter» src=»URL del botón de Twitter subido previamente en la librería multimedia de tu WordPress» width=’60’ height=’60’ /></a>
Carolina Juan, por su parte, me ha enviado el siguiente como alternativa:
<a href=»URL red social» target=»_blank» title=»Sigueme en»><img src=»URL icono red social» style=»border: 0px; opacity: 1;» alt=»Sigueme en»></a>
Gracias a ambas por la aportación 🙂
Marketing Online 
Gracias por el post Lorena, me ha sido de utilidad. Tengo que decir que no me acaba de salir, sin embargo me ha inspirado para poner los iconos con el widget «imagen» insertando mis URL’s. Lo cierto, es que prefería hacerlo como tú con «texto» para que salieran uno al lado del otro, pero no hay manera. Soy novata con HTML, así que no sé si has obviado algo por ser muy evidente y no lo estoy poniendo. No sé, pero gracias de nuevo por la entrada; muy didáctica.
Una pregunta: ¿las miniaturas que has puesto en «entradas que me gustan» van por defecto con tu theme?
Hola Marian,
Ante todo te recomiendo que tengas paciencia. A mí WordPress de vez en cuando se me vuelve loco y no me salen las cosas. Si te fijas al principio del post explico que no me fue bien ninguna explicación y que solo me sirvió «copiar» el código de otro blog para salir del paso. Al día siguiente seguí los pasos que intento transmitir en este post otra vez, y me salió a la primera. Cosas de WordPress que nunca entenderé.
Por otro lado me alegra que te hayas fijado en el widget, no sé si irá con mi tema, pero se llama Entradas que me gustan y está en Apariencia > Widgets. Búscalo porque si no es del tema debería estar ahí. Me pareció interesante porque recopila las últimas entradas de otros blogs WordPress que te han «gustado», mantiene actualizado el tuyo propio incluso en días que no actualizas y facilita el acceso al usuario a estos posts que fueron de tu interés.
Ya me contarás si una y otra cosa te salen bien 🙂
Gracias, Lorena. Mañana lo intentaré de nuevo.
Heey, hola de nuevo Lorena; finalmente he podido cargar el widget. Te paso el que me ha funcionado a mí por si quieres cambiarlo en tu entrada magistral. Es éste:
Espero no haberme dejado ninguna comilla, 😉
Nota: ya conocía «entradas que más me gustan», a lo que me refería es si te venía el widget con las miniaturas/imágenes. Ya que en el mío no he visto esa opción. Te queda bien!!
¡Me alegra mucho que te haya funcionado finalmente! Y gracias por el aporte del código, quizá a alguien le pueda ayudar, eso sí, me falta esa parte de code que apunta a la imagen del botón social. Si me lo pudieras pasar y lo incorporara al post, sería el recopetín 😛
En el widget «Entradas que más me gustan», por si te ayuda, me vienen las siguientes opciones: Título (Entradas que me gustan); Número de entradas a mostrar (yo puse 5 aquí); Mostrar como: Lista; «Los me gusta del autor para mostrar: lorenagonzalezgomez» (Tu usuario en Gravatar, me parece que es, con el que gestionas tu blog).
Prueba con esta configuración y me cuentas, o mejor… me pasas tu blog que no sé cuál es 😀
Creo que éste:
Pero no sé si es eso lo que me pides, porque ya te lo envíe ayer para que lo colocaras si quieres. Desde luego en mi comentario anterior no se ha quedado escrito (me imagino que porque es HTML). No sé, qué lío!!! Ten paciencia conmigo.
Éste es el código completo que he puesto:
En cuánto a mi página, es que aún tengo sólo 9 entradas, me parece poco para empezar a difundirlo, no? estoy generando más contenido, por lo menos 15 o 20 decentes posts (no sé si aguantaré). Estoy un poco perdida en cuánto al ritmo de hacer las cosas: contenidos, difusión (redes sociales); ya sabes, imagínate que empiezas ahora, y te tienes que reenganchar a la rueda y estás construyendo tu propia musicalidad, una que sea coherente. Por supuesto, se admiten otras opiniones. Te puedo decir que va sobre la atención y el cuidado al cliente, que es el sector donde me desenvuelvo mejor y tengo algo que aportar, pero desde una perspectiva más emocional que técnica. Ya lo entenderás.
Ufff, que me extiendo!! Gracias por tu atención, Lorena, me sirve de mucho, en serio.
Sí, veo el código, pero generalmente para poder configurar botones sociales en un blog o página web el código necesita más elementos que aludan al tamaño del botón, a la imagen (una URL acabada en .jpg), etc. El que visualizo solo consta de URL y el nofollow, me sale un código super cortito, ya no sé si lo estoy recibiendo bien.
Si estás emprendiendo el blog ahora me parece genial, estoy preparando un post para este viernes acerca de cómo generar ideas de contenidos cuando estás empezando un blog 🙂
Hola Lorena, muchas gracias por la información.Ya hice todos los pasos que recomendaste, pero cuando lo voy a abrir en la parte frontal, aparece un signo de pregunta, en ves del icono, me podrías decir porque ocurre esto o que estoy haciendo mal!!!Gracias.
Saludos
Pues pues… te digo lo mismo que a Marian, lo que te está pasando es que WordPress cuando quiere se vuelve loco.
Mi recomendación es que lo pruebes en otro momento, si no es con el código que he compartido, que sea con otro que cojas de otro blog y lo modifiques a tu antojo en HTML.
De todos modos me estoy fijando en el código que has insertado y has cerrado la URL de la imagen con dos pares de comillas cuando solo tiene que ser un par:
http://arroyaveangelo.files.wordpress.com/2013/09/twitter.png«»
No sé si me entiendes ni si te voy a poder ayudar por aquí. Para una explicación más personalizada con imágenes y tal de lo que quiero decir, escríbeme si quieres a lorena.gonzalez.86@gmail.com y te envío lo que estoy viendo desde mi PC.
Aquí estoy peleándome con los botones, Lorena…. Gracias por escribir todo esto. Si me sale te aviso, te doy las gracias y te pago un café :):)
Gracias no, se dice «muchas veces».
Por cierto, estoy siguiendo ya tu blog 😉
Follow Back! De momento paro de intentarlo que me estoy poniendo muy nerviosa… mañána sigo! xD
Lo que explicaba antes por aquí 😛
Mejor probad en otro momento, y recordad revisar bien el código, puede que no estemos escribiendo bien algo.
Ahora tiene sentido todo, resulta que no lo veías. Te lo mando por mail.
Y lo que le pasa a los demás es lo que me pasaba a mí. Las dobles comillas no las ponen ellas, se ponen ellas solitas cuando aceptas el código. De todas formas, me dejo de rollos y te lo mando ahora por mail para que puedas modificar una parte del tuyo. Sólo es una pequeña parte.
Hasta ahora!!!
Editado, señorita 😉
¡Hola Lorena! Muy útil tu post 🙂 Estoy personalizando mi blog y la verdad es que lo intenté pero no me aparecían ni las imágenes ni los vínculos a las redes, como les pasaba a las otras chicas. Aquí te dejo otro código que funciona por si a alguien le viene bien 🙂
Con este código cuando se pincha sobre el icono se abre una pestaña nueva en el navegador 🙂 Espero que sea útil!!
Edito y comparto el código que me has enviado por e-mail.
Un saludo 😉
Eran las dobles comillas!!!!! Malditas cobardes!!!
Estoy tan contenta de haberlo conseguido que he dado palmas en plan We will We will Rock you! xD
Muchas gracias Lorena! Me han venido genial tus indicaciones 😉
a mi también me fallaban las comillas, se hacían dobles (no sé porque), pero yae stá solucionado.
Me ha costado toda la tarde pero por fin tengo los botones en mi blog! muchas gracias por el post y los comentarios, me han sido de mucha utilidad. Recomiendo tu blog y lo posteo en mi facebook 🙂
Me alegra que te haya servido, para eso lo publiqué en su día y para eso he ido intentando resolver vuestras dudas 🙂
Y desde luego… gracias a ti por la aportación 😉
Muchas Gracias!! La verdad es que de código no tengo ni idea!! Ahora como tú dices hay que probar los tamaños, porque por lo pronto el icono no sale, algo de estar mal en el código… o será el misterioso wordpress!! 🙂
Alicia, si es la primera vez que implementas los botones en tu WordPress paciencia. La primera vez suele dar un error que consiste en la inclusión de comillas de más en el código.
Si es tu caso espera a mañana u otro día y verás como te acaba funcionando. Es un defecto de WordPress.
Un saludo y gracias por tu aportación 🙂
Menos mal que existen estos blig donde podemos ayudarnos! ! GRACIAS y te haré caso, mañana lo vuelvo a intentar
Tenías razón, no sé si era wordpress o yo… pero ya lo he conseguido!! MIL GRACIAS!!
Era WordPress, te lo puedo asegurar 😉
Buen dia Lorena: Yo soy totalmente novata en esto, no tengo ni idea de por donde empezar, anoche hice el intento de crear un blog, y al parecer logre comenzar, pero ahora no sé como seguir agregando información. Estuve leyendo los comentarios de esta página y parece que ya todos son expertos en el tema. Donde puedo conseguir un manual paso a paso de como crear un blog, o sea, como iniciar desde cero? Espero me puedas orientar.
Saludos.
Hola Lala,
Si buscas en Google «Manual de WordPress» o «Manual de Blogger» posiblemente encontrarás información muy didáctica acerca de cómo crear un blog. Yo he encontrado este artículo que es algo más breve y espero que te pueda servir: http://www.desmarkt.com/como-crear-un-blog-en-wordpress-en-8-pasos.html
Para «agregar información» primero tienes que tenerla. Si este es tu caso no te resultará complicado, como siempre digo (y es aplicable también a perfiles en redes sociales), lo difícil no es crear un blog, sino mantenerlo actualizado con contenidos propios y de calidad.
Espero haberte servido de ayuda 🙂
Lorena, muchas gracias por el post, muy útil y he conseguido instalar los botones en mi blog… genial los comentarios sobre las comillas ! gracias a tod@s
De nada Xelo.
Seguro que te pasaba a ti lo mismo 🙂
Un abrazo!