22 jul. 2013

4 estilos de Botones Sociales para compartir entradas Blogger

Los botones para compartir entradas del blog en redes sociales, son la llave maestra para cualquier bloggero (avanzado o novato) nada mejor que un usuario al que le gusto una de tus publicaciones pueda compartirla con sus amigos o conocidos, aquí es donde entras los botones sociales ya que ayudan a difundir el contenido de nuestras publicaciones y las mismas atrayendo mas publico y ahorrándonos trabajo de difucion del blog, siendo esto muy importante ahora que las redes sociales tienen un peso mayor sobre los buscadores. En esta entrada te enseñare como colocarlos en tu blog, mas que todo en las entradas individuales, por experiencia propia usaremos los mas populares, como lo son el de Me gusta, Twittear y +1, pero igual tendremos de los otros, también este truco sirve para wordpress y otros sitios web, no confundir, si lo que estas buscando es colocar iconos tipo sígueme en tu blog sigue esta entrada para colocar iconos para seguidores por otro lado si quieres los botones pero para una URL especifica visita esta entrada de botones para difundir la pagina principal, basta de parloteo y manos a la obra.

Botones Sociales para compartir entradas Blogger


Si estas en un dispositivo movil, te recomiendo acceder desde una computadora ya que requiere editar la plantilla de blogger, pero puedes aplicar la ultima forma desde moviles.


Primero te presento este diseño de botones que creo ya habrás visto, este queda de impacto debajo del titulo del post o al final del post, míralo a continuación en funcionamiento:

Botones para compartir entradas en redes sociales


Imagina que están debajo del titulo de tu entrada, se verían increíble cierto?, te mostrare como colocarlos debajo del titulo y al final del post, para agregar estos botones a blogger:
  1. Crear copia de seguridad ( crea un respaldo en caso de fallos)
  2. Una ves creado el respaldo dirígete a Blogger, luego a Plantilla.
  3. Pulsa en Editar HTML y da click en cualquier parte dentro del html
  4. Pulsa las teclas Ctrl F (en Mac ⌘F) para activar el buscador
  5. En el buscador que sale busca estos códigos (dependiendo en donde quieres colocar los botones), para cada caso no copiar juntos, buscar cada uno por separado.

    • Para colocarlos debajo del titulo de la entrada

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

    • Para colocarlos al final de la entrada

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

    Si usas una plantilla de blogger para cada caso te saldrán 2 de estos códigos, cual sea el que hayas escogido nos vamos a la segunda porque la primera es la de moviles.

  6. Ahora copia este código:

  7. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='botones'>
    <table border='0'>
    <tr>
    <td align='left'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:107px; height:20px;'/></td><td align='center'><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></td><td align='right'><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Twittear</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
    </tr>
    </table></div><style type='text/css'>table{border-collapse:separate;margin:0 0 1.5em;width:100%}#botones {border-bottom:1px solid #ebebeb;border-top:1px solid #ebebeb;height:40px;line-height:40px;margin:10px 0}</style></b:if>


  8. Por ultimo pega el código que copiaste entre la primera y segunda linea, la cual hayas escogido, para que queden tus botones sociales en las estradas de tu blog.
  9. Guarda los cambios y listo, disfruta tus botones!.



Bien, para la segunda forma tengo los mismos botones pero con el diseño diferente, el de tipo caja, puedes ver un ejemplo de ellos como en la imagen que muestro a continuación:


Te daré el código pero a diferencia de los botones de arriba estos no son tan atractivos cuando están alineados, es decir como se muestra en la imagen, pero si que imponen respeto si los colocamos al lado del texto de la entrada como se ve a continuación


Así se ven fantásticos! debajo del titulo y a la par con el texto inicial de la entrada.
Para colocarlos en el blog, seguimos los mismos pasos anteriores, solo que buscaremos cualquiera de estas lineas:

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

Nos saldrán 2 de estos códigos, nos vamos a la segunda porque la primera es la de moviles.
y pegamos este codigo justo entre las 2 lineas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='botones'>
<table border="0"><tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:79px; height:60px'/></td>
</tr><tr>
<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
</tr><tr>
<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></td></tr> </table></div>
<style type='text/css'>#botones{float:left;position:relative;width:90px;background:#fff;height:220px;margin-top:0px;z-index:1000;}</style></b:if>

Solo guarda los cambios y listo, disfruta tus espectaculares botones para compartir.



Tercera forma, unos increíbles y bien diseñados botones para compartir entradas en redes sociales, estilo Inovablog, ligeros de carga, diseño elegante, con efecto de sombra y redondeo al pasar el mause por ellos, estos son también muy buenos para los que no quieren los demás botones, son una muy buena opción, ademas de que no cargan scritps extra como los demás, al dar click sobre ellos abren una pequeña ventana POP up! para compartir el enlace y después de haber echo esto se cierran, mira un ejemplo de ellos en acción:

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

Están Super!, estos se ven mejor al final de las entradas o debajo del titulo, al igual que los primeros, para agregarlos a blogger sigue los pasos de los primeros botones, solo que en ves de copiar el código de los primeros botones copiaras este en  su lugar:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='botones-para-compartir'>
<a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='32' src='http://1.bp.blogspot.com/-ru_KTYmbf2w/UhwCP96ijsI/AAAAAAAAAgg/iAY-VBzvg_4/s320/facebook.png' title='compartir en facebook' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='32' src='http://1.bp.blogspot.com/-KSoMecJPQRs/UhwFcTpgz0I/AAAAAAAAAhI/-VLTVUCxb6o/s1600/Google%252B%2Balt.png' title='compartir en google+' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='32' src='http://2.bp.blogspot.com/-VUCTk734Vpk/UhwCQVxCH8I/AAAAAAAAAg0/h1JezQbBmX0/s1600/twitter.png' title='compartir en twitter' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='32' src='http://4.bp.blogspot.com/-_gczBGoLm8o/UhwCQRH6oqI/AAAAAAAAAgw/xOQ6YScCKdk/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a>
<a expr:onclick='&quot;window.open(\&quot;https://www.linkedin.com/shareArticle?mini=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='32' src='http://2.bp.blogspot.com/-idu2sZBC7Q0/UhwCQBAoBkI/AAAAAAAAAg8/98gLNSkBJ8o/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
<style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {border-radius:25px 25px 25px 25px;transition:all .3s ease-out;box-shadow: 0px 0px 5px #000; /* tamaño y color de la sombra */-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>

Y pega el código entre las lineas que hayas escogido. Puedes personalizarlos un poco, en la parte final del código podrás cambiar que tanto están separados, el efecto  de circulo etc.

O que tal estos impecables botones para compartir de estilo Inovablog de forma circular con efecto de giro al pasar el mause por ellos, son una buena opción para los que les gusta los iconos de forma circular y no cuadrada, al igual que los anteriores estos funcionan abriendo una ventana Pop UP! para compartir el enlace.

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

¡Son de lo mejor! para ponerlos en tu blog sigue los mismos pasos que los primeros botones solo que en lugar de copiar el código de esos botones copia este:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='botones-para-compartir'> <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='facebooki' height='40' src='https://1.bp.blogspot.com/-rwK-4X3iLjc/ViFsOclr9NI/AAAAAAAABwc/ocBw9cxRK2M/s1600/facebook-long.png' title='compartir en facebook' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='googlei' height='40' src='https://1.bp.blogspot.com/-SKqPlZHzLgg/ViFsOt7HbeI/AAAAAAAABw0/bQQhWqgEpWM/s1600/google-long.png' title='compartir en google+' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en twitter' class='twitteri' height='40' src='https://4.bp.blogspot.com/-gqVyoE8cVME/ViFsO009lbI/AAAAAAAABwo/1oK8cUnY36Q/s1600/twitter-long.png' title='compartir en twitter' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en pinterest' class='pinteresti' height='40' src='https://2.bp.blogspot.com/-YHRlPeWHV-I/ViFsO1cYtsI/AAAAAAAABwk/UNnCLCBic9o/s1600/pinterest-long.png' title='compartir en pinterest' width='40'/></a> <a expr:onclick='&quot;window.open(\&quot;https://www.linkedin.com/shareArticle?mini=&quot; + data:post.url + &quot;\&quot;,\&quot;gplusshare\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript:void(0);' rel='nofollow' title='Compartir en Google+'><img alt='compartir en likedin' class='likedini' height='40' src='https://4.bp.blogspot.com/-WBa3E0lZI-8/ViFsOraP3DI/AAAAAAAABwg/eWD_6bYykMQ/s1600/linkedin-long.png' title='compartir en likedin' width='40'/></a></div> <style>#botones-para-compartir{ text-align:center;}.likedini:hover, .facebooki:hover, .twitteri:hover, .googlei:hover,.pinteresti:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);transform: rotate(360deg);transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;}.likedini, .facebooki, .twitteri, .googlei, .pinteresti {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */}</style></b:if>

Y pega el código entre las lineas que hayas escogido. Puedes personalizarlos un poco, en la parte final del código podrás cambiar que tanto están separados, el efecto  de  rotacion, etc.

BONUS!
Particularidad de estas 2 formas de botones, si no te gustaron los iconos que tienen simplemente puedes descargar tus propios iconos y cambiarlos, asi de simple, Ejemplo si quiero poner otro icono en cualquiera de los dos casos busca lo que esta en color azul en este codigo y remplazo todo lo que esta en color rojo por la URL del nuevo icono.

src='https://1.bp.blogspot.com/-rwK-4X3iLjc/ViFsOclr9NI/AAAAAAAABwc/ocBw9cxRK2M/s1600/facebook-long.png'



Para la forma final, usaremos un servicio muy completo, llamado ShareThis, es una pagina que nos genera botones para compartir en casi todas las redes sociales posibles incluyendo otros servicios para compartir, imagínense, a quien no le gustaría tener este botón para compartir en todas esas paginas, tienen 3  posibles diseños 2 de ellos parecidos a las primeras 2 formas que vimos en esta entrada, la mas usada es la que te muestro en esta imagen a continuación


compartir entradas Blogger


Como pueden ver el botón verde, al presionarlo, despliega un sin fin de redes sociales y paginas para compartir el contenido de nuestro sitio, muy bueno y completo

Para colocar estos botones dirígete a esta pagina que Genera botones sociales llamada sharethis.
  1. Ve a la opción que dice Free Sharing Buttons.
  2. Nos llevara a una pagina donde eligiéremos la plataforma en la cual esta basada nuestra pagina, en este caso podemos elegir la de Blogger o también la de Website, en general, esta ultima nos da mas opciones de diseño, ya depende de ti cual quieres.
  3. Sigue con el segundo paso, en este eliges el diseño, escoja el que quieras.
  4. Ahora sigue con el tercer paso, aquí podemos escoger el tamaño de los botones y elegir cuales serán los botones iniciales, es decir puedes arrastrar un botón mas a los que se muestran Ejemplo: podemos agregar el de Google+. En la pagina también explican este paso.
  5. Finalmente cuando todo este listo selecciona: Get the Code o obtener código.
  6. Te saldrá un cuadro que te aconseja registrarte o entrar con una cuenta social, para obtener el código, puedes usar tu cuenta de facebook o google por ejemplo para no tener que crear una cuenta.
  7. nos muestra una pagina donde nos da el código para copiarlo y pegarlo en nuestra pagina.
  8. Si elegiste la plataforma Blogger copia el código que te dan y pegalo en un gadget HTML/Javascript, guarda y listo.
  9. Si escogiste la opción de sitio web en general, te aparecerán dos códigos, copia ambos y ponlos en un gadget HTML/Javascript. y listo


30 comentarios:

  1. Hola, apenas conozco tu blog, muy bueno..!
    Una pregunta, quiero ponerlos tal y como los tienes en esta entrada: debajo del titulo y antes del texto y solo estas tres redes sociales. ¿podrás ayudarme con el código o la forma para hacerlo?

    ResponderEliminar
    Respuestas
    1. claro mandame tu correo o algo para darte el codigo, es que es muy largo para escribirlo aqui

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  2. mmm..no se que pasa con blogger pero no funciona, creo que actualizaron hace poco y es un caos.

    ResponderEliminar
    Respuestas
    1. mucho ojo hay como dos de las lineas de post footer intenta asta que funciones en la correcta

      Eliminar
  3. holaquisiera tenerlos al inico del post no al final

    ResponderEliminar
    Respuestas
    1. si quieres colocarlos en la parte de arriba de la entrada como mis botones para compartir

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

      <div class='post-header'>

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

      Eliminar
  4. He probado el código y me ha funcionado bien. Pero cuando lo elimino para que quede de la manera por defecto no vuelve a aparecer, ¿A qué se debe?

    ResponderEliminar
  5. Hola,
    ¿podrías mostrarlo en youtube?
    Gracias!!!

    ResponderEliminar
  6. Una pregunta camarada en que parte debo quegar el url de mi blog me puedes explicar no se que hacer con vez que coloco el codigo en un gadget

    ResponderEliminar
    Respuestas
    1. no es necesario colocar la url del blog o de la entrada, el codigo la detecta automáticamente, pero no debes colocarlo en un gadget, debes seguir los pasos que se explica, si los colocas en un gadget HTML/javascrit no funcionaras

      Eliminar
  7. Hola, por más que he hecho, no aparecen al colocarlos en las etiquetas.

    Sólo me aparecen una vez, no dos como mencionas. Tengo la plantilla Urania, sabrás a qué se debe que no me funcionen? Gracias de antemano :)

    ResponderEliminar
    Respuestas
    1. Cual de los estilos estas usando? necesito mas info porfa

      Eliminar
  8. Buenas!!! Nos ha funcionado perfectamente. Pero quisiéramos añadir, sobre todo en twitter, el (Vía @parajesxvisitar). Para que así cada vez que compartan nos mencionen. ¿Sería posible? Muchas gracias!!!

    ResponderEliminar
  9. Amigo tengo un problema, hago todo como dices, encontré los códigos para poner los botones al final de la entrada pero cuando intento pegar el código para los botones número 4 que fueron los que a mí me gustaron, y lo guardo, al actualizar el blog no me sale nada. y lo puse en los 2 códigos (porque uso plantilla blogger) así que lo puse tanto en la de móviles como en la de web. ¿Qué crees que esté haciendo mal? Por favor te agradecería mucho que me respondieras, es que no quiero buscar otros botones en otra web porque a mí me gustaron son esos, y tampoco quiero ponerlo por JavaScript. :(

    ResponderEliminar
    Respuestas
    1. uummm, es algo extraño, puede ser que haya un código condicional que no deje visualizar los códigos o el mismo css, por favor, envíame a través del formulario de contacto el blog y vemos como resolverlo

      Eliminar
  10. A mi me pasa lo mismo que Genesis :( lo pongo en gadget y funciona pero directo en los codigos no me funciono por mas que intente por todos lados O.o

    ResponderEliminar
    Respuestas
    1. Envíame un mensaje por el google+ para tratar el problema con mas profundidad

      Eliminar
    2. Hola Loquendo: necesito ayuda, por favor.Me pasa que veo los botones en la vista previa pero no en vista pública.¿ A qué podría ser debido? Son los botones de la tercera forma.

      Saludos.

      Eliminar
  11. igual amigo Loquendo manzanoi, quisiera usar los botones en mi blog pero no se me da, he seguido paso a paso todas tus instrucciones

    ResponderEliminar
    Respuestas
    1. Mil gracias amigo Loquendo, resolvi leyendo los comentarios....tremendo aporte

      Eliminar
  12. Hola Loquendo, tienes muy buenas informaciones en tu blog. Me gustaría ponerlos justo al lado de las entradas tal y como los tienes ahora mismo. He tratado y no he podido. Agradeceré tu ayuda.
    Mi correo es elgrannino@gmail.com.

    ResponderEliminar
  13. Hola, lo puse en mi blog pero el botón de facebook no se ve, los demás si. Gracias y buen post!

    ResponderEliminar
  14. lo habia intentado muchas veces con otros codigos y este ha sido el unico que me ha funcionado para compartir cada entrada de forma individual.otros q me habia recomendado compartian todo el blog en vez de cada post.Muchas gracias

    ResponderEliminar
  15. No me funciona por ninguna de las dos lineas, intento en una y nada y luego por otra y tampoco aparece

    ResponderEliminar
  16. Hola muy bueno el post. Una duda, si quiero que al darle al botón y salir la ventana para compartir por ejemplo en Twitter aparezca el más texto que el enlace como el titulo del post y vía @rasvilra cómo lo tengo que hacer?

    ResponderEliminar
  17. lo hago como dices y nada de nada, no sale nada. Lo he puesto en varios sitios y no consigo que aparezca en mi blog.

    ResponderEliminar

2016 © Inovablog