17 jul. 2013

4 estilos de Botones para compartir en Redes Sociales Blogger

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


36 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. hola isabel e estado leyendo aserca del tema y a muchos mas usuarios de otras paginas y blogs les esta pasando eso, al parecer puede ser una actualización de facebook, pero a otros no les esta pasando, en si, abra que esperar si cambia.

      Eliminar
    2. 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. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
    Respuestas
    1. El codigo para implementar los iconos sociales debajo del blog,he probado a buscar los que redactastes en este artículo perono no lo he encontrado y lo he buscado de varias maneras, ¿como podría buscarlo? , y que no sea manualmente porque lo he intentado y me hes imposible(ya que creo que no existe o tiene otra estructura)Saludos

      Eliminar
    2. puedes agregar los códigos en un gadget de HTML en diseño.
      o si quieres en la plantilla ve a tu plantilla y oprime CTRL F para activar el buscador y buscar la parte.

      Eliminar
    3. Ya lo probé,pongo tus códigos y los de otros webmaster y no consigo en contrarlos en la plantilla,ya probe buscando con F3 y tampoco.

      Eliminar
    4. si pegaste el codigo en un gadget de HTML/javascrit y buscas el código en la plantilla claro que no aparece

      Porque busca en la plantilla, Editar HTML si esos códigos se colocan en un GADGET en la sección de diseño

      Eliminar
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. Hola, una pregunta, como podría colocar los botones de youtube e instagram tambien en el último estilo?

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

    ResponderEliminar
  13. 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
  14. 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
  15. 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

2016 © Inovablog