Parece ser que a Twitter, Facebook, LinkedIn y Google les importa poco que sus botones de tweet/follow, me gusta, share y +1 validen en la W3C.
Para el correcto funcionamiento de una web, no suele tener importancia, pero como desarrolladores web, nos gusta que nuestro sitio cumpla los estándares establecidos.
Por ello, hemos desarrollado unas funciones que permiten validar nuestras páginas y agilizar el tiempo de carga. Esperamos un tiempo y creamos los elementos que contienen el botón en cuestión. El código del botón de LinkedIn sería el siguiente:
En el head, añadimos el siguiente fragmento de código JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> function crearLinkedIn(pagina,id) { var lk1 = document.createElement("script"); lk1.setAttribute("type","text/javascript"); lk1.setAttribute("src","http://platform.linkedin.com/in.js"); var lk2 = document.createElement("script"); lk2.setAttribute("data-counter","right"); lk2.setAttribute("data-url",pagina); lk2.setAttribute("type","IN/Share"); document.getElementById(id).appendChild(lk1); document.getElementById(id).appendChild(lk2); } </script> |
Luego, donde queremos crear el botón, llamamos a la función declarada anteriormente.
|
1 2 3 4 5 |
<div id="lk_pie"> <script type="text/javascript"> setTimeout ('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000); </script> </div> |
A continuación, incluimos el código de los botones de las redes sociales principales que validan perfectamente en la W3C.
En el head:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<script type="text/javascript"> function crearLinkedIn(pagina,id){ var lk1 = document.createElement("script"); lk1.setAttribute("type","text/javascript"); lk1.setAttribute("src","http://platform.linkedin.com/in.js"); var lk2 = document.createElement("script"); lk2.setAttribute("data-counter","right"); lk2.setAttribute("data-url",pagina); lk2.setAttribute("type","IN/Share"); document.getElementById(id).appendChild(lk1); document.getElementById(id).appendChild(lk2); } function crearFacebook(pagina,id){ var fb = document.createElement("iframe"); fb.setAttribute("style","border:none; overflow:hidden; width:180px; height:21px;"); fb.setAttribute("allowTransparency","true"); fb.setAttribute("scrolling","no"); fb.setAttribute("frameborder","0"); fb.setAttribute("src","http://www.facebook.com/plugins/like.php?href="+pagina+"&send=false&layout=button_count&width=180&show_faces=false&action=like&colorscheme=light&font=arial&height=21"); document.getElementById(id).appendChild(fb); } function crearTwitter(pagina,id,compartir){ var tw = document.createElement("a"); if(compartir){ tw.setAttribute("href","https://twitter.com/share"); tw.setAttribute("class","twitter-share-button"); tw.setAttribute("data-url",pagina); tw.setAttribute("data-hashtags","diseñoweb"); tw.setAttribute("data-via","DGCmedia_es"); }else{ tw.setAttribute("class","twitter-follow-button"); tw.setAttribute("href","http://twitter.com/DGCmedia_es"); } tw.setAttribute("data-lang","es_ES"); tw.text="Twittear"; var tw2 = document.createElement("script"); tw2.setAttribute("type","text/javascript"); tw2.setAttribute("src","http://platform.twitter.com/widgets.js"); document.getElementById(id).appendChild(tw); document.getElementById(id).appendChild(tw2); } function crearGoogle(pagina,id){ var google = document.createElement("div"); google.setAttribute("class","g-plusone"); google.setAttribute("data-size","medium"); google.setAttribute("data-href",pagina); var google2 = document.createElement("script"); google2.setAttribute("type","text/javascript"); google2.setAttribute("src","https://apis.google.com/js/plusone.js"); google2.text="{lang: 'es'}"; document.getElementById(id).appendChild(google2); document.getElementById(id).appendChild(google); } </script> |
Y en donde queramos llamar a los botones…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<? $dirFB=urlencode("http://www.e-sort.net"); ?> <div id="fb_pie" class="fb"> <script type="text/javascript"> setTimeout('crearFacebook("","fb_pie")',2000); </script> </div> <div id="tw_pie" class="tw"> <script type="text/javascript"> setTimeout('crearTwitter("http://www.e-sort.net","tw_pie",false)',2000); </script> </div> <div id="gplus_pie" class="gplus"> <script type="text/javascript"> setTimeout('crearGoogle("http://www.e-sort.net","gplus_pie")',2000); </script> </div> <div id="lk_pie" class="lk"> <script type="text/javascript"> setTimeout('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000); </script> </div> |
Para Twitter, la función tiene un parámetro booleano compartir, en el que se indica si se trata del botón de compartir o el de seguir.
Esperamos que haya sido de ayuda y gracias a Moisés por conseguir algo que a muchos, nos ha quitado horas intentando validar nuestras páginas en la W3C
Valida tus botones de Facebook, Twitter, Google +1 y LinkedIn para la W3C,
12 comentarios
tepublico es
tepublico es en dijo:excelente post me gusto mucho
Alejandro
Alejandro en dijo:Estoy intentando validar en w3c pero el widget de twitter me da dos errores :
there is no attribute “data-widget-id”
alquien me puede ayudar con el widget del time line ??
gracias
DGCmedia
DGCmedia en dijo:No va a validar nunca ese atributo. Por eso, con las funciones de arriba, lo que haces es crearlas tras la carga de la web. Así validará 😉
De todos modos, próximamente las actualizaremos con funciones mucho mejores.
juanolo2001
juanolo2001 en dijo:¿El problema es que no funciona en IE7 verdad? algun otro metodo para IE7?
Hector
Hector en dijo:No salió la función. Es esta (le saqué los cierres):
? $dirFB=urlencode(“http://www.e-sort.net”); ?
DGCmedia
DGCmedia en dijo:Es php. Codifica los símbolos de la url (//:) para poderse insertar en una url. Es como lo exige Facebook.
Hector
Hector en dijo:Hola David!
Que función cumple en el body la siguiente función?:
Gracias,
Hector
Juan
Juan en dijo:Hola:
Muy bueno el artículo.
El caso es que FB no funciona una vez instalado.
¿Alguna idea? ¿Han cambiado quizá algo los de FB?
Gracias
David
David en dijo:Si funciona! Puedes verlo instalado en http://www.ctpi-ingenieria.com
Juan
Juan en dijo:Ni siquiera tienes el boton de Facebook….
Hay que fijarse en los detalles.
Ya lo he conseguido validar
DGCmedia
DGCmedia en dijo:De veras Juan, está en http://www.ctpi-ingenieria.com puesto, también en http://www.e-sort.net
Y funciona perfectamente. Es el botón me gusta de Facebook a lo que me refiero.
Validar botones de redes sociales en la W3C
Validar botones de redes sociales en la W3C en dijo:[…] "CRITEO-300×250", 300, 250); 1 meneos Validar botones de redes sociales en la W3C http://www.dgcmedia.es/blog/valida-tus-botones-de-facebook-twitt… por ddgcarbayo hace […]