{"id":118,"date":"2012-03-29T22:24:56","date_gmt":"2012-03-29T21:24:56","guid":{"rendered":"http:\/\/www.dgcmedia.es\/blog\/?p=118"},"modified":"2012-03-29T22:27:59","modified_gmt":"2012-03-29T21:27:59","slug":"valida-tus-botones-de-facebook-twitter-google-1-y-linkedin-para-la-w3c","status":"publish","type":"post","link":"https:\/\/www.dgcmedia.es\/blog\/valida-tus-botones-de-facebook-twitter-google-1-y-linkedin-para-la-w3c\/","title":{"rendered":"Valida tus botones de Facebook, Twitter, Google +1 y LinkedIn para la W3C"},"content":{"rendered":"<p>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 <strong>W3C<\/strong>.<\/p>\n<p>Para el correcto funcionamiento de una web, no suele tener importancia, pero como desarrolladores web, nos gusta que nuestro sitio cumpla los est\u00e1ndares establecidos.<\/p>\n<p>Por ello, hemos desarrollado unas funciones que permiten validar nuestras p\u00e1ginas y agilizar el tiempo de carga. Esperamos un tiempo y creamos los elementos que contienen el bot\u00f3n en cuesti\u00f3n. El c\u00f3digo del bot\u00f3n de LinkedIn ser\u00eda el siguiente:<\/p>\n<p>En el <strong>head<\/strong>, a\u00f1adimos el siguiente fragmento de c\u00f3digo JavaScript:<\/p>\n<p>[crayon lang=&#8221;js&#8221;]<br \/>\n<script type=\"text\/javascript\">\nfunction crearLinkedIn(pagina,id) {      \n   var lk1 = document.createElement(\"script\");      \n   lk1.setAttribute(\"type\",\"text\/javascript\");\n   lk1.setAttribute(\"src\",\"http:\/\/platform.linkedin.com\/in.js\");      \n   var lk2 = document.createElement(\"script\");      \n   lk2.setAttribute(\"data-counter\",\"right\");      \n   lk2.setAttribute(\"data-url\",pagina);      \n   lk2.setAttribute(\"type\",\"IN\/Share\");      \n   document.getElementById(id).appendChild(lk1);      \n   document.getElementById(id).appendChild(lk2); \n}\n<\/script><br \/>\n[\/crayon]<\/p>\n<p>Luego, donde queremos crear el bot\u00f3n, llamamos a la funci\u00f3n declarada anteriormente.<br \/>\n[crayon lang=&#8221;js&#8221;]<\/p>\n<div id=\"lk_pie\">\n   <script type=\"text\/javascript\">\n      setTimeout ('crearLinkedIn(\"http:\/\/www.e-sort.net\",\"lk_pie\")',2000);\n   <\/script>\n<\/div>\n<p>[\/crayon]<\/p>\n<p>A continuaci\u00f3n, incluimos el c\u00f3digo de los botones de las redes sociales principales que <strong>validan perfectamente en la W3C<\/strong>.<\/p>\n<p>En el head:<\/p>\n<p>[crayon lang=&#8221;js&#8221;]<br \/>\n<script type=\"text\/javascript\">\nfunction crearLinkedIn(pagina,id){\n   var lk1 = document.createElement(\"script\");\n   lk1.setAttribute(\"type\",\"text\/javascript\"); \t\t      \n   lk1.setAttribute(\"src\",\"http:\/\/platform.linkedin.com\/in.js\");\n   var lk2 = document.createElement(\"script\");\n   lk2.setAttribute(\"data-counter\",\"right\");\n   lk2.setAttribute(\"data-url\",pagina);\n   lk2.setAttribute(\"type\",\"IN\/Share\");\t\n   document.getElementById(id).appendChild(lk1); \t\t\n   document.getElementById(id).appendChild(lk2); \t\n}<\/p>\n<p>function crearFacebook(pagina,id){\n   var fb = document.createElement(\"iframe\");\n   fb.setAttribute(\"style\",\"border:none; overflow:hidden; width:180px; height:21px;\"); \t\t   \n   fb.setAttribute(\"allowTransparency\",\"true\");\n   fb.setAttribute(\"scrolling\",\"no\"); \n   fb.setAttribute(\"frameborder\",\"0\"); \t\t   \n   fb.setAttribute(\"src\",\"http:\/\/www.facebook.com\/plugins\/like.php?href=\"+pagina+\"&#038;send=false&#038;layout=button_count&#038;width=180&#038;show_faces=false&#038;action=like&#038;colorscheme=light&#038;font=arial&#038;height=21\"); \t\t\n   document.getElementById(id).appendChild(fb); \n}<\/p>\n<p>function crearTwitter(pagina,id,compartir){\n   var tw = document.createElement(\"a\");\n   if(compartir){\n      tw.setAttribute(\"href\",\"https:\/\/twitter.com\/share\"); \t\t\t\n      tw.setAttribute(\"class\",\"twitter-share-button\");\n      tw.setAttribute(\"data-url\",pagina);\n      tw.setAttribute(\"data-hashtags\",\"dise\u00f1oweb\");\n      tw.setAttribute(\"data-via\",\"DGCmedia_es\");\n   }else{\n      tw.setAttribute(\"class\",\"twitter-follow-button\");\t \t\t\t   \n      tw.setAttribute(\"href\",\"http:\/\/twitter.com\/DGCmedia_es\");\n   }\n   tw.setAttribute(\"data-lang\",\"es_ES\");\n   tw.text=\"Twittear\";\n   var tw2 = document.createElement(\"script\");\n   tw2.setAttribute(\"type\",\"text\/javascript\"); \t\t   \n   tw2.setAttribute(\"src\",\"http:\/\/platform.twitter.com\/widgets.js\");\t \t\t\n   document.getElementById(id).appendChild(tw); \t\t\n   document.getElementById(id).appendChild(tw2);\n} \t<\/p>\n<p>function crearGoogle(pagina,id){\n   var google = document.createElement(\"div\"); \n   google.setAttribute(\"class\",\"g-plusone\");\n   google.setAttribute(\"data-size\",\"medium\");\n   google.setAttribute(\"data-href\",pagina);\n   var google2 = document.createElement(\"script\"); \t\t\n   google2.setAttribute(\"type\",\"text\/javascript\"); \t\t   \n   google2.setAttribute(\"src\",\"https:\/\/apis.google.com\/js\/plusone.js\");\n   google2.text=\"{lang: 'es'}\";\n   document.getElementById(id).appendChild(google2); \t\t\n   document.getElementById(id).appendChild(google); \t\n}\n<\/script><br \/>\n[\/crayon]<\/p>\n<p>Y en donde queramos llamar a los botones&#8230;<\/p>\n<p>[crayon lang=&#8221;html&#8221;]<br \/>\n<? $dirFB=urlencode(\"http:\/\/www.e-sort.net\"); ?><\/p>\n<div id=\"fb_pie\" class=\"fb\">\n   <script type=\"text\/javascript\">\n      setTimeout('crearFacebook(\"\",\"fb_pie\")',2000);\n   <\/script>\n<\/div>\n<div id=\"tw_pie\" class=\"tw\">\n   <script type=\"text\/javascript\">\n\tsetTimeout('crearTwitter(\"http:\/\/www.e-sort.net\",\"tw_pie\",false)',2000);\n   <\/script>\n<\/div>\n<div id=\"gplus_pie\" class=\"gplus\">\n   <script type=\"text\/javascript\">\n      setTimeout('crearGoogle(\"http:\/\/www.e-sort.net\",\"gplus_pie\")',2000);\n   <\/script>\n<\/div>\n<div id=\"lk_pie\" class=\"lk\">\n   <script type=\"text\/javascript\">\n      setTimeout('crearLinkedIn(\"http:\/\/www.e-sort.net\",\"lk_pie\")',2000);\n   <\/script>\n<\/div>\n<p>[\/crayon]<\/p>\n<p>Para Twitter, la funci\u00f3n tiene un par\u00e1metro booleano compartir, en el que se indica si se trata del bot\u00f3n de compartir o el de seguir.<\/p>\n<p>Esperamos que haya sido de ayuda y gracias a Mois\u00e9s por conseguir algo que a muchos, nos ha quitado horas intentando validar nuestras p\u00e1ginas en la <a href=\"http:\/\/validator.w3.org\" target=\"_blank\" title=\"Valida tu p\u00e1gina web\">W3C<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/www.dgcmedia.es\/blog\/valida-tus-botones-de-facebook-twitter-google-1-y-linkedin-para-la-w3c\/\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[57,48,54,22,17,21,55,23,40,53],"tags":[50,62,61,60,59,58],"_links":{"self":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts\/118"}],"collection":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":3,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":121,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/posts\/118\/revisions\/121"}],"wp:attachment":[{"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dgcmedia.es\/blog\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}