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