Revista Comunicación

Botones sociales para compartir en HTML5 para blogger

Publicado el 15 mayo 2014 por Loquendo Manzano
Botones sociales compatibles con HTML5 para blogger, aunque también sirven para wordpress y cualquier otro, desde hace un tiempo e estado cambiando mi blog para hacerlo compatible con HTML5 según los estándares del W3C, este me ha sido bastante estricto con la calidad de mi blog, 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,
botones sociales validos html5
ya e explicado 2 formas de colocar botones sociales
botones para compartir entradas en redes socialesbotones para compartir en redes sociales
pero ellos no pasaban el examen del w3c de html5, por ello tuve que encontrar 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 blogger lo mas correcto posible les sirve mucho esta publicación.

¿Como poner botones para compartir validos para HTML5?

Bien después de mucho buscar y enredarme un poco la cabeza descubrí que los mismos desarrolladores de estos botones los pueden generar validos para html5, pero para ir mas rápido te doy los míos.
si los quieres colocar en tu sidebar o la columna del blog:
  1. diseño
  2. un nuevo gadget
  3. elige HTML/Javascript
  4. pega el código que esta abajo 
  5. y guarda 

<div id="botones"> <div class="g-plusone" data-size="medium"><script type="text/javascript">   window.___gcfg = {lang: 'es-419'};(function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script><a href="https://twitter.com/share" class="twitter-share-button" data-lang="es">Twittear</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <div id="fb-root"> <script>(function(e,a,f){var c,b=e.getElementsByTagName(a)[0];if(e.getElementById(f)){return}c=e.createElement(a);c.id=f;c.async=true;c.src="//connect.facebook.net/es_ES/all.js#xfbml=1";b.parentNode.insertBefore(c,b)}(document,"script","facebook-jssdk"));</script> </div>
si usas wordpress: copia el código -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pegas los códigos que elegiste.
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

<div class='post-header'>
si encuentras 2 fíjate en la segunda y pega el código debajo de esa linea y guarda
si quieres que estos botones de redes sociales 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

<div class='post-footer'>
si encuentras 2 fíjate en la segunda y pega el código debajo de esa linea y guarda
Disfruta tus botones validos!

Volver a la Portada de Logo Paperblog