En un mundo tan dinamico como es el internet hoy en dia,vale la pena que nuestros lectores compartan con sus amigos en las redes sociales nuestras entradas y asi ganar algunas cuantas visitas mas.
Pues ese es el truco que traigo hoy el cual son botones de redes sociales para vuestro blog.

Lo bueno de los botones que arriba podemos ver es que podemos elegir muchos diseños, habilitar o desabilitar algunos de los mismos para que no sean muchos y muchas cosas más! De hecho, pronto estaremos haciendo un artículo donde tendremos más y mejores botones para ustedes, aprovéchenlos.

Si quieres agregar los botones que te voy a mostrar a continuación al final de tus entradas entonces vas a Diseño,Edición HTML,Expandir plantillas de artilugios y pones los códigos de los botones debajo de la siguiente etiqueta:

  <div class='post-footer-line post-footer-line-1'>

Si los quieres poner en la cabecera de tus entradas entonces los pones debajo de la siguiente etiqueta

  <div class='post-header-line-1'/>

Y si las quieres agregar solo en la pagina principal de tu blog entonces vamos a Diseño,Elementos de Pagina ,Añadir gadget,HTML Javascript y pegas el código allí.

Para añadir los siguientes botones pegas el siguiente código en cualquiera de los atributos que mencione con anterioridad.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcddcb73e3ba0d2"></script><!-- AddThis Button END -->

Si quieres añadir los siguientes botones pega lo siguiente en cualquiera de los atributos que mencione con anterioridad.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dcde18b394a19ad"></script>
<!-- AddThis Button END -->

Bueno espero que este tutorial sea de ayuda y de provecho para todos.


126 commentarios

Jorge Luis · junio 16, 2011 a las 1:33 am

Buen aporte Juvinao

Juvinao · junio 16, 2011 a las 1:43 am

@Jorge Luis Gracias por pasarte por el blog,Saludos.

Anonymous · junio 17, 2011 a las 6:19 am

Excelente muy bueno saludos Juvinao

Anonymous · junio 17, 2011 a las 6:27 am

Oye juvinao lo coloque pero como hago para que solo se muestre en las puras entradas

Juvinao · junio 17, 2011 a las 8:38 pm

@Anónimo Para que aparezcan los botones solo en las entradas debes poner lo siguiente al principio del codigo <b:if cond=’data:blog.pageType == «item»‘> y al final pones </b:if> y listo.

Juvinao · junio 17, 2011 a las 8:40 pm

@Anónimo Saludos a ti y gracias por comentar.

Michel Abraham Ramos Soto · junio 17, 2011 a las 10:42 pm

wow que gran enrada gracias

Anonymous · junio 17, 2011 a las 10:45 pm

@JuvinaoExelente horasi quedo como queria xd saludos graxias

Juvinao · junio 18, 2011 a las 12:12 am

@Michel Abraham Ramos Soto Gracias a ti por comentar me agrada que mi trabajo te guste,Saludos.

Juvinao · junio 18, 2011 a las 12:13 am

@Anónimo Que bien solo era agregar los codigos que te pase y listo.

Ricardo S · julio 15, 2011 a las 5:04 am

Muchas gracias, excelente post.

Juvinao · julio 15, 2011 a las 8:20 pm

@Anónimo Gracias a ti por comentar.

Ricardo S · julio 19, 2011 a las 8:21 pm

Este comentario ha sido eliminado por el autor.

Ricardo S · julio 19, 2011 a las 8:23 pm

@Juvinao

No he podido hacer trabajar esto. Por favor es posible, aclararlo un poco mas?. Pues no entiendo en que parte debo agragarlo. Si al comienzo del codigo completo del blog o solo a la seccion de los botones. Gracia s de antemano por la ayuda.

Juvinao · julio 20, 2011 a las 12:13 am

@Ricardo S Para poner los botones en alguna parte del blog sigue los items que puse en la entrada..

Ricardo S · julio 20, 2011 a las 7:41 am

@Juvinao
Gracias, eso lo entendi. Pero lo que no me ha querido funcionar es la parte donde explicas como hacer para que cuando se haga click en alguno de los botones (Ejemplo: Facebook), publique alli en FB solo esa entrada y no todo el titulo y el blog completo.

Ricardo S · julio 20, 2011 a las 7:42 am

@Juvinao
Me refiero a tu consejo en la respuest No. 5.

Juvinao · julio 20, 2011 a las 2:53 pm

@Ricardo S Para que publique en Facebook solo la entrada debes poner el codigo de los botones despues de <div class=’post-footer-line post-footer-line-1′> y si quieres que slo aparezcan en las entradas haz lo que explique en el comentario N°5.

Carlos Valle · julio 26, 2011 a las 10:19 pm

Estimado amigo, una cuestión. He instalado los botones pequeños, el segundo código. El caso es que cuando pincho sobre el botón facebook aparece el número 1 pero parte del número aparece detrás del icono del tweet. Muxas graciaaaaasss

Juvinao · julio 27, 2011 a las 3:55 pm

@Carlos Valle Este es un pequeño problema de estetica pero lo botones funcionan muy bien 😉

Carlos Valle · julio 27, 2011 a las 10:51 pm

ok

Juvinao · julio 28, 2011 a las 3:28 pm

@Carlos Valle Gracias por comentar 😉

Chiknaui.Mikistli Joel Molina Reyes · agosto 18, 2011 a las 1:16 am

chido esta genial, pero tambien quisiera que estuviera el mas uno, para recomendar mi web…
saludos

linita · noviembre 24, 2011 a las 3:56 pm

Gracias!! me sirvio mucho 😉

Juvinao · noviembre 24, 2011 a las 4:08 pm

linita de nada y gracias por comentar

Lo que diga el espantapájaros · diciembre 15, 2011 a las 11:12 pm

No encuentro lo de edición html en mi blog… tengo la configuración nueva que instaló hace unos meses blogger. Será por eso?

Lo que diga el espantapájaros · diciembre 15, 2011 a las 11:12 pm

Es que antes me dejaba volver al diseño antiguo, pero ahora no encuentro cómo.

Juvinao · diciembre 16, 2011 a las 12:23 am

Lo que diga el espantapájaros para ir a la edicion html del blog con el nuevo escritorio de Blogger ve a Diseño,Edicion HTML,alli encontraras el codigo html del blog.

Lo que diga el espantapájaros · diciembre 16, 2011 a las 11:05 am

Madre mía!! Si mi problema era que no veía lo de ‘edición html’… qué empanada! Lo acabo de ver. Gracias. A ver si consigo instalar los botones. Saludos.

Juvinao · diciembre 16, 2011 a las 12:58 pm

Lo que diga el espantapájaros esto puede pasar porque el escritorio de blogger es un poco mas complejo que el antiguo.

Lo que diga el espantapájaros · diciembre 17, 2011 a las 10:20 am

Ya está! Mil gracias! No sabes lo que me ha costado… entre que no sé de html y mi torpeza, llevaba más de una semana intentando poner los botones y solo me he aclarado con tu explicación. Gracias!

Ezequiel · febrero 10, 2012 a las 6:56 pm

Hola una consulta no encuentro esta etiqueta!
(post-footer-line post-footer-line-1 )
Me podrias ayudar? desde ya muchas gracias..

    Juvinao · febrero 10, 2012 a las 7:10 pm

    Ezequiel para encontrar esa etiqueta debes marcar la casilla «Expandir Plantillas de Artilugio» y luego si la buscas y si aun asi no la encuentras entonces busca esta otra etiqueta.

    <div class=’post-footer’>

Julian Lujan · febrero 12, 2012 a las 3:32 am

Men una cosa los botones me quedaron perfectos como deberia ser abajo de cada entrada, pero yo quiero que cuando vaya a compartir en twitter el twitte sea con el titulo de la entrada. por que cuando le doy compartir no sale el titulo de la entrada como configuro eso o que tengo que hacer ?? te agradeceria mucho !!

    Juvinao · febrero 12, 2012 a las 2:58 pm

    Julian Lujan para eso pon el propio boton para compartir de Twitter.

Julian Lujan · febrero 12, 2012 a las 8:02 pm

mm men he intentado pero como lo configuro puse el official de twitter y nada twittea es el titulo del bloger como hago para que publique con el titulo de la entrada gracias colaborame

    Juvinao · febrero 13, 2012 a las 8:11 pm

    Julian Lujan la verdad no se creo entonces qu es problema de Blogger 😕

Susie2792 · febrero 18, 2012 a las 3:20 pm

pongo todo en mi blog pero no hay forma que me aparezca :s

    Juvinao · febrero 18, 2012 a las 3:31 pm

    Susie2792 por favor dejame la URL de tu blog para poder mirar cual es el problema.

Anonymous · marzo 16, 2012 a las 1:15 am

Muchas gracias… Un abrazo afectuoso

    Juvinao · marzo 16, 2012 a las 2:39 pm

    Anónimo de nada y gracias por comentar. 😎

MARDANI · marzo 20, 2012 a las 10:44 am

Hola, a mi me pasa lo mismo. Si tengo varios post en la misma pagina me comparte toda la pagina, aunque solo quiera compartir un post. ¿Como puedo hacer para que solo me comparta ese post y no todo?
Hice lo del comentario 5 pero directamente no salía nada, me decia error.
Mi web es
http://www.losviajesdemardani.com/
por si quieres ver lo que pasa.

Sin embargo cuando pico en un post y solo esta la pagina de ese post si que me comparte solo ese post.

    Juvinao · marzo 20, 2012 a las 3:46 pm

    MARDANI te recomiendo que uses otros marcadores sociales que he publicado en el blog mientras encuentro una solucion definitiva para estos marcadores.

MicroGanancia · abril 2, 2012 a las 8:51 pm

Muy bueno tu blog de mucha ayuda para los que vamos iniciando en esto de Blogger.

Gracias por tu aporte a la comunidad.

http://microganancia.blogspot.mx/

    Juvinao · abril 2, 2012 a las 9:05 pm

    Gracias amigo que bueno que te haya sido de ayuda.

Luisa Ruiz · abril 13, 2012 a las 3:35 pm

Gracias me has ayudado mucho, chao

Alfredo Arce · abril 17, 2012 a las 12:29 am

Gracias mi hermanazo, es lo que buscaba desde hace rato y no lo había podido encontrar. Lo necesitaba muchísimo, solo por eso me suscribo y le doy un like a tu pagina en facebook

    Juvinao · abril 17, 2012 a las 7:52 pm

    Gracias Alfredo,me da mucho gusto que te sea de utilidad mi trabajo..

connexion · abril 22, 2012 a las 3:16 am

mil felicidades amigo tu blog es de gran ayuda

    Juvinao · abril 23, 2012 a las 7:39 pm

    Gracias amigo,me da mucho gusto tu comentario.

scarlett · abril 25, 2012 a las 4:20 am

Hace tiempo inserté el botón de redes sociales en mi blog, pero lo coloque en el lugar equivocado porque impide que se vea el enlace de CONTINÚA.., sí intento cambiar el orden manualmente desde el diseño de la entrada, no se guardan los cambios, ¿me puedes decir que puedo hacer?
http://nocturna-scarlett.blogspot.mx/

    Juvinao · abril 26, 2012 a las 1:23 am

    scarlett por lo que te pude entender los botones desde las entradas,ponlos en la Edicion HTML general del blog no de una entrada.:zombie:

Ade =^_^= · mayo 5, 2012 a las 11:05 pm

Hola Juviano :headbang:
Se pueden poner los botones del ejemplo segundo de tal forma que se vean centrados al final de la entrada?? Me gustaría que estuvieran en el centro en vez de pegados a la izquierda, es posible??

    Juvinao · mayo 6, 2012 a las 12:10 am

    Ade si se puede pero ahora no recuerdo el codigo,mañana lo buscare y te lo pasare ok 😎

Mariachis Bogota · mayo 16, 2012 a las 1:43 am

Como hago para ponerlos en una web normal con html.

    Juvinao · mayo 17, 2012 a las 1:51 am

    Exactamente con que servicio tienes tu web?

Saramkup · mayo 17, 2012 a las 8:28 am

Hola Juvilano,

No veo lo de edición HTML, para poder poner los botones de redes sociales para compartir entradas…. 🙁 me pasa lo mismo que lo que diga el espantapájaros. Entro en Diseño, pero lo unico que veo es el esquema de mi Blog…

Favicon- Barra de navegación
Cabecera
Entradas del blog…. pero nada de edición HTML… Si que tengo lo de añadir gadget HTML/Javascript

Muchas gracias por ayudarme!!!!!!!

http://saramkup.blogspot.com.es/

    Juvinao · mayo 17, 2012 a las 3:21 pm

    Si usas el nuevo escritorio de Blogger debes entrar a la pestaña «Plantilla» y marcar la casilla «Expandir plantilla de artilugios» y alli si buscas el codigo que necesitas.

Coro Estable E.C.A. · mayo 24, 2012 a las 3:56 am

Sencillo, práctico y completo.
Me ahorraste ir a la página de Addthis
Gracias!!!

    Juvinao · mayo 25, 2012 a las 1:21 am

    Si es muy facil de agregar,gracias por comentar 😀

Anonymous · junio 2, 2012 a las 10:14 pm

Excelente amigo, mucho más sencillo que en otros blogs

    Juvinao · junio 3, 2012 a las 12:18 am

    Gracias por comentar amigo,yo trato de hacer los tutoriales sencillos para que mis lectores los entiendan facilmente 😎

Smartphone · junio 22, 2012 a las 3:00 pm

Gracias por el aporte me fue muy util.

drazgon · julio 1, 2012 a las 8:25 pm

Hola y antes que nada muchas gracias pero a mi no me ha funcionado. Sí que es cierto que aparecen los botones pero no me comparten la entrada sino todo el blog.
De todas maneras enhorabuena por compartir tanto por tan poco.
Un saludo.

http://baloncestistas.blogspot.com

    Juvinao · julio 2, 2012 a las 7:40 pm

    Pues de verdad que es raro tu problema,pero yo tengo muchos marcadores mas en el blog que los puedes agregar a tu blog cuando quieras.

    Saludos 😀

Alfredo Arce · julio 3, 2012 a las 4:11 pm

hola , Juvinao veo que no tienes para suscribirte al blog por correo electronico. Seria bueno

    Juvinao · julio 3, 2012 a las 7:55 pm

    Alfredo si tengo esta opcion,es mas la tengo 2 veces mira al final de cada post aparece un rectangulo azul celeste y la otra es estilo wordpress donde dice Follow.

elrubio1111 · julio 5, 2012 a las 10:17 pm

muchisimas gracias amigo me e emocionado y to ,mira como me quedo de bien gracias a ti http://juegosdenintendodss.blogspot.com.es/2012/04/juegos-de-nds-nintendo-ds-nds-espanol.html

VISION AUDIOVISUAL™ · julio 19, 2012 a las 2:04 am

Hola como puedo colocar agregar mi twitter personal al apretar el boton [tweet]….Alguen sabe como hacerlo….Saludos

VISION AUDIOVISUAL™ · julio 19, 2012 a las 2:08 am

Hola como puedo colocar mi twitter personal en el boton [tweet]….Los botones estan de maravilla. Espero su respuesta de si se puede hacer lo descrito anteriormente.SALUDOS a todos.

    Juvinao · julio 20, 2012 a las 11:56 pm

    Para eso ve a Twitter y alli puedes agregar ese boton que pides.

    Saludos…

Milagros Juarez V. · julio 22, 2012 a las 3:20 am

Gracias me sirvió de mucho.

Carmen Lagonell · agosto 10, 2012 a las 10:18 pm

gracias, me ayudo mucho!!

    Juvinao · septiembre 14, 2012 a las 12:46 am

    Carmen gracias por comentar 😛

ArtesOdett · septiembre 12, 2012 a las 3:03 am

Gracias por este dato, me sirvió mucho ya que había intentado otro pero no habían servido y este si, lo unico es que cuando aparece una segunda linea queda empalmada una sobre otra, no habra forma de modificar eso??

    Juvinao · septiembre 14, 2012 a las 12:48 am

    Amigo si puedes enviar una imagen de como queda seria de gran utilidad porque la verdad no te entiendo.

Antonio Yeste · septiembre 24, 2012 a las 10:53 am

Un saludo, Juvinao. Te felicito por el trabajo.
Tengo un problema y a ver si me puedes ayudar: a mí los botones me aparecen en cada entrada (http://cafeesoterico.blogspto.com.es)y eso funciona bien, tanto los grandes como los pequeños. El problema es que todos me comparten el blog entero y lo que yo quiero es compartir solamente una entrada. He probado con lo que dices en el comentario 5 y entonces no me aparecen los botones. Si pongo antes de no me salen los botones pero si lo hago al revés, tampoco. He probado a colocar en varios sitios en el código -cambiando también la ubicación de y en ese caso, no aparecen los iconos. Lo que quiero es que aparezcan y compartan una sola entrada.
Gracias.

    Juvinao · septiembre 24, 2012 a las 4:29 pm

    Antonio prueba con otros botones para compartir que he publicado en el blog 😛

S. Yissele · septiembre 28, 2012 a las 2:49 pm

Hola Juviano parece que no tengo los mismos códigos que los blogs normales (je) no tengo el: <div class …Es posible esto? o quiza mi pllantilla es diferente? como puedo hacer? Agradezco tu respuesta anticipadamente! XO

    Juvinao · septiembre 29, 2012 a las 10:26 pm

    Yissele buscaste los codigos con los artilugios expandidos?..

    Si es asi y no los encontraste puedes agregar el codigo debajo de:

    <div style=’clear: both;’/> <!– clear for photos floats –>
    </div>

kiki gonzalez · octubre 2, 2012 a las 4:27 pm

Muchas gracias, funciono perfecto

Calixto primo · octubre 2, 2012 a las 10:11 pm

la verdad una muy buena ayuda, muchisimas gracias…

    Juvinao · octubre 3, 2012 a las 1:06 pm

    Calixto gracias por comentar,Saludos…

Se Fam · octubre 9, 2012 a las 5:14 am

¡Lástima!

Para plantillas de vistas dinámicas, esta herramienta no fusiona 🙁 Y tan bonita que es. ¿Será que hay alguna forma de hacerlo?

    Juvinao · octubre 10, 2012 a las 8:40 pm

    Se Fam no hay forma de hacerlo, las plantillas dinamicas limitan bastante las opciones de personalzar el blog 🙁

Jelens · noviembre 4, 2012 a las 2:23 pm

Muchas por el aporte, lo he puesto en mi blog y estoy muy contenta!!!

Andrés Francisco Cedillo Cilia · febrero 5, 2013 a las 9:32 pm

hola gracias por los trucos!

oye como le puedo hacer para poner las redes sociales pero de la siguiente forma: http://www.pcwebtips.com/2013/02/Proteger-Red-WiFi-Intrusos.html

de antemano gracias

Iván Darío Agudelo A. · mayo 20, 2013 a las 7:25 pm

Hayder, faltaron Linkedin y Youtube

Iván Darío Agudelo A. · mayo 20, 2013 a las 8:16 pm

Hayder que pasará que no me aparecen, y no es con el único que me pasa, será que en la plantilla hay algo que no los deja funcionar?

Gracias por tu respuesta.

Edwin Yanes · julio 2, 2013 a las 3:31 pm

Me ha sido muy útil esta entrada, gracias por compartir, abrazos desde Guatemala.

Radio-Melodia · julio 22, 2013 a las 8:29 pm

Hola Juvinao, inserto justamente debajo de donde dices pero no hay manera de que aparecan los botones,por que puedes ser?

Anonymous · agosto 10, 2013 a las 5:50 pm

gracias

Anonymous · agosto 12, 2013 a las 4:41 pm

iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 😎

Anonymous · agosto 12, 2013 a las 4:58 pm

cuanto se demora en aparecer este comentarioy como se puede obviar la aprovacion?

    Hayder Juvinao · agosto 13, 2013 a las 8:38 pm

    Primero se pasa por la moderación y luego de ser aprobado ahí si aparece.

Anonymous · agosto 13, 2013 a las 3:38 am

gvgvggggggfdcfds

Vanesa Villarreal · septiembre 10, 2013 a las 2:05 pm

hola! se que es un post viejo, pero acabo de toparme con el y agradecería que me pudieras contestar! Yo tengo un problema con todo lo que agrego al final de mi post, no solo con esto, sino cualquier otro tipo de boton de compartir, o incluso los predeterminadosque tiene blogger, simplemente no aparecen… sabrás que esta pasando?

    Hayder Juvinao · septiembre 11, 2013 a las 4:54 pm

    Vanesa por lo general Blogger tiene dos códigos iguales:

    <div class=’post-footer-line post-footer-line-1′>

    Debes agregar los códigos de botones y similares debajo del segundo para que aparezcan en tu web.

elvencejodemieresduerme · noviembre 14, 2013 a las 7:42 am

Puestos, me han quedado guapos y lo mejor, funcionan. Estos días ponía botones y no aparecían, luego se veían ellos solos y bueno, cosas de Blogger, Yo me espero que aparezca y todo arreglado. Un saludín y muchirrrrisimas gracias tengas en tu vida.

Carmen

Alberto Estrada · diciembre 22, 2013 a las 1:25 pm

No consigo que me aparezcan los botones en las entradas, por cierto en Diseño no es, es en Plantilla y luego Edición Html pero los pego justo debajo de la etiqueta y no me aparecen…
[-(

Anonymous · diciembre 30, 2013 a las 8:15 pm

Hola me funcionan todos los botones excepto el de fb, cual puede ser el problema?

Carlos Mario Torres · enero 8, 2014 a las 5:04 pm

Saludos @Hayder Juviano… muy interesante tu post… pero quería hacerte una pregunta… cómo haces para que cuando se comparta este post en facebook aparezcan correctamente todos los elementos (Imagen, titulo, descripción y url) he leído que eso se debe hacer utilizando las meta tag de open graph… ¿Me podrías ayudar? o al menos guiarme un poco al respecto.

Karen Arroyo · marzo 28, 2014 a las 3:44 am

Hola, entiendo el tutorial pero tengo un problema: En Blogger ya no aparece «Expandir plantillas de artilugios». Qué debo hacer? Gracias

liquido · julio 3, 2014 a las 12:12 pm

Gracias por la aportación, si quisiera añadir el boton de google plus despues de twitter como tienes tu en esta entrada como lo podria hacer?

Cultura Anime · octubre 24, 2014 a las 2:22 am

¿Como se hace para agregar google pluss a este diseños al segundo diseño?
Apreciaria mucho que me aclararas mi duda 😀

    Hayder Juvinao · octubre 28, 2014 a las 5:15 pm

    El nuevo código ya trae el botón de G+, mejor toma el código de la web oficial addthis.com

    Saludos

Anonymous · diciembre 5, 2014 a las 6:38 pm

Hola, gracias por el aporte. Tengo un problema, he buscado por todas partes en mi blog el código post-footer-line post-footer-line- ni post-header-line- . ¿Qué puedo hacer?

    Hayder Juvinao · diciembre 6, 2014 a las 5:06 pm

    Amigo por lo general todas las plantillas traen este código, pues hace parte de la estructura html de cualquier blog, mejor búscalo solo por line-1.

    Saludos

Maribel ortiz hoyos · marzo 5, 2015 a las 7:52 pm

Hola muy útil tu pàgina, yo descarguè una plantilla para blogger y cuando trato de poner los botones para compartir de share this y el sitio no los muestra o no los reconoce, también he intentado hacerlo con algunos trucos que hay por ahì en la red y no me funciona, me gustarìa que me ayudaras, tratè de hacer lo que dices en el post pero me sale un error. mi sitio es: http://www.larecetademary.com/
te agradecerìa mucho tu ayuda estoy desesperada buscando por todas partes una solucion para poder poner botones y que mis lectores compartan las entradas. Un abrazo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *