Hace ya tiempo que te hablé de la importancia de poner botones para compartir en tus posts y no podía no hacer un post de cómo poner botones para compartir en Blogger.

Debido a ese post, muchas personas me han hablado por privado para preguntarme cómo hacerlo. Algunas porque no les gustaban los botones de Blogger, otras porque directamente no sabían cómo poner botones para compartir en las redes sociales.

Así que he decidido hacer este post. Hay muchos posts como este pero como hay tantas personas preguntando, yo te hago el mío explicándo todo a mi manera.

Vamos, lo de siempre. Hablo de todo a mi manera, ya estás acostumbrada si eres una lectora recurrente en mi blog.

Y ya está, no me enrollo más. ¡Empecemos!

¿Qué son los botones para compartir y porqué usarlos?

Como su nombre indica, los botones para compartir son botones que están situados al lado, al empezar o al finalizar el post. Estos botones son diferentes para cada red social. Así el lector puede decidir en qué red social quiere compartir dicho post.

Aunque el porque es importante usarlos ya te hablé extensamente en un post, te voy a decir algo muy obvio pero que no mucha gente piensa.

Es importante añadir botones para compartir en redes sociales en Blogger y en cualquier plataforma del blog porque es más cómodo. Sí, comodidad. Haz que sea fácil compartir tu contenido para tus lectores. Es mucho más fácil que, si les ha gustado tu contenido, lo compartan teniendo botones que si tienen que copiar el enlace y hacer una publicación ellos mismos.

Recuerda que no todo el mundo tiene todas las redes sociales. Así que es importante que como mínimo pongas los más populares. No pongas simplemente Facebook porque tú sólo utilices ese.

¿Cuales te recomiendo poner yo?

En mi opinión te recomiendo que pongas Facebook, Twitter, Pinterest, email, LinkedIn y Google+. Además, si puedes añadir la opción de imprimir o de enviar por whatsapp, ponlo.

Hoy en día hay muchas personas que envían posts por whatsapp y es algo que no se tiene mucho en cuenta. Piensa que estamos prácticamente todo el día con el móvil en la mano, que muchas personas te pueden leer a través de su móvil. Si les hace gracia algo y se lo quieren enviar a su pareja, a un familiar o a un amigo, lo van a hacer por whatsapp.

Yo recibo muchas veces posts por whatsapp. Más de las que te piensas. Así que si tienes posibilidad, hazlo. En mi caso, de momento, no tengo posibilidad de poner whatsapp, así que tengo que aguantarme.

Opciones para poner botones para compartir entradas en Blogger

Vaya título más largo me ha quedado, pero ahí se entiende bien. Lo dicho, ahora te voy a explicar 4 opciones diferentes gratuitas para que los añadas.

Llámalos botones para compartir, llámalos iconos de redes sociales, botones de redes sociales, lo que te apetezca. Pero aquí vas a tener diferentes opciones y tú eliges la que creas que mejor se adapta a ti.

Botones en blogger

Sí, quizá eso no lo sabías, pero Blogger ya trae de serie botones para compartir propios.

Simplemente ve a Diseño y en el apartado de Entradas del Blog le clicas a editar.

botones-compartir-blogger

Se te abrirá una ventana emergente que te mostrará diferentes opciones para las entradas de tu blog. Una de ellas es “Mostrar botones para compartir“.

Lo seleccionas, guardas. Cierras la ventana, guardas disposición y ya tendrás tus botones colocados.

entrada-botones-compartir-blogger

Y ya está, no hay más, es así de fácil.

Share This

Share This es una página online que te genera el código que pondrás en tu blog para que te salgan botones para compartir un poco mejor que los de Blogger.

Dicho esto, te voy a enseñar cómo hacerlo para que puedas hacerlo tú en tu blog.

Lo primero que tendrás que hacer es elegir si quieres que los botones aparezcan al principio del post o al lado y al final. Si quieres que aparezcan al principio clicas en Get Inline Buttons. Si prefieres que aparezcan al lado y al final le clicas a Get Sticky Buttons.

botones-share-this

Yo para este ejemplo he escogido el inline, pero tu escoge el que prefieras.

Yo he seleccionado las redes que me han parecido. Si seleccionas whatsapp te avisa que sólo aparecerá en la versión móvil.

redes-sociales-share-this

Seleccionas que redes sociales quieres que aparezcan, cómo quieres que esten alineados, si quieres que sean pequeños, medianos o grandes, si quieres que lleven una llamada a la accion, la cuenta de cuantas veces se ha compartido en esa red social o nada y si quieres que haya contador general y que haya un espacio. Una vez lo hayas hecho debes clicar en Registrer & Get Code.

datos-share-this

Pones tus datos, tu blog, tu email y tu contraseña, le das a get code  y obtendras estas instrucciones:

instrucciones-instalacion-share-this

Instrucciones de instalación:

Recuerda siempre antes de editar tu plantilla en HTML guardar una copia de seguridad por si ocurre algo.

Simplemente tienes que ir en Blogger a Tema y a Editar HTML.

Clica dentro del código y haz control+F para abrir el buscador y busca <head>. Está por el principio así que no te será dificil encontrarlo. Justo debajo pega el código que te ponen en el primer paso. Recuerda guardar siempre antes de cerrarlo.

codigo-html-share-this

Después vuelves a Diseño. Le clicas a añadir gadget en cualquier parte que te aparezca, porque luego lo arrastrarás a debajo de las entradas. Eliges HTML/Javascript y pegas el código que te han dado en el segundo paso. No tienes que ponerle título ni nada. Lo guardas y lo arrastras a justo debajo de donde aparecen las entradas en Diseño.

gadget-html-javascript-share-this

Guardas y listo. Ya tienes tus botones para compartir añadidos a tu blog.

Addthis

Addthis es como Share This, así que no me voy a entretener mucho más y te voy a explicar cómo poner tus botones.

Al entrar en su página lo primero que te encuentras es que debes iniciar sesión o registrarte con google+, facebook o un email. Escoge la que mejor se adapte a ti, yo por ejemplo iniciaré sesión con google+.

iniciar-sesion-addthis

Te pedirá tu correo y el país de donde eres y ya podrás pasar al siguiente paso.

Te aparecerán unas opciones para que escojas la que necesites. Addthis tiene diferentes posibilidades pero nosotros nos centraremos en los Share Buttons o botones para compartir.

share-buttons-addthis

Entonces nos aparece una página donde simulan la vista previa de nuestra web. A la izquierda encontramos las opciones que nos dan para añadir nuestros botones para compartir.

Actualmente tienen las siguientes opciones:

  • Flotando en la página a un lado (Floating).
  • Dentro del post (inline).
  • Que aparezcan en la esquina de la web y se expandan (expanding).
  • Para compartir sólo la imagen (image sharing). Este no nos interesaría, porque queremos que se comparta el post.
  • Popup.
  • Un banner encima del post.
  • Un slider en una esquina.

opciones-botones-compartir-addthis

Yo voy a elegir el inline para poner los botones de compartir dentro del post. Cuando tengas el tuyo escogido, le das a continuar

Ahora empezarás a configurar tus botones. Te  da las siguientes opciones de configuración:

  1. Share Counters (contadores): Aquí deberás escoger si no quieres contadores (none), si quieres que sean individuales para cada red social (individual), si quieres que muestre el total de todas (total) o si quieres el marcador en grande (jumbo). Escoge la que prefieras, yo voy a escoger none.
  2. Social Networks: Aquí debes escoger que salgan automáticamente y el número de redes sociales que saldrán o si quieres escoger tú las que salgan. Yo de ti escogería manualmente ya que, si pones más de 3, aparece tumblr y no google+, y creo que es más importante google+ que tumblr.
  3. Diseño: Yo de aquí te recomiendo no tocar nada porque interesa que estos botones llamen la atención y además ya tienen un diseño responsive, así que yo no voy a tocar nada. Si no sabes que es un diseño responsive te recomiendo leer este post.
  4. Opciones avanzadas: esto tampoco lo vas a tener que tocar.

personalizar-botones-compartir-addthis

Cuando hayas acabado de poner tus opciones correctamente, le das a Save & Continue. Te aparecerán las instrucciones para añadir tus botones. Como en la anterior ocasión, aquí también te voy a ayudar explicándolo yo también, para las personas que no entienden bien el inglés.

instrucciones-instalacion-addthis

Instrucciones de instalación:

Copia el código que te aparece en el paso 1 y dirígete a Blogger. Allí debes entrar en Thema y editar HTML.

Haz clic en el interior del código y clica Control+F para que se abra un buscador. Debes buscar </body> (lo indica el paso dos) y pegar ese código justo antes. Guarda los cambios y pasamos al siguiente paso.

codigo-html-addthis

Una vez hayas guardado los cambios, debes ir a Diseño. Allí añadir un gadget html/javascript, como en el caso anterior y pegar el código del paso 3. Una vez más pones el gadget encima o debajo de los posts en el diseño y listo. Te aparecerán justo antes del post o al final del post.

gadget-html-javascript-addthis

resultado-botones-compartir-addthis

Shareaholic

Shareaholic es otra plataforma igual, para que tengas distintas opciones. Cuando estés en su página principal debes hacer clic en sign up free para registrarte.

registro-shareaholic

Te pedirá un correo y una contraseña. Le clicas a create your account y ya tendrás tu cuenta creada. Lo que deberás hacer ahora es añadir tu web.

añadir-web-shareaholic

Sólo podrás poner webs o blogs que tengan dominio propio. Es decir, si tu blog sigue funcionando con .blogspot.com y no tiene dominio propio esta opción no la podrás utilizar.

Una vez añadas tu blog te pedirá que escojas que plataforma usas para tu blog.

escoger-plataforma-shareaholic

En mi caso he tenido que escoger WordPress porque no tengo ningun dominio en blogger.

En el caso de Blogger, al dar a continuar te aparecerá esto:

codigo-blogger-shareaholic

Instrucciones de instalación:

Te dice que lo que debes hacer es instalar ese código justo delante de </head>. Por lo tanto debes copiar ese código, ir a tema, editar HTML. Buscar </head> y pegar ese código justo antes. Guardas todo y vas al siguiente paso.

A partir de aquí yo no he podido continuar el proceso al no tener un blog en blogger con dominio para podertelo enseñar. Aún así he leído las instrucciones que dan ellos para su instalación y, como están en inglés, las voy a traducir para que no tengas problemas. Es decir, que a partir de ahora la información será de ellos y las fotografías también de su página.

Ahora lo que debes hacer es ir a Shareaholic y seleccionar tu web en My Sites. En el “apps” page, debajo de “social sharing”, verás que está “share buttons“, es decir los botones para compartir. Debes clicar en New in-page App.

añadir-botones-compartir-shareaholic

Imagen de Shareaholic

Pones el nombre que tu quieras a esa localización. No se verá en el blog así que simplemente escoge un nombre que tenga sentido. Si por ejemplo quieres ponerlo al principio del post podrías ponerle “botones compartir arriba” o algo así, sencillo.

Puedes editar si quieres la apariencia de tus botones y darle a guardar. Una vez hayas hecho esto debes ir al apartado Code, donde estará el código que debes poner en tu blog. Copialo.

codigo-html-shareaholic

Imagen de Shareaholic

Ahora vas a tema y editar html. Haces lo que ya he dicho de clicar dentro del código, y le das a control+F para abrir el buscador.

Debes buscar: <div class=’post-header-line-1′>

Puede ser que haya varios, yo te recomiendo que vayas probando. Simplelmente tienes que pegar el código que te han dado antes debajo de ese.

editar-html-shareaholic

Imagen de Shareaholic

Seguramente si te has equivocado de post-header-line-1 los botones no te aparecerán. No te desesperes, simplemente quita el código y ponlo en otro post-header-line-1.

Guarda los cambios y ya tienes tus botones para compartir en redes sociales instalados correctamente.

Opinión personal

Si no quieres pasarte un rato tocando código o te da miedo, yo te recomiendo que uses la primera opción. Usa los botones de Blogger simples. Son una opción totalmente válida igual que los demás. La única pega que puedes ponerle es que no son tan vistosos.

Si en cambio te atreves a tocar código pero no tienes dominio, te recomiendo que uses Addthis. A la hora de instalarlo no me ha salido ningún error y me ha sido mucho más fácil que Share This. En Share This me aparecía un error que después ha desaparecido sin saber por qué exactamente.

Lo he puesto como opción porque creo que era un problema mío y no creo que ese error afecte, pero aún así AddThis me ha resultado muchísimo más fácil de instalar. Así que yo apuesto por ello.

Por el contrario, si tienes dominio te recomiendo que uses Shareaolic. Lo he visto mucho más completo y además tienes muchas otras opciones para poner a tu blog como contenido relacionado, entre otros.

Así que dicho esto, espero que te haya sido de utilidad este post. ¿Con que opción te quedas tu? ¿Conocías todas?

Un besazo enorme!

Laura Montón.

Pin It on Pinterest

Share This