Hoy voy a contaros como crear un Widget lateral para vuestros blogs, donde aparezcan unos iconos, que al hacer click sobre ellos, lleven a la gente a vuestras páginas en las redes sociales, o a cualquier otro lugar que os interese (igual que el que tengo yo en mi lateral). He enfocado este mini tutorial en plan copia y pega, prescindiendo de explicaciones sobre HTML, para no extenderme demasiado, y para que cualquiera pueda hacerlo. Si tenéis alguna duda concreta preguntad en los comentarios (si queréis aprender HTML, la web está llena de buenas opciones para aprenderlo).
Yo recurrí a esta solución porque me pareció más claro y más limpio que tener varios Widgets de diferentes estilos, para cada red social. Porque no hay Widget para Google+, y porque al tener pocos seguidores en las redes sociales, no quería darlas demasiado protagonismo en el área de Widgets. Aparte también os voy a enseñar como introducir otro icono más, para dar la posibilidad de que os sigan por Feeds en el mismo Widget, y así matamos más pájaros de un mismo tiro.
No tenía la intención de hacer tutoriales en este blog, pero la semana pasada me comprometí a ayudar a Hesperetusa➠ a poder relacionar su cuenta de Google+ con su blog, y creo que esta es la mejor forma de hacerlo. Además el código que os voy a poner abajo, también lo podréis usar en vuestros artículos, para introducir imágenes que se comporten como enlaces (en vez usar el texto normal), lo que en determinadas circunstancias resulta un recurso muy útil y elegante.
Los pasos a seguir son los siguientes:
❶ Tener preparadas todas las direcciones web, de vuestras páginas en las redes sociales. Por ejemplo la dirección de mi página web en Facebook, que utilizaré más adelante en este ejemplo es: https://www.facebook.com/pages/Palabra-de-Lost/143716552482789
❷ Buscar y elegir un pack de iconos en formato .jpg o .png para las redes sociales que nos guste, y valla con el look de nuestro blog (los que yo tengo son de 45X45 píxeles, vosotros sabréis si los queréis más grandes o más pequeños). Para localizarlos, podéis usar vuestro buscador favorito, descargar alguno de los que os proponen en este artículo➠, o hacéroslos vosotros mismos en Photoshop, GIMP➠ o cualquier otro programa de retoque de imagen que utilicéis.
❸ Una vez elegido vuestro pack de iconos, tenéis que subirlos a la red, uno por uno y guardar sus direcciones url.
Por ejemplo mi icono de Facebook (que veis arriba y en el Widget), lo tengo localizado en esta dirección: http://img208.imageshack.us/img208/8821/nu8l.png Como podéis ver, uso un servidor de imágenes dedicado llamado ImageShack➠, en vez del de wordpress.com, como truquillo para que el blog cargue un poco más rápido (así mejoro un poquito mi SEO). Por si os ha gustado la idea, os adjunto un tutorial bastante bueno sobre como subir imágenes a Imageshack➠ (si a alguien le quedan dudas, repito, no os cortéis en preguntar, nadie nace enseñado).
❹ Entramos a nuestro blog, y vamos a la sección de Widgets (Escritorio > Apariencia > Widgets), y arrastramos uno que se llama «texto», y en cuya descripción aparece «texto o HTML alternativo», a nuestra barra para Widgets.
❺ El código HTML que utilizaremos para cada uno de los iconos de nuestras redes sociales explicado es este:
<a title="Texto que aparecerá al poner el ratón sobre el icono que hayas elegido para la red social" href="dirección web incluido el http:// de tu perfil en las redes sociales" target="_blank"><img src="dirección url de alojamiento del icono" width="ancho del icono en píxeles" height="alto del icono en píxeles" border="0"/></a>
Nota: Por si tenéis curiosidad, lo de de target=»_blank» sirve para que los enlaces se abran en nuevas pestañas del navegador. Lo demás si lo pensáis un poco es bastante lógico.
Utilizando los datos que os he ido dado en los pasos ❶, ❷ y ❸, para reemplazar los textos explicativos de su mismo color, el código para mi icono de Facebook sería:
<a title="Ver la página del blog en Facebook" href="https://www.facebook.com/pages/Palabra-de-Lost/143716552482789" target="_blank"><img src="http://img208.imageshack.us/img208/8821/nu8l.png" width="45" height="45" border="0"/></a>
Nota: Ignorad los cambios de renglón del código, se pueden sustituir por simples espacios, y si los dejáis tal cual, los navegadores los ignorarán, pero están porque todo el código no cabe en un renglón.
El resultado del código anterior, es un enlace distinto de la imagen de arriba, aunque a simple vista parezcan lo mismo (probad a hacer click sobre los dos):
Nota: WordPress es un poco peculiar con las comillas «. En el Widget no vais a tener problemas, pero si el código no os funciona en los artículos: Ponéis la imagen en el artículo > la seleccionáis > y seguís los mismos pasos, que ya hubierais seleccionado un texto y lo quisierais hacer enlace, y eso funcionará seguro.
❻ Este es solo uno de los 4 iconos que tengo en la barra lateral. Hay que hacer uno de estos textos para cada red social, y pegarlos en el orden que queramos que aparezcan uno detrás de otro en el Widget, colocando entre ellos « » (sin comillas), que es un espacio entre imágenes, para que no queden pegadas. El esquema de mi Widget es:
<a title="...ICONO Feeds...</a> <a title="...ICONO Twiter...</a> <a title="...ICONO Facebook...</a> <a title="...ICONO Google+...</a>
He puesto <a title="...ICONO Facebook...</a> para representar el código del icono de Facebook en vez de todo el código HTML que he desarrollado en el paso ❺ (y igual para los Feeds, Twiter y Google+), porque la idea es mostraros el esquema, y como usar no embarullarlo todo con las 12 líneas que ocupa el código completo del Widget.
❼ Recomiendo cambiar el título al Widget, porque «Texto» no queda nada elegante. Yo por ejemplo, le tengo puesto «Otras formas de seguirme»
Nota: Si queréis añadir la opción de que os sigan a través de los «Feeds», se hace igual que para las redes sociales, pero sabiendo que la dirección web que tenéis que usar es la dirección principal de vuestro blog acabada en /feed/. Por ejemplo en este blog https://palabradelost.wordpress.com la dirección de los Feeds es https://palabradelost.wordpress.com/feed/
Pd: He usado muchos colorines, para ayudar a entender mejor el código, espero no marearos demasiado :). Parece complicado, pero si vais con cuidado, en 5 minutos está hecho.
Palabra de Lost 
Yo en cinco minutos no tengo hecho ni un icono de esos 😀
Pero sí, se entiende el proceso, yo solo uso twitter y me da que no usaré el tutorial, pero no obstante sí que animo a seguir por esta senda ya que al final siempre encuentras algo que te sirve.
Alguna cosilla más tengo pensado meter sobre HTML, pero wordpress.com nos tiene muy limitados en este sentido, y solo deja usar los comandos más sencillos. Dicen ellos que por seguridad, yo creo que para que pasemos por caja, si queremos tener un sitio más profesional.
Muchas gracias por la visita.
En todo caso con ese html mismamente se pueden hacer cosas que al común de los mortales nos pueden dejar flipados, lo digo por experiencia propia 😀
Se entiende a la perfección, lo que pasa que en micaso no tengo cuentas en ninguna Red pero el aprender no ocupa lugar.
Saludos.
Me alegro mucho de que se entienda bien, pensaba que me iba a hacer el tuturial en media hora, pero al final me he liado de lo lindo con los coloritos, y eligiendo lo que contaba o no, para no liaros demasiado.
Interesante.
Aunque hace poco ya se puede compartir las entradas en blog en Google+.
Me gustaría que hagas una entrada de como incluir el Google Translate. He intentado todo y aún no he logrado incluirlo en mi espacio.
Un besote.
_____________________________________________________________________
EDITO:
Quise decir que ya se puede compartir automáticamente en Google +. Se me fue la tecla enter.
Saludos.
Se puede compartir en Google+, si colocas el botón (o copiando y pegando la dirección), pero no puedes tener un widget lateral, que sirva de enlace a tu cuenta en esa red, y de algunos datos.
No creo que se pueda. Por un lado el HTML que podemos usar en los blogs gratuitos, es muy limitado (y no podemos ni mirar el CSS3 o el PHP de nuestros temas), y por otro lado, WordPress y Blogger (que pertenece a Google) son competencia directa, y no se llevan nada bien, así que lo veo complicado. Podrías escribir tus artículos en Ingles y en Español, si no son muy largos, o tener un blog espejo del tuyo en Inglés, y relacionarlos con enlaces.
Lo siento pero no se me ocurre nada más.
Mi blog se comparte automaticamente en mi cuenta de Google+. Se puede hacer desde hace poco. Se configura en Ajustes y compartir.
En cuanto a Google Translate, he visto un blog con el widget de traducción de google, no sé si deba a que sea una cuenta premiun. Y eso es lo que estoy tratando de averiguar.
Un besote, gracias por la información.
No se puede incluir Google Translate como tal. Las únicas soluciones son las que te comenta Lost o incluir unos enlaces, bien en forma de imágenes bien en forma de texto, en un widget de texto que conecten con el mismo y te traduzcan la página: Enlazar el traductor de Google en blogs de WordPress.com
Gracias por la información.
Saludos.
Gracias Lost. Espero poder ponerlo en práctica en unos días, aunque sea en una modesta página de Google+ (no tengo página de Facebook) y si me falla, no dudes que me acercaré por aquí a dar la lata.
Pues aquí estaré para lo que necesites. Eso si, la respuesta igual se demora un poquito, pero fijo que la tendrás.
Buen tutorial. En cuanto a imageshack. no se mi mejora o no el SEO, lo que si se, en carne propia, es que en ocasiones falla más que una escopeta de feria. No es un servidor de mi gusto, es cierto que todos fallan, pero este en particular me dio más de un quebradero de cabeza. Los atributos «title» y «alt» tengo la costumbre de añadirlos en la imagen, precisamente por si las imágenes fallan en la carga.
Por otro lado, en mi opinión deberías arreglar el enlace a tu feed, has puesto el cierre de etiqueta </a> después de un par (que creo que tampoco son necesarios, basta con pulsar la barra espaciadora para separar las imágenes) y, por ese motivo, al pasar el ratón sobre el se ve un pequeño subrayado entre el icono del Feed y el de Twitter. La dirección de tu facebook valdría con https://www.facebook.com/pages/Palabra-de-Lost/143716552482789.
Pues es raro que ImagesShack te trate tan mal. Yo lo uso hace años, y siempre me ha tratado de lujo. Te puedo poner el ejemplo de que he tenido una firma que era un gift con casi 20 imágenes enlazadas en un foro durante más de 3 años, y al final me la borraron pero porque creo que ya iba tocando.
Para que te traten mejor creo que es importante que junto al código de las imágenes que insertas, les permitas incluir un enlace a su página. Lo que veo una contraprestación de lo más justa, yo siempre lo hago en mi blog.
Respecto al detallín del
</a>, no había caído. En realidad no lo había incluido en el Widget, porque en HTML5 no es necesario cerrar algunas etiquetas para que funcionen, pero había pasado por alto el detalle de que me subrayaba los espacios, al poner sobre ellos el cursor (valla vista la tuya macho).Encuanto a los
si son necesarios, HTML ignora los espacios normales, y los saltos de renglones. Puedes hacer la prueba, al guardar el widget, te reescribe un poco el código eliminándolos.Finalmente del ref=hl, no encontré información sobre lo que hacía en Google, así que decidí dejarlo, ya que me imagino que aportará algún tipo de información extra, ahora que cual.. pues ni idea. Ya que te has molestado en decirlo, te voy a hacer caso y lo quito, y así de paso el post queda más limpio.
Un saludo y muchas gracias por tus anotaciones.
Respecto a imageshack también lo usé años. Aún sigo siendo usuario registrado y tengo allí cerca de 500 imágenes almacenadas, lo acabo de mirar 🙂 hasta que empezó a ir mal (y no solo a mi, también a más gente que conozco de foros), el motivo no lo sé.
Sobre los espacios , solo te puedo decir que en su día yo no los puse… o al menos no recuerdo haberlo hecho.
Saludos Lost.
Tendré que preguntar a ver si ImageShack se está estropeando, sería una pena porque no hay otra página que me de más confianza. Puede que tus problemas sean por tener tantas imágenes subidas, creo que 500 es el límite máximo que permiten ahora, y luego empiezan a borrar las viejas.
Puede que no necesitaras poner los espacios, por algún detalle de la plantilla de tu tema.
Un saludo y de verdad, gracias por tu aportación.
Lo de ImageShack no es de ahora, fue cómo hace un par de años y escarmenté, ahora puede que vaya bien. Por aquel entonces creo recordar si la memoria no me falla (que es lo más seguro y esté mezclando unos servicios con otros) que por entonces el límite estaba en 900 imágenes.
Muy interesante. Un día que tenga tiempo lo intentaré, ya que soy muy tocho para ello
Uyyy pero cuanto sabes de lo que yo apenas sé….
Me vas a ver mucho por aqui…
Te dejo besos…con alas….
Pues yo encantado de ayudar en lo que pueda.
Un abrazo, y bienvenida.
Un abrazo… muy interesante tu post.
La explicación que has dado es muy sencilla, ¡¡En cuanto tenga algo de tiempo decidiré a probarlo!!!
Me alegro de que te haya servido, y ya sabes, si te queda cualquier duda, no dudes en pasar a preguntar.
Un saludo.
Muy bueno, me ha sido de muchísima utilidad. Gracias por este post.
Muchas gracias, muy sencillo y da resultado cien por cien!
Me alegro de que te haya sido fácil de seguir los pasos.
Un saludo y bienvenido.
Palabra de Lost, de nuevo aquí. Atendiendo a mi promesa, he incluido en mi blog el botón de Twiter que faltaba, te lo había prometido… Este artículo me ha sido de mucha utilidad, y quería volver a consultarte: estas directrices son válidas para otras páginas o espacios en la red. Lo digo por aplicarlo en mi portafolios..