!Que importante es tener los botones de compartir visibles en nuestro blog! Es la mejor manera junto con las redes redes sociales de difundir nuestro contenido de una manera pasiva lo que contribuirá a mejorar nuestro posicionamiento como bloggers, aumentar visitas y por que no, contribuir a tener un blog bonito y coordinado con el diseño de los botones con la estética de nuestro blog.
Hay varias opciones muy diferentes de añadirlos que he ido recordando preparando un post sobre consejos para hacer que los demás compartan nuestros posts, que saldrá en breve. Escribiendo este post me acordé de lo que me costo encontrar la manera de incluirlos al final de cada entrada sin códigos super largos y complicados y con unos botones que siguieran la línea del diseño del blog.
Así sin más rollos vamos directamente al como hacerlo que este post es totalmente práctico y no quiero enrollarme más de lo necesario.
Lo primero es editar plantilla en vuestro escritorio de blogger (recordad hacer una copia de seguridad previa, por si las moscas).
Debéis buscar en la plantilla <div class=’post-footer’> poniendo el cursor dentro de la plantilla y presionando CTRL+F encontráis dos es muy importante que lo añadáis justo después del segundo, sino no funcionará.
Este es el código:
<center><div class=’addthis_toolbox’>
<div class=’custom_images’>
<a class=’addthis_button_share’><img alt=’Share this Post’ border=’0′ src=’http://i59.tinypic.com/e690lj.jpg‘/></a>
<a class=’addthis_button_facebook’><img alt=’Share to Facebook’ border=’0′ height=’30’ src=’http://i62.tinypic.com/skuz4o.jpg‘ width=’30’/></a>
<a class=’addthis_button_twitter’><img alt=’Share to Twitter’ border=’0′ height=’30’ src=’http://i61.tinypic.com/6jj60o.jpg‘ width=’30’/></a>
<a class=’addthis_button_email’><img alt=’Email This’ border=’0′ height=’30’ src=’http://i59.tinypic.com/15cburc.jpg‘ width=’30’/></a>
<a class=’addthis_button_pinterest_share’><img alt=’Pin This’ border=’0′ height=’30’ src=’http://i58.tinypic.com/k04yf4.jpg‘ width=’30’/></a>
<a class=’addthis_button_google_plusone_share’><img alt=’Share on Google Plus’ border=’0′ height=’30’ src=’http://i57.tinypic.com/oscv2s.jpg’ width=’30’/></a>
</div>
</div></center>
<script type=’text/javascript’>var addthis_config = {"data_track_addressbar":false};</script>
<script src=’//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd’ type=’text/javascript’/>
NOTA IMPORTANTE: Si al copiar y pegar este código te da algún error es debido a las comillas. Tendrás que sustituirlas manualmente por comilla simple ‘ . Lo mejor el copiar el código y pegar en un word sin formato (segundo botón del ratón) e ir sustituyendo cada comilla por una comilla simple ‘.
P.D: Este código esta basado en la herramienta Addthis desde la cual, previo registro, podéis añadir los botones que os propone mediante un simple widget o directamente en vuestra plantilla.
<center></center> sirve para que queden centrados. Si los queréis a la derecha tenéis que sustituirlo por <right></right>. Si no ponéis nada saldrán a la izquierda como los míos.
Todo el código en azul son la urls de la imágenes de los iconos correspondientes. Si queréis podéis usar lo míos y dejar el código tal cual. El tamaño lo podéis variar cambiando los 30 que hay en el código.
Y si quiero poner unos iconos diferentes, ¿De donde los saco?
Si domináis el diseño gráfico o tenéis ganas de experimentar, animaros a diseñar los vuestros propios con programas como pickmoney, Pirxl, Photoshop,..Hay un motón de tutoriales en la red que os enseñaran como.
Para los más vaguetes, os podéis descargar algunos de los set de botones que tengo en mi tablero de Pinterest ICONS. Subirlos a un servicios de alojamiento de archivos/imágenes tipo Dropbox, Tinypic,..y sustituir la url del código anterior por la de estos botones.
Por último si te gusta el estilo sencillo y minimalista puedes entrar en Iconsdb, una web donde podrás encontrar, personalizar( en tamaño y color), y descargar una gran variedad de iconos para tu blog. Esta es la web de donde saque los mismos de una manera super sencilla.
En la primera página puedes elegir los iconos a partir de un color (bien con el código del color o haciendo click en la paleta que te propone la página), escribiendo el tema en la caja de búsqueda (ten en cuenta que debes hacerlo en inglés→ Para los iconos yo puse social media) o pinchando sobre la categoría deseada en la nube de la derecha.
Una vez elegido el icono solo te queda elegir el formato (te aconsejo que sea png ya que tiene el fondo transparente de serie) , el tamaño (los míos son 32×32) y dar a la flechita de descargar. Para añadirlos al código de tu plantilla solo tienes que subirlos a tu alojamiento de imágenes favorito y poner su url en el código azul.
Por último puntualizar que si tenéis los botones de compartir que vienen por defecto en blogger, aunque instaléis éstos personalizados, los de blogger permaneceran en la versión móvil de vuestro blog.
Pues ya no tienes excusa para poner unos botones a tu gusto y estilo de una manera muy fácil. Me encantaría ver como te han quedado, así que cuéntame en los comentarios si decides hacerlo. Un saludo y nos vemos por las redes.
¿Te ha sido de utilidad el artículo?
(Votos: 1 Promedio: 5)
Hola. en apariencia es fácil copiar y pegar esos códigos… ya te contaré si al final me animo y me sale… la verdad es que los botones personalizados le dan personalidad y coherencia al blog. Seguimos en contacto
De verdad que es fácil pero también depende de la plantilla que tenga cada uno. Mucha suerte. Un saludo.
en esta última línea hay un error, actualizado porque da problemas al cargar.
es el script está mal cerrado:
< s c r i p t src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
—————————————————–
el correcto es:
< s c r i p t src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'>< / s c r i p t >
por cierto muchas gracias por tu ayuda , mi blog a mejorado muchísimo con esos detalles de los botones, puedes ver mi blog si te apetece saber más en
http://offmag.blogspot.com.es/
Fijo que me animo a hacerlo. Lo que me encanta de tu blog (por si te da ideas para posts, jejeje) es el botoncito de la impresora. Para blogs de recetas y manualidades sobretodo me parece ideal. Un besazo y gracias como siempre por ponerlo tan fácil 😉
Jaja..tengo el borradores el post sobre el botón de imprimir desde hace un par de meses. Me pondré a ello!!Un beso
Pues muy monos en tonos grises. A ver si me pongo y lo hago. Los de blogger son feillos, la verdad.
Feillos y a veces se pierden en el blog, sobre todo para la gente que son nuevos en este mundo. La clave esta en ponerselo fácil al lector a la hora de compartir nuestros posts. Un beso.
Muchísima gracias!!! llevaba mogollón de tiempo buscando la forma de ponerlos personalizados y nunca di con un tuto en condiciones. Voy a probar con este 🙂 que seguro que no me da problemas jejeje gracias otra vez, ya te contare 😉
Besines
Alba, Niña Bonita Accesorios
hola! al buscar en la plantilla no me sale "< class="post-footer"/>" ..me aparece
" class='post-footer'>"
" class='post-footer-line post-footer-line-1'>"
esas dos opciones, son esas? Cariños
Hola, perdona pero se me coló una comilla de más. Se he corregido los que tienes que buscar. Es la primera opción que tu comentas pero recuerda ponerlo en el segundo que encuentres. Un saludo y ya me dirás si te funciona.
gracias!! i si quiero que salga a la izquierda le coloco "left"?
Puedes ponerla pero sino no pones nada te saldran solos a la izquierda. Un saludo.
Puedes ponerla pero sino no pones nada te saldran solos a la izquierda. Un saludo.
Me encanto este tutorial se ve fácil … Haber … Porque en cuando me pongo y veo tantas letras me tiro para atrás …por miedo a equivocarme y destrozar el blog.
Solo recuerda antes de tocar la plantilla, hacer una copia de seguridad, por si las moscas borras algo sin querer. Y antes de guardar, comprueba que en la vista previa todo sale bien. Un saludo y suerte.
Solo recuerda antes de tocar la plantilla, hacer una copia de seguridad, por si las moscas borras algo sin querer. Y antes de guardar, comprueba que en la vista previa todo sale bien. Un saludo y suerte.
¡Un dos, probando!!
Hola. Genial tutorial no… lo siguiente. Me viene de perlas ahora que estoy en proceso "plan renove" del blog.
Lo que una consulta, en la plantilla Html, sólo encuentro una vez el código que nos dices que tenemos que encontrar dos ( que no escribo porque si no no me deja mandar el mensaje…. ) ¿Es indispensable tener dos? Y he probado y probado.. pero no encuentro ninguno más, y no me funciona ¬¬ ¿Alguna sugerencia? Gracias
Normalmente el primer post-footer es para la versión móvil solo. A veces tienes que abrir alguna línea de la plantilla donde haya puntos supensivos. Busca una línea parecida a esta ….
Haz click en los puntos y al bajar veras otro post-footer. Ya me cuentas!! Un beso.
Perdon que no me cogía la línea de ejemplo b:includable id='post' var='post'
Hola guapa. Ok! Miraré de hacerlo con calma, a ver si no me explota de una vez el blog…que podría ser jajajajaja ;Muchas gracias cielo. Cuando lo pruebe te comento. Besos y de nuevo gracias
Ya lo he puesto, gracias por el tutorial ^^
Lo único, una duda que me ha surgido… ¿Cómo puedo crear un espacio entre la frase animando a que compartan y el primer icono de las redes sociales? No quiero que se vea tan junto, si no que haya un espacio como los hay entre las palabras como cuando escribimos, no sé si me explico :S
Puedes probar a cambiar la imagen de la frase y dejar mas espacio en blanco a la derecha de la ultima palabra. Es una solucion un poco rustica pero funciona. Un beso.
Hola, Ana,
Antes de nada, gracias por explicarlo tan facilito, pero tengo una duda, ¿se puede poner botón de instagram? ¿podrías poner el código?
Muchas gracias!!
Hola Casala, ya esta actualizado con la opción a instagram. Un saludo
Rectifico, he tenido que borrar la actualización del botón de instagram por que con este sistema no se pueden compartir post en esta red. Un saludo
Me he pasado toda la tarde disfrutando de tu blog. Llegué a él buscando los menúes desplegables, que me funcionaron perfectamente, aunque solo los he probado en mi blog de prueba. realmente lamento no necesitarlos por el momento. Excelente! (tienes mi voto en Bitácoras!)
Sergio (de "El Kronoscopio")
Hola y bienvenido Sergio. Encantada de servirte de ayuda. Me paso a visitarte y gracias por el voto. Un saludo.
Me ha encantado! busque como loca como hacerlo y el tuyo se me hizo super facil!!!! 😀 lo que no se es como cambiar el color de la frase comparte este post y cambiar la tipografia… espero tu respuesta gracias 😀
La frase comparte es post es una imagen asi que no se puede cambiar nada. La unica opcion es que tu hagas una nueva,la subas a un almacenamiento web y sustituyas mi url por la url de tu imagen. Un saludo.
¡Hola Ana! muchas gracias por el post,está genial,pero me está dando problemas el código para Instagram,tanto poniendo tus iconos,como con otros propios,da a una página que dice addthis… Lo mismo es fallo mío y no sé ponerlo bien. Besos! 🙂
Gracias a tu comentario he comprobado que utilizando este código de addthis, es imposible compartir un post en Instagram. Supongo porque es una red totalmente visual y basada en la fotos y no pasa como en Pinterest que si te deja compartir links de posts con la condición que contenga alguna imagen. Un saludo
Hola, Ana María. Muy interesante post, pero me gustaría poner un iframe al pie de la entrada para que puedan insertar cada artículo de mi blog en otro, si fuera de interés. Cómo puedo hacerlo? Desde ya, muchísimas gracias!
Hola Ana..pues para decirte la verdad ahi me has pillado. No tengo ni idea. Un saludo.
Hola Ana..pues para decirte la verdad ahi me has pillado. No tengo ni idea. Un saludo.
Hola Ana! Estupenda entrada, ha funcionado a la primera y la página de los iconos ya la tengo a buen recaudo 🙂
Muchas gracias!
¡Hola Ana! Un post con resultados fantasticos en los botones, pero una pregunta ¿si se puede incluir en la plantilla movil de blogger o hay otra forma de incluir los botones?
Muchas Gracias! 🙂
Hola Angeli, yo lo he intentado pero todavia no he conseguido adaptarlos a la vista del movil(me salen super grandes) . Por eso yo he mantenido la opcion que te trae blogger por defecto en la vista movil. Un saludo.
Hola Angeli, yo lo he intentado pero todavia no he conseguido adaptarlos a la vista del movil(me salen super grandes) . Por eso yo he mantenido la opcion que te trae blogger por defecto en la vista movil. Un saludo.
Muchas Gracias me ha sido de gran ayuda lo unico que no me he entendido muy bien con la web de AddThis porque no he visto la manera de pasarla a Castellano y me cuesta, de momento he puesto tus mismos botones pero espero personalizarlos, muchas gracias 😉
GRACIAS!! queda genial
Gracias, Ana María. Fueron muy últiles tus comentarios y el lenguaje de programación.
Hola, guapa. A mí no me aparece » class=’post-footer’>»… ¿Por qué será? La cosa es que yo creo que esos botones los tenía antes. Tampoco me llegan ahora notificaciones de los comentarios al correo. No sé qué habrá pasado porque, tocar, no he tocado nada que yo sepa.
Gracias.
Un beso
Hola guapa, he visto el código fuente de tu plantilla y si que he encontrado una línea con el código como marco en el post. Lo que pasa es que a veces esta oculto dentro del código. Tienes que saber más o menos donde esta localizado por la platilla en la zona de footer e ir desplegando el código haciendo clic donde hay varios puntos seguidos. Sobre las demás cosas de blogger que no te van puede ser debido a las últimas actualizaciones de blogger. Prueba a revisar si todos los datos son correctos en la sección de configuración. Un saludo.
No era lo que andaba buscando, pero me diste unas ideas muy buenas
gracias
Hola. Cuando utilizo los botones nuevos me enlaza a la página principal en vez de al post que quiero enlazar. ¿A qué se debe?
HOla, he visto tu blog pero no ví los botones por lo tanto no puedo decirte donde estaba el fallo. Un saludo
Hola! Gracias por este post! Sólo que no me aparece el segundo y tampoco encuentro la opción de los puntos suspensivos. Sí que encuentro b:includable id=’post’ var=’post’ pero nada de puntos o lineas para abrir. ¿Cómo podría solucionarlo? Muchas gracias!
Hola Ana, he seguido intentándolo pero nada. Además me sale este error: Error al analizar XML, línea 2040, columna 20: Open quote is expected for attribute «class» associated with an element type «div». Algún consejo para solucionarlo? Gracias!
Hola, como comentaba en el post, los errores que da es por el asunto de las comillas. También explico como solucionarlo. Un saludo
A mi me sale el mismo error que a Hellen
Los errores del código es por la cuestión de las comillas. Suele pasar cuando copias y pegas un código. Tendrás que sustituir la comillas a mano como explico en el post. Un saludo.
Las comillas son las simples, las he cambiado a las otras, lo he pegado previamente en word,… y me sigue dando este error:
No se ha podido cargar la vista previa del tema: Error al analizar XML, línea 1525, columna 12: Open quote is expected for attribute «class» associated with an element type «div».
Hola Ana, parece muy facil seguro, pero yo no ecuentro en mi plantilla y me estoy dejando la vista, ¿alguna pista de donde pueden encontrarse?
Gracias por hacerlo sencillo
Hola, llevo bastante rato intentando buscar el código y resulta que el ctrl+F lo hacía sin pinchar antes la plantilla html, por lo que me aparecía abajo, y me buscaba fuera de la plantilla, pincha primero la plantilla y al pulsar ctrl+F tiene que aparecerte la ventanita dentro de la plantilla html. Ahora que lo he descubierto voy a seguir intentándolo…
Se me borró el comentario. Hice lo que mencionas, pero no me aparecen los iconos para compartir. Mi blog es silenciodementa.com. Qué estaré haciendo mal? Mil gracias por tus consejos!
Hola Ana María,
¡Gracias por el tutorial! Me ha quedado genial -> http://www.elnidofamiliar.es
PERO EN LA VERSIÓN MÓVIL NO SE VEN, cómo puedo hacer para que aparezcan?
De momento he activado los que vienen de serie en blogger pero se me duplica en la versión web…
A ver si puedes ayudarme 😉
Hola tendrías localizar el código de la vista móvil y copiar allí también el código de los botones. Aunque con todos los cambios que va haciendo blogger no te puedo asegurar que funcione. Te recomiendo instalar en tu blog una plantilla con una vista móvil optimizada como las que tienes en sitios como soratemplates o themexpose. Las ahi tanto gratis como de pago. Te ahorrarás muchos quebraderos de cabeza. Un saludo.
La experiencia en tu blog ha sido un poco desagradable. No paran de aparecer mensajes emergentes con ofertas de tus servicios. Comprendo que es tu negocio (y eso ya se sabe al entrar en la página), pero los mensajes distraen mi atención, me quitan tiempo y son demasiado insistentes.
Gracias por tu apreciación. Estoy valorando reducir estas ventanas. Pero no son ofertas de mis servicios, sino pruebas de gente que se descargar mi contenido y/o productos de forma gratuita o se suscriben a mi newsletter. Un saludo.
Millones de gracias, Ana María, por hablar de esta herramienta. Me parece de lo más útil. No tenía ni idea de que existiera algo similar. Estoy segura de que la voy a sacar mucho partido.