17 jul. 2013

4 Estilos de Botones para Compartir el Blog en Redes Sociales

Como poner botones para compartir en redes sociales  nuestro blogger, ahora que las redes sociales cada vez están haciendo mas peso sobre los motores de búsqueda, es esencial hallar una forma de compartir, nuestro blog de blogger o una web, ademas de eso, regar nuestra url por las redes sociales ayuda a aumentar el trafico de visitas en nuestro sitio, una buena forma de lograrlo es insertar iconos o botones de estas redes sociales en el blog, para que los usuarios que interactúan en el, puedan compartir nuestro enlace, y así se difunda. No confundir, lo que mostrare en esta entrada es para compartir una URL especifica o la pagina principal, si lo que estas buscando es colocar botones para compartir las entradas o post visita esta entrada de botones para compartir las entradas de blogger, por otro lado si lo que quieres son iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores, no siendo mas, basta de parloteo y manos a la obra.


Botones para compartir en Redes Sociales

Tengo listos estos botones (como los de la imagen), para agregarlos a tu blog, solo debes seleccionarlos y pegarlos en un HTML/Javascript. Si usas dispositivo movil o no quieres copiar el código, usa el botón rápido que dice Añadir a Blogger, pero recuerda que debes cambiar lo que dice URL-BLOG por la URL de tu blog o pagina. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

Si usas wordpress: copia el código -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pega el código.




O también este diseño estilo botón pequeño con contador al lado del botón, como en el caso de arriba puedes agregarlo mas rápido o desde un dispositivo movil con el boton Añadir a Blogger, recuerda cambiar lo que esta en color rojo por la URL de tu Blog. Nota el botón de facebook no se vera hasta que le coloques la URL de tu blog.

 compartir en Redes Sociales



También les presento estos estilizados iconos sociales para compartir el blog en redes sociales como los de arriba, solo que en estos incluye pinterest y likedin, a diferencia de los anteriores, estos iconos no generan carga adicional, (es decir no cargan los scripts de los botones) son livianos y están optimizados al 100%, al dar click para compartir el blog se abre una pequeña ventana POP Up! y después de compartir en enlace se cierra, ademas de que se tornan circulares y con una leve sombra al pasar el cursor sobre ellos, muy buena opción para los que prefieren este tipo de estilo, puedes ver como funcionan a continuación, Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin





Como no incluir por lo menos el mismo estilo de botones pero para los usuarios que prefieren algo un poco mas pequeño literalmente, por ello también tengo estos bonitos iconos sociales para compartir, tienen las mismas funciones que los anteriores, simplemente son un poco mas pequeños, aunque no son los mismos, son iconos diferentes a los otros ya que están hechos de este tamaño para una mejor optimizacion, puedes verlos en acción a continuación. Recuerda cambiar donde dice URL-BLOG por la dirección de tu blog.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin






Pero eso no es todo para los bloggers que no les gusta el diseño cuadrado les tengo este impecable diseño de Inovablog, tipo iconos redondos con rotación al pasar el mause por ellos, una muy buena forma para cautivar a tus usuarios y motivarlos a compartir el blog, tiene la misma función que los anteriores solo que el estilo es diferente, están de impacto y recuerda cambiar lo que dice URL_BLOG por la dirección de la pagina que vas a ponerle.

compartir en facebook compartir en google+ compartir en twitter compartir en pinterest compartir en likedin



Botones, compartir el blog, compartir en redes sociales, compartir sitio en facebook, compartir blog en twitter, boton para compartir, publicar en redes sociales, compartir tu blog en redes sociales, agregar botones de redes sociales, enlace para compartir en facebook, compartir mi blog en redes

41 comentarios:

  1. Donde coloco el codigo en que parte del HTML estare agradecido

    ResponderEliminar
  2. Respuestas
    1. puedes colocarlo en un HTML/Javascript
      si quieres de otra forma dímelo y revisare tu blog para ver donde lo calocas

      Eliminar
    2. Yo quiero colocarlo debajo de cada entrada ;)

      Eliminar
    3. si quieres que estos botones de redes sociales para compartir estén debajo de la entrada

      ve a plantilla
      editar HTML
      oprime las teclas CTRL F (Mac ⌘F) para activar el buscador
      y busca esta linea

      <div class='post-footer'>

      si encuentras 2 fíjate en la segunda y pega el código debajo de esa linea y guarda

      Eliminar
  3. Muchas gracias por tu ayuda! ha quedado genial ;-D

    ResponderEliminar
  4. He puesto el botón contador de facebook y se ve bien.pero creo que tiene un error,pues despues de pinchar en ME GUSTA sale la palabra confirmar,pinchas en esa palabra y se te abre un cuadro de diálogo donde sale para publicarlo en tu facebook,pero esto no ocurre.......me ayudas a corregirlo por favor...........o me puedes explicar algo mas

    ResponderEliminar
    Respuestas
    1. Buenas, pide "confirmar" seguramente porque la página no tiene demasiados likes. Es una nueva técnica que implementó Facebook. Sólo las páginas que poseen una cantidad considerable de "Likes", no les pide confirmar cuando le das click en "Me gusta".. Espero que haya servido de algo mi pequeña explicación y se entienda!!.. jeje.. Saludos :)

      Eliminar
  5. Pero no me queda alineado en el centro de la pantalla, ¿que le debo añadir?

    ResponderEliminar
    Respuestas
    1. debajo de #botones-para-compartir { pega esto
      margin: 0 auto;

      Eliminar
  6. Oye amigo tengo una duda como los coloco en mi blog para que queden flotando en la barra izquierda, y al bajar las paginas este también se mueva?

    saludos espero me puedas ayudar

    ResponderEliminar
  7. Hay algunos tipos de botón en los que no aparece la posibilidad de incluir la URL de mi blog, particularmente en los cuadrados (ninguno de los dos tipos). Los circulares que giran son los que más me gustan y en estos si aparece "URL BLOG", pero sale error en linkedin. (También puede ser que no los vea). Gracias por adelantado

    ResponderEliminar
    Respuestas
    1. por supuesto, hay algunos botones que son genericos, es decir, funcionan para la URL que este por defecto abierta en ese momento.

      Eliminar
    2. Perfecto, gracias. Otra pregunta si no te importa: tengo varias imágenes en la portada del blog y cuando doy a compartir cada botón coge la imagen que le da la gana y me gustaría que cogiesen la imagen que aparece en la entrada (mis entradas son de una sola imagen). Si me puedes ayudar te lo agradecería. Gracias

      Eliminar
    3. He visto que tienes publicada una entrada explicando lo que te pregunto, por lo que retiro lo dicho; no la uso porque no me gusta tocar mucho la plantilla salvo que sea estrictamente necesario. Pero sí te pregunto como puedo hacer para que los botones de compartir cojan una imagen concreta. Gracias de nuevo

      Eliminar
  8. hola amigo esta muy bien tu blog de los botones y me funciona pero ahora tuno tienes el de youtube y el de instagram es que generalmento los uso y ahi no estan en el codigo como edito los que hay paara que se de el de estos gracias por tu ayuda de antemano

    ResponderEliminar
  9. Hola, tengo una duda, ¿Cómo haces para que cuando se va a compartir, la información que aparezca sea la de ese artículo y no otra cosa en el blog?

    ResponderEliminar
  10. Hola, una pregunta, como podría colocar los botones de youtube e instagram tambien en el último estilo?

    ResponderEliminar
  11. Hola docotre chevre los iconso pero como podemos ponerle el de youtube envez de otros que pueda considerar innecesarios

    ResponderEliminar
  12. muchas gracias, me sirvieron muchisimo, pero el de pinterest circular no me da el link para compartir, solo da el cuadro blanco y se cierra

    ResponderEliminar
  13. Este post ha sido uno de los más útiles que he enoontrado, muchas gracias por tu tiempo La verdad no se nada de diseño web con html, me he hido con códigos pero este esta BUENISIMO, me sirvió mucho. MUCHAS GRACIAS

    ResponderEliminar
  14. Excelente artículo, estoy tratando de implementar los botones de compartir en mi web, pero, no toma la imagen que deseo. Puedes ayudarme por favor www.ec.viajandox.com - mail: jchito_g3@yahoo.com

    ResponderEliminar
  15. y si quiero poner un boton de instagram como le hago?

    ResponderEliminar
    Respuestas
    1. Por el momento Instagram no ha sacado un sistema para compartir fotos, hay que esperar.

      Eliminar
  16. Muy buen post.
    Hay alguna manera de poner una foto por defecto al compartir el contenido con facebook??
    La foto me sale en blanco.

    ResponderEliminar
  17. genial muy buen trabajo, GRACIAS, yo voy a usar el 3ero, si no es molestia seria me gustaría mostrar también la cantidad de compartidos, sera posible en ese estilo que escogí...

    ResponderEliminar
  18. Los botones están geniales y quedan fantásticos, pero... al pincharlos ¡no sucede nada! Puse la url de mi blog en los lugares que marcaste y todo ¿me faltará algo que no sé? Soy nueva en esto y no sé nada de html, pero me le animo a todo si me dices qué hacer. ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Para que se entienda: probé los primeros y funcionan muy bien, pero necesito los de más abajo, los que tienen Pinterest e Instagram. Son esos los que no me funcionan.

      Eliminar
    2. Pero, ninguno de esto botones tiene instagram

      Eliminar
    3. Ups... claro, era LinkedIn ¡qué burra! jajaja. Bueno, seguiré buscando el botón de Instagram entonces. ¡Gracias por responder!

      Eliminar

2017 © Inovablog