Incrementa las posibilidades de que los usuarios compartan tus contenidos, poniendo a su disposición los botones para redes sociales en zonas bien visibles y sin penalizar el rendimiento de tu Blog.
Esta guía va especialmente dirigida a todos los usuarios noveles que desean difundir sus Blogs por las redes sociales y necesitan un método que sea de escasa complejidad y rápida ejecución.
Hemos utilizado botones sociales de toda clase, hemos analizado la importancia que tienen a la hora de permitir a nuestros usuarios interactuar con nuestros contenidos, valorándolos o incluso difundiéndolos entre sus amigos y seguidores en Internet.
Nos hemos integrado en el "social Media" viendo cómo enviar nuestras entradas automáticamente a Facebook, enviarlas a Twitter, utilizamos a diario Google+ y sus Hangouts como red fundamental para compartir las entradas de nuestro Blog, hemos aprendido a integrar Twitter dentro de nuestra web e incluso hemos añadido iconos de acceso para redes sociales en la cabecera del título para nuestro Blog.
En anteriores entradas, cuando hablamos de la colocación de botones o iconos sociales en zonas estratégicas del Blog que facilitaran al usuario compartir los contenidos que fueran de su agrado, lo hicimos configurando cada botón creándolo en la red social a la cual pertenecía. Muchos usuarios noveles encuentran este método engorroso. Tal como prometí hoy os traigo un método para poder añadir dichos botones que será del agrado de todos los más noveles en la materia.
Explicaré paso a paso cómo insertar botones para compartir los enlaces ("share buttons") o para que nos puedan seguir en nuestros perfiles sociales (follow buttons) de la manera más sencilla y rápida posible.
¿Qué vamos a hacer?:
Vamos a centrarnos en colocar los botones para redes sociales en zonas estratégicas que nos permitan situarlos a la vista de nuestros usuarios, para que puedan operar con ellos casi instintivamente. Pensemos que muchas veces perdemos oportunidades de llegar a más personas simplemente porque la usabilidad de nuestro Blog no ofrece facilidades al consumidor que por él navega las facilidades para compartir lo que está viendo.
¿Qué son los botones sociales?:
Los botones para redes sociales son como su propio nombre indica "botones web" que al ser "pulsados" por los usuarios, les conectan directamente o con nuestro perfil en una determinada red social ("follow buttons") o le permiten difundir nuestro contenido entre sus amigos y seguidores de su propia red social ("share buttons").
- Los botones de las redes sociales exigen la utilización de unos "scripts" que permiten introducir en nuestro Blog los "mecanismos necesarios", a través de código fuente para:
- Que los usuarios puedan puntuar nuestros contenidos o sumarse a ellos.
- Que los usuarios puedan suscribirse a nuestros contenidos, hacerse seguidores nuestros.
- Que los usuarios puedan "difundir" por su red social preferida nuestra entradas para que puedan leerlas otros usuarios.
- Estas posibilidades son revolucionarias, pues permiten a nuestros clientes interactuar, propagar, difundir nuestras creaciones más allá del círculo social en el que nosotros nos movamos para pasar a incluirlo dentro de otros que nos son ajenos.
- Por supuesto, la adición de estos añadidos obliga o, más bien, hace imprescindible estar dado de alta en todas las redes sociales cuyos botones decidamos poner en nuestro Blog.
¿Dónde puedo colocar los botones para redes sociales en nuestro Blog?:
Hay dos zonas en las entradas de nuestro Blog especialmente sensibles para que nuestros usuarios localicen con facilidad los "botones sociales" y los puedan utilizar incluso instintivamente:
- La parte superior de una entrada: en la cabecera a izquierda o derecha, antes o después del título. Aquí lo más recomendable es utilizar botones de tipo "Follow button": los que permitirán a los usuarios asociarse nuestro perfil de red social y estar antentos a nuestras actualizaciones por medio de seguimiento. Debido a que no requieren cargar scripts, son idóneos para las primeras líneas de una entrada pues son mucho más vistosos que los "Share buttons", y no ralentizan el proceso de carga de toda la página.
- La parte inferior de una entrada: en el pié de página. Cuando el usuario ha finalizado a terminar de leer la entrada, disponer de los "Share Buttons" o botunes para compartir es ideal por dos motivos:
- Velocidad: los "Share Buttons" llevan scripts integrados que calculan el número de veces que se ha compartido algo o enviado algo, la carga de estos es lenta porque el navegador debe conectarse a los servidores que tienen las bases de datos donde reside la información de nuestra "puntuación" o de nuestros "contadores" de envíos. Al encontrarse al final de la página, su dibujado puede llegar a pasar inadvertido por el usuario, ya que normalmente nunca hace "scroll" directamente para dirigirse al final de nuestra entrada. Esto da tiempo a los scripts a cargarse sin producir la impresión visual de lentitud tan denostada para la fluidez de nuestros Blogs.
- Idoneidad: es el lugar idóneo pues el usuario ha podido leer la entrada completa y decidir compartirla en su red social al terminar.
El método más sencillo, utilizando AddThis:
1) AddThis es una web que como servicio al cliente proporciona los botones para redes sociales sin tener que tener ninguna clase de conocimientos avanzados en informática. Simplemente te conectas, seleccionas los que necesites y los pones en tu Blog. En primer lugar nos conectamos a http://www.addthis.com/.
 |
| Página principal de ADDThis |
2) Si no estás dado de alta en la herramienta, en la parte superior derecha pulsa "Create Account" para darte de alta en el servicio.
 |
| Página de alta de AddThis |
- En este punto es tan sencillo como darte de alta utilizando tu cuenta de Facebook, de Twitter , de Google u OpenID.
- Por otro lado, podrás hacerlo manualmente tú mismo sin vincular tus cuentas introduciendo en "email address" tu dirección de correo e introduciendo una clave de acceso en "Password" y su verificación en "Retype password".
- Llegados a este punto, como siempre te digo cuando contrates un servicio en internet LEE los términos del servicio ("Terms of Service") y la política de privacidad ("Privacy Policy").
3) Ahora es tan sencillo como seleccionar los botones que te interesen y posteriormente copiar el código fuente de AddThis para llevártelo a tu Blog.
 |
| Selecciona el estilo de botones que quieres poner y luego copia el código fuente para llevártelo a tu Blog |
- En primer lugar verás que la primera fila de botones son "share-buttons", los que puedes colocar por ejemplo al final de tus entradas.
- En segundo lugar verás que los de la segunda fila son "follow-buttons", los que puedes colocar al principio de una entrada o en una barra lateral de tu Blog donde se encuentren visibles para que el usuario pueda hacer "clic" en ellos para seguirte.
- En último lugar, son botones "flotantes" ("hover-buttons"), siempre presentes en el Blog mientras el usuario navega por él, "flotando" a la izquierda del texto.
Selecciona los que sean de tu preferencia y copia el código que se encuentra bajo el literal "ADD to your Site" (te he marcado todo en el "pantallazo" superior de ejemplo ).
4) Para insetarlo en tu Blog, dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño.
 |
| Opción de diseño en Blogger. |
- En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar los botones para redes sociales de AddThis y selecciona el Gadget "HTML/Javascript".
 |
| Pulsa sobre "Añadir Gadget" en la zona donde deseas insertar los botones AddThis |
- Añade el código fuente que recuperaste de AddThis:
 |
| Añade el código fuente del AddThis |
- Pulsa "Guardar Disposición" y ¡ya lo tienes!
Como puedes ver con AddThis es facilísimo equipar al Blog con botones para redes sociales. Si te ha parecido sencillo y quieres colocar los "share-buttons" al final de cada entrada de tu Blog, te recomiendo utilizar esta guía desde el paso 8) utilizando los botones AddThis.
Cualquier duda, dispones de los comentarios para lo que necesites.
buenisimo
ResponderEliminarHola, como veo tienes los botones sociales debajo de cada entrada. En el cuadro de evaluación de google Adsense no te da un pequeño fallo "Los siguientes recursos se cargan de forma sincronizada. Cárguelos de forma asíncrona para reducir los bloqueos al mostrar la página. XXXX carga https://apis.google.com/js/plusone.js de forma sincronizada."
ResponderEliminarLo he intentado solucionar de varias formas, editando la plantilla y demás pero no hay forma.
¿Podrías ayudarme?
Si Toni,
EliminarYo padecía lo mismo. Pero como te contesté en el otro post, investigando con pagespeed descubrí que está era la mejor opción:
Haz esta guía mía, perdona que mo te puedo poner el enlace, va el titulo:
"La guía para añadir botones sociales a tu Blog - Preparada para usuarios noveles, usuarios intermedios y usuarios avanzados"
Con eso lo solucioné yo. No los pongo directamente en la página principal, les meto el if cond para que sólo se muestren al pulsar el detalle y así consigo un 98 en pagespeed y 5 estrellas en Adsense. El plausible meterlo como te pongo en la guía y adiós a lis problemas de asíncronismo.
Prueba y me dices, cualquier cosa aquí estoy. Un saludo!.
gracias, muy explicativo, como alguien que no sabe mucho como yo , el paso a paso es muy útil, gracias.
ResponderEliminarAh y como pongo el menú al inicio con letras de colores y divertido?
Hola Yasna, tienes dos guías en el blig para meter menús, uno más simple y otro un poco más complejo.
ResponderEliminarhttp://diariosdelanube.blogspot.com/2013/04/aprende-crear-un-menu-sencillo-con.html?m=0
http://diariosdelanube.blogspot.com/2013/04/crea-un-menu-con-subopciones-en-blogger.html
Cualquier duda con la opción que te decidas, aquí me tienes para ayudar. Un saludo!
Muchas gracias!
ResponderEliminarGracias a tí Rubén. Un saludo!
EliminarBuenos días, Miguel. La botonera de "share" que aparece por defecto en "add this" tienen un efecto de despliegue que me resulta un poco mareante. Personalmente me parece mucho más interesante incluir unos botones como los de Diario de una Nube (barra vertical izquierda), para que los usuarios peden pulsar "+1" y similares, porque según me parece entender Blogger ya incluye botones de "share" al final de cada entrada. ¿Tendrías alguna entrada donde expliques cómo colocar una botonera como la tuya? ¡Gracias!
ResponderEliminarOk, me lo apunto para crear un guía al respecto. Es una botonera de ADDThis (la vertical) pero he tenido que aplicarle unas modificaciones para que sólo se muestre sin "molestar" si la resolución hace que pueda tapar el texto de los contenidos y para que sólo aparezca en las entradas (para no restar rendimiento a la página principal).
EliminarMe apunto para la vuelta una guía con esta botonera.
Un saludo!,
Hola Miguel Ángel;
ResponderEliminarMuchas gracias por los post. Acabo de descubrir tu blog y me gusta mucho. Estoy creando en blogger un blog en mis prácticas como Community y me viene bien consultar cosas, ya te sigo en Twitter. Soy @Gemuchi22. Un saludo!
Hola Miguel Ángel;
ResponderEliminarMuchas gracias por los post. Acabo de descubrir tu blog y me gusta mucho. Estoy creando en blogger un blog en mis prácticas como Community y me viene bien consultar cosas, ya te sigo en Twitter. Soy @Gemuchi22. Un saludo!
Hola GemaPB!!, encantadísimo de conocerte. Cualquier cosa que necesites ya sabes dónde estoy. Un saludo!
EliminarGracias Miguel, he conseguido poner botones de compartir y de seguir tanto en entradas como en páginas del blog, el problema es que más arriba siguen apareciendo los que ya están por defecto..no hay alguna manera de que se eliminen? Es que me aparecen abajo del todo los creados y los que ya están no queda muy bien la verdad.. También estoy con tema de formularios y más gadget que quiero introducir..me parece muy interesante lo que cuentas en el blog. Muchas gracias de nuevo!
ResponderEliminarHola Miguel , soy tu pesadilla Macumani..jajaj
ResponderEliminarpor finnnn, me he decido a poner los botones estos para compartir , me he cogido el que más me ha gustado, pero en el formato que he elegido no resalta el PINTEREST, que tan de moda está , y aunque yo estoy muy verde con los dichosos tableros , me gustaria que estuviese más visible.. ¿se puede modificar para que se vea enseguida?
Claro, jhazlo con este artículo (aunque tengo que arreglar los enlaces): http://www.diariosdelanube.com/2013/10/disfruta-de-pinterest-con-blogger.html
EliminarUn saludo amiga!
Hola, Miguel, he visto tu blog buscando share buttons, es porque he estado trasteando el AddThis pero al parecer no puedo cambiar el tamaño de los botones, molaría que fuesen un pelín más grandes, el de google+ es fácil porque incluye tamaño, pero en el resto no, por lo que he podido leer parece que no soportan la propiedad CSS height, la de width si, pero esa no me sirve, era por confirmar si estaba en lo cierto, supongo que con JS podrás hacer algo pero no se programación.
ResponderEliminarEstás en lo cierto. Los share-buttons oficiales de Facebook y Twitter son casi una "marca" que no puede alterarse porque a efectos de marketing deben tener un tamaño y un aspecto que no deben alterarse. No obstante, fabricarse unos botones con imágenes o iconos propios es fácil, mira esta guía: http://www.diariosdelanube.com/2013/05/monta-tus-propios-iconos-para-redes.html esto que se hace para los follow-buttons se puede hacer para unos share-buttons.
EliminarUn saludo!
Buenos días y gracias por tu blog.
ResponderEliminarQuería hacerte una consulta, en los enlaces "preparados" para los botones, el que va a Linkedin tiene un comienzo del tipo http://linkedin.com/in/ y mi perfil de linkedin no tiene ese "/in". No sé cómo se puede reconfigurar dicho enlace para quitar ese "/in" puesto que en el código no aparece la url completa.
¿Podrías ayudarme?
Hola!,
EliminarPuedes quitar el /in, ¿probaste con eso?. Si no, pásame la dirección completa y hago alguna prueba.
Un saludo!!
yo por mucho que lo intento, solo consigo los botones por fuera de las entradas, y los quiero dentro, al entrare en cada una de ellas, y no hay forma de hacerlo.
ResponderEliminarHola Alex,
Eliminarpara ponerlos por dentro de tus entradas utiliza estas guías:
http://www.diariosdelanube.com/2013/06/crea-y-coloca-tus-botones-para-redes_4.html
Luego tienes esta otra guía para colocarlos encima:
http://www.diariosdelanube.com/2013/06/crea-y-coloca-tus-botones-para-redes.html o este otro http://www.diariosdelanube.com/2013/06/inserta-botones-sociales-en-el-pie-de.html
Después tienes este que es bastante asequible:
http://www.diariosdelanube.com/2013/07/la-guia-para-anadir-botones-sociales-tu.html
Si te surgen dudas pregunta, aquí estoy.
Un saludo!!
Hola. Gracias por tu tutorial. A mi lo que me interesa es poner los botones sociales de share para que salgan al final de cada entrada. ES decir, una bez hayan pinchado en un articulo y se abra una nueva página, que al terminar de leer el articulo le puedan dar a compratir. No quiero poner los botones en la página principal, si no al final de cada entrada. ¿cómo hago eso? ¿dónde meto el código html entonces? (soy de Blogger)
ResponderEliminarMuchas gracias!!!
Mira, prueba esta guía (está más actualizada a este respecto): http://www.diariosdelanube.com/2013/07/la-guia-para-anadir-botones-sociales-tu.html
ResponderEliminary donde te atasques pregunta ;) Tiene un apartado especialmente sencillo para poderlos poner.
Lo dicho, pregunta una vez la pruebes y me dices lo que necesites.
Un saludo!