Mil Trucos Blogger

Botones de Redes Sociales para Compartir entradas

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

126 Comentarios

  1. Junio 16, 2011    

    Buen aporte Juvinao

  2. Junio 16, 2011    

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

  3. Anonymous Anonymous
    Junio 17, 2011    

    Excelente muy bueno saludos Juvinao

  4. Anonymous Anonymous
    Junio 17, 2011    

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

  5. Junio 17, 2011    

    @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.

  6. Junio 17, 2011    

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

  7. Junio 17, 2011    

    wow que gran enrada gracias

  8. Anonymous Anonymous
    Junio 17, 2011    

    @JuvinaoExelente horasi quedo como queria xd saludos graxias

  9. Junio 18, 2011    

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

  10. Junio 18, 2011    

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

  11. Julio 15, 2011    

    Muchas gracias, excelente post.

  12. Julio 15, 2011    

    @Anónimo Gracias a ti por comentar.

  13. Julio 19, 2011    

    Este comentario ha sido eliminado por el autor.

  14. Julio 19, 2011    

    @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.

  15. Julio 20, 2011    

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

  16. Julio 20, 2011    

    @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.

  17. Julio 20, 2011    

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

  18. Julio 20, 2011    

    @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.

  19. Julio 26, 2011    

    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

  20. Julio 27, 2011    

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

  21. Julio 27, 2011    

    ok

  22. Julio 28, 2011    

    @Carlos Valle Gracias por comentar 😉

  23. Agosto 18, 2011    

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

  24. Noviembre 24, 2011    

    Gracias!! me sirvio mucho 😉

  25. Noviembre 24, 2011    

    linita de nada y gracias por comentar

  26. Diciembre 15, 2011    

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

  27. Diciembre 15, 2011    

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

  28. Diciembre 16, 2011    

    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.

  29. Diciembre 16, 2011    

    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.

  30. Diciembre 16, 2011    

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

  31. Diciembre 17, 2011    

    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!

  32. Febrero 10, 2012    

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

    • Febrero 10, 2012    

      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’>

  33. Febrero 12, 2012    

    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 !!

    • Febrero 12, 2012    

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

  34. Febrero 12, 2012    

    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

    • Febrero 13, 2012    

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

  35. Febrero 18, 2012    

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

    • Febrero 18, 2012    

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

  36. Anonymous Anonymous
    Marzo 16, 2012    

    Muchas gracias… Un abrazo afectuoso

    • Marzo 16, 2012    

      Anónimo de nada y gracias por comentar. 😎

  37. Marzo 20, 2012    

    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.

    • Marzo 20, 2012    

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

  38. Abril 2, 2012    

    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/

    • Abril 2, 2012    

      Gracias amigo que bueno que te haya sido de ayuda.

  39. Abril 13, 2012    

    Gracias me has ayudado mucho, chao

    • Abril 13, 2012    

      Que bueno que te haya sido de ayuda

  40. Abril 17, 2012    

    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

    • Abril 17, 2012    

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

  41. Abril 22, 2012    

    mil felicidades amigo tu blog es de gran ayuda

    • Abril 23, 2012    

      Gracias amigo,me da mucho gusto tu comentario.

  42. Abril 25, 2012    

    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/

    • Abril 26, 2012    

      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:

  43. Mayo 5, 2012    

    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??

    • Mayo 6, 2012    

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

  44. Mayo 16, 2012    

    Como hago para ponerlos en una web normal con html.

    • Mayo 17, 2012    

      Exactamente con que servicio tienes tu web?

  45. Mayo 17, 2012    

    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/

    • Mayo 17, 2012    

      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.

  46. Mayo 24, 2012    

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

    • Mayo 25, 2012    

      Si es muy facil de agregar,gracias por comentar 😀

  47. Anonymous Anonymous
    Junio 2, 2012    

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

    • Junio 3, 2012    

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

  48. Junio 22, 2012    

    Gracias por el aporte me fue muy util.

  49. Julio 1, 2012    

    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

    • Julio 2, 2012    

      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 😀

  50. Julio 3, 2012    

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

    • Julio 3, 2012    

      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.

  51. Julio 5, 2012    

    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

    • Julio 6, 2012    

      Te quedo bastante bien 😀

  52. Julio 19, 2012    

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

  53. Julio 19, 2012    

    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.

    • Julio 20, 2012    

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

      Saludos…

  54. Julio 22, 2012    

    Gracias me sirvió de mucho.

    • Julio 25, 2012    

      Gracias a ti por comentar ..

  55. Agosto 10, 2012    

    gracias, me ayudo mucho!!

    • Septiembre 14, 2012    

      Carmen gracias por comentar 😛

  56. Septiembre 12, 2012    

    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??

    • Septiembre 14, 2012    

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

  57. Septiembre 24, 2012    

    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.

    • Septiembre 24, 2012    

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

  58. Septiembre 28, 2012    

    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

    • Septiembre 29, 2012    

      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>

  59. Octubre 2, 2012    

    Muchas gracias, funciono perfecto

    • Octubre 2, 2012    

      kiki gracias por tu comentario.

  60. Octubre 2, 2012    

    la verdad una muy buena ayuda, muchisimas gracias…

    • Octubre 3, 2012    

      Calixto gracias por comentar,Saludos…

  61. Octubre 9, 2012    

    ¡Lástima!

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

    • Octubre 10, 2012    

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

  62. Noviembre 4, 2012    

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

  63. Anonymous Anonymous
    Diciembre 8, 2012    
  64. Febrero 5, 2013    

    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

    • Febrero 6, 2013    

      Es cuestión de jugar un poco con el CCS y listo 🙂

  65. Mayo 20, 2013    

    Hayder, faltaron Linkedin y Youtube

  66. Mayo 20, 2013    

    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.

  67. Julio 2, 2013    

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

    • Julio 2, 2013    

      Edwin gracias por comentar, y saludos desde Colombia

  68. Julio 22, 2013    

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

    • Julio 26, 2013    

      Lo que pasa es que pueden haber 2 footer, utiliza el segundo.

  69. Anonymous Anonymous
    Agosto 10, 2013    

    gracias

  70. Anonymous Anonymous
    Agosto 12, 2013    

    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 😎

  71. Anonymous Anonymous
    Agosto 12, 2013    

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

    • Agosto 13, 2013    

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

  72. Anonymous Anonymous
    Agosto 13, 2013    

    gvgvggggggfdcfds

  73. Septiembre 10, 2013    

    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?

    • Septiembre 11, 2013    

      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.

  74. Noviembre 14, 2013    

    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

  75. Diciembre 22, 2013    

    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…
    [-(

    • Enero 4, 2014    

      Amigo es que este tutorial es del 2011 y estamos en el 2014.

  76. Anonymous Anonymous
    Diciembre 30, 2013    

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

  77. Enero 8, 2014    

    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.

  78. Marzo 28, 2014    

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

  79. Julio 3, 2014    

    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?

  80. Octubre 24, 2014    

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

    • Octubre 28, 2014    

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

      Saludos

  81. Anonymous Anonymous
    Diciembre 5, 2014    

    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?

    • Diciembre 6, 2014    

      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

  82. Marzo 5, 2015    

    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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo