Facebook | Blog de diseño y desarrollo web | Blog – DGCmedia diseño y desarrollo de páginas web

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:

<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>

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.

<div id="lk_pie">
   <script type="text/javascript">
      setTimeout ('crearLinkedIn("http://www.e-sort.net","lk_pie")',2000);
   </script>
</div>

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:

<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+"&#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"); 		
   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>

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…

<? $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>

<? $dirFB=urlencode("http://www.e-sort.net"); ?>

setTimeout('crearFacebook("","fb_pie")',2000);

</script>

</div>

setTimeout('crearTwitter("http://www.e-sort.net","tw_pie",false)',2000);

</script>

</div>

setTimeout('crearGoogle("http://www.e-sort.net","gplus_pie")',2000);

</script>

</div>

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

Rating: 5.0/5 (2 votes cast)

Rating: +1 (from 1 vote)

A partir del 30 de Marzo, las páginas de Facebook (fan pages) tendrán un aspecto similar a la ya conocida biografía de los perfiles de usuario.

Las páginas, de este modo, son mucho más visuales y atractivas, aunque algo menos personalizables.

Podemos observar varios cambios:

Una gran imagen de portada, que es de agradecer si quieres mostrar algún producto, establecimiento, página web, etc…
Las aplicaciones y secciones de la página, se muestran en cuatro celdas bajo la portada. Si hay más secciones quedan ocultas, con un pequeño icono que lo indica. Por ello, habrá que meditar el orden de las aplicaciones para que las cuatro más importantes queden a la vista.
Los cambios de estado, subidas de fotos, etc… se ordenan a lo largo de una línea de tiempo vertical, que va desde la creación de la página hasta el día de hoy. De esta manera, todos los contenidos de la página están a la vista y bien estructurados.
Facebook nos permite dar importancia a los contenidos que nosotros consideremos que la merecen. Pulsando a la estrellita que aparece en cada contenido, podemos hacer que éste ocupe dos columnas (foto inferior) Además, podemos fijar en la parte superior los contenidos que nosotros queramos.
Las aplicaciones disponen ahora de 850 px de ancho.
Por último, podemos cambiar la fecha de cualquier contenido.

Esperamos, os haya servido de ayuda.

Rating: 0.0/5 (0 votes cast)

Rating: 0 (from 0 votes)

Blog de diseño y desarrollo de páginas y aplicaciones web.

Archivo de la categoría: Facebook

Nueva web! Marisquería la Chula

Valida tus botones de Facebook, Twitter, Google +1 y LinkedIn para la W3C

Nuevas Páginas de Facebook

Servicios

Contacto

Contacto

Últimos Post

DGCmedia en Twitter

Menú