Obteniendo el icono cuadrado de usuario en Facebook

A la hora de crear nuestras aplicaciones, cuando queramos meter el icono del usuario en facebook, normalmente nos devuelve una imagen que no es proporcional a la vista. Esto es porque cuando añades la imagen de usuario en la ficha, hace una reducción proporcional de la misma. Es decir, si tu imagen no es cuadrada, la miniatura de la misma tampoco lo será.

Asi cuando intentamos devolver una serie de imágenes de usuarios, cada uno saldrá con un alto diferente (el ancho afortunadamente es igual siempre). ¿Como podemos solucionar esto?... es bien sencillo.

Normalmente para obtener la imagen del usuario usamos un trozo de código como el siguiente:

<fb:profile-pic uid="'.$fkIdUser.'" linked="true" />

Y vemos que nos sale una cosa así:



Bien, esto nos devuelve el tipico IMG src con la imagen guardada en servidor. Pero como ya hemos comentado antes, no todas tienen la misma altura. Si queremos que todas sean iguales, la API de Facebook ya se ha ocupado de nosotros y no hace falta que andemos liados con estilos para poder obtener dicha imagen, solo tendremos que añadir un parámetro más (al igual que el linked="true" del ejemplo anterior).

El parámetro a añadir se llama size y tendrá que tener el valor square. Quedaría nuestro código por tanto de esta manera:

<fb:profile-pic uid="'.$fkIdUser.'" linked="true" size="square" />




Luego si queremos añadirle un marco para que quede más chulo, podemos aprovechar las css por defecto que vienen en todas las aplicaciones, enmarcando la imagen en una capa DIV con el siguiente estilo:

<DIV class="wallimage photo_borders"><fb:profile-pic uid="'.$fkIdUser_4.'" linked="true" size="square" /></DIV>





Otros tamaños para tus imágenes

Al igual que hemos visto que size="square" te realiza las fotos en tamaño cuadrado de 50x50, tenemos otros valores para el parámetro size que nos darían otro tipo de tamaño para las imágenes. Son estos:

• thumb (t): nos devuelve una imagen de 50 pixels de ancho y su altura amoldada (wide size)
• small (s): nos devuelve una imagen de 100 pixels de ancho y su altura amoldada (wide size)
• normal (n): nos devuelve una imagen de 200 pixels de ancho y su altura amoldada (wide size)
• square (q): nos devuelve una imagen de 50x50 pixels

Salu2!