21 oct. 2013

Botones Sociales en HTML5 para compartir Blogger

Botones sociales para blogger, compatibles con HTML5, desde hace un tiempo realice cambios en mi blog para hacerlo lo mas compatible con HTML5 según los estándares del W3C, el cual me ha sido bastante estricto con la calidad de mi blog en cuanto a su estructura en HTML5 y siendo blogger su base en XML me dio curiosidad y decidí tener mi blog compatible, por ello me di en la tarea de encontrar botones de redes sociales para compartir que sean validos, ya que los que tenia no lo eran, esto sirve para continuar la entrada de hacer tu blog 100% valido en HTML5.



Antes tenia los típicos botones para compartir extraídos de las redes sociales oficiales, pero algunos no pasaban el examen del w3c de html5 o no funcionaban como esperaba, en fin, por ello tuve que hacer botones para compartir que sean validos para plantillas html5.

¿Hay problemas si mis botones no son compatibles con HTML5?

Aunque las plantillas de blogger por defecto traen muchos errores, los navegadores actualizados no tiene problema alguno en interpretar los códigos, no importa lo enredados que estén, pero para los usuarios un poco mas exigentes que quieren tener un blog lo mas correcto posible les sirve mucho esta publicación.

¿Como poner botones para compartir validos para HTML5?

Como ya había dicho las plataformas oficiales generan los botones pero no me servían, actualmente Twitter y Google+ tienen sus botones compatibles, pero el de Facebook presenta todavía errores al instalarlo en la plantilla de blogger, ademas de que no sirve para todas las entradas etc. Dejando la cháchara te presento 2 estilos de botones que te pasan el examen de HTML5, funcionan al dar click sobre ellos abriendo una ventana POP up! para compartir la entrada y luego se cierran, ademas de que no cargan scripts extra como los otros botones, para resumir: son livianos, atractivos, funcionales y compatibles, que mas puedes pedir, aquí están.

compartir en facebook compartir en facebook compartir en facebook compartir en facebook compartir en facebook

Este es el estilo de los primeros botones, son cuadrados y al pasar el mouse por ellos se redondean con un toque de sombra y este es el código, continua para ver como ponerlos.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='html5social'>
<a data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='botoni' 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 data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='botoni' 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 data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en Twitter'><img alt='compartir en twitter' class='botoni' height='32' src='http://2.bp.blogspot.com/-VUCTk734Vpk/UhwCQVxCH8I/AAAAAAAAAg0/h1JezQbBmX0/s1600/twitter.png' title='compartir en facebook' width='32'/></a>
<a data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en pinterest'><img alt='compartir en pinterest' class='botoni' height='32' src='http://4.bp.blogspot.com/-_gczBGoLm8o/UhwCQRH6oqI/AAAAAAAAAgw/xOQ6YScCKdk/s1600/pinterest.png' title='compartir en pinterest' width='32'/></a>
<a data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en likedin'><img alt='compartir en likedin' class='botoni' height='32' src='http://2.bp.blogspot.com/-idu2sZBC7Q0/UhwCQBAoBkI/AAAAAAAAAg8/98gLNSkBJ8o/s1600/linkedin.png' title='compartir en likedin' width='32'/></a></div>
</b:if>

Este es el codigo de los estilos

.html5social{ text-align:center;}.botoni: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;}.botoni{transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;cursor:pointer;margin-left:10px; /* espacio entre cada boton */}


Si quieres colocarlos en la parte de arriba de la entrada como mis botones para compartir
  1. Ve a plantilla.
  2. Editar HTML.
  3. Oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador.
  4. Y busca esta linea.

  5. <div class='post-header'>

  6. Si encuentras 2 fíjate en la segunda y pega el primer código debajo de esa linea y guarda
  7. ahora busca ]]></b:skin> y pega los estilos o segundo código encima de esa linea.



Si quieres que estos botones en HTML5 para compartir estén debajo de la entrada;
  1. Ve a plantilla
  2. Editar HTML
  3. Oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador
  4. Y busca esta linea

  5. <div class='post-footer'>

  6. Si encuentras 2 fíjate en la segunda y pega el primer código debajo de esa linea y guarda
  7. ahora busca ]]></b:skin> y pega los estilos o segundo código encima de esa linea.

Muy bien ya con eso tenemos nuestros botones validos, ahora el segundo estilo, un diseño de iconos redondo con efecto de giro al pasar el mouse por ellos, funcionan igual que los otros, son solo un estilo diferente para los que prefieren los circulares a los cuadrados

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


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='html5social'>
<a data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en Facebook'><img alt='compartir en facebook' class='botoni' 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 data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en Google+'><img alt='compartir en google+' class='botoni' height='40' src='https://1.bp.blogspot.com/-SKqPlZHzLgg/ViFsOt7HbeI/AAAAAAAABw0/bQQhWqgEpWM/s1600/google-long.png' title='compartir en google+' width='40'/></a>
<a data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en Twitter'><img alt='compartir en twitter' class='botoni' height='40' src='https://4.bp.blogspot.com/-gqVyoE8cVME/ViFsO009lbI/AAAAAAAABwo/1oK8cUnY36Q/s1600/twitter-long.png' title='compartir en twitter' width='40'/></a>
<a data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en pinterest'><img alt='compartir en pinterest' class='botoni' 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 data-href='javascript:void(0);' 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;' rel='nofollow' title='Compartir en likedin'><img alt='compartir en likedin' class='botoni' 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>
</b:if>

Y estos son sus estilos

.html5social{ text-align:center;}.botoni: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;}.botoni {transition:all .3s ease-out;-moz-transition: all .5s;-webkit-transition: all .5s;-o-transition: all .5s;margin-left:10px; /* espacio entre cada boton */cursor: pointer;}

Y bien para colocarlos en tu blog solo sigue los mismos pasos de los otros. ¡Disfruta tus botones validos!

7 comentarios:

  1. Hola, es muy interesante esta entrada. Quisiera me puedas ayudar a agregar los botones que tienes arriba con logotipo de Facebook, Twitter y Google (de forma cuadrada), debajo del titulo. Espero tu pronta respueta.

    ResponderEliminar
    Respuestas
    1. claro espera un poco preparo la entrada y te aviso, ok.

      Eliminar
    2. Okay muchas gracias. Estarè al tanto de la publicaciòn. Saludos.!

      Eliminar
  2. Hola Manzano! Puse todo tal cual se indica pero el botón de Facebook no aparece. Los otros dos sí y andan bien. Pero el de Facebook no. Me faltará agregar algo de Facebook en la plantilla?

    ResponderEliminar
  3. Ok. Gracias. Puse el like button desde la página de desarrolladores de facebook y funcionó. Saludos!

    ResponderEliminar
  4. Gracias muy buenos faltarian el de pinterest que siempre falla :|

    ResponderEliminar
  5. Hola, gracias por el aporte, pero ¿me podrías explicar si hay modo en que no tenga que copiar todo el código en el pie de cada entrada?

    ResponderEliminar

2016 © Inovablog