open - cuadros cuadrados de Facebook

open graph facebook

Question

Usando Graph API puedo obtener imágenes pequeñas, grandes y medianas. O puedo obtener una pequeña imagen cuadrada.

¿Pero cómo puedo obtener una gran imagen cuadrada? ¿Hay algún servicio que pueda usar?

Answer 1

Puede especificar el tamaño de imagen que desea con el argumento tipo, que debe ser uno de cuadrado (50x50), pequeño (50 píxeles de ancho, altura variable) y grande (alrededor de 200 píxeles de ancho, altura variable).

De la Graph API Reference . Esos son los únicos tres tamaños disponibles. Puede usar una versión más grande de la imagen de 50x50, pero obviamente se verá difuminada.

Answer 2

Como ya se dijo en otras respuestas, en Facebook, las imágenes cuadradas tienen una resolución de solo 50x50 .

Sin embargo, un simple hack de CSS hace el truco:

Consulta la imagen grande, ajusta el img -tag con un div y aplica este CSS al div:

img#facebook_img {
 width: YOUR_WIDTH;
}
div#wrapper {
 height: YOUR_HEIGHT;  
 overflow: hidden;  
}

Si YOUR_WIDTH y YOUR_HEIGHT son iguales, obtienes tu imagen cuadrada y la proporción se conserva.

Answer 3

Hoy en día Graph realmente podría devolverle una imagen cuadrada de cualquier tamaño. Almacenan en caché los tamaños más comunes (como 100x100, 128x128) y devuelven el tamaño más cercano con la siguiente solicitud (pase el mouse para ver)

Answer 4

Ninguna de las respuestas funcionó a la perfección, habiendo encontrado imágenes de perfil de varias dimensiones (algunas con una altura mayor a la esperada, otras con una altura menor) que terminaron estiradas o no centradas.

Al final utilicé un elemento div lugar de un img y configuré la imagen a través de un atributo de style background-image lugar de hacerlo a través de su atributo src .

Archivo CSS:

.profile-pic {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 120px;
    width: 120px;
    border: solid 1px #ddd;
}

HTML:

 <div style="background-image:url(https://graph.facebook.com/123/picture?width=120&height=120);" class="profile-pic"></div>

Reemplace 120px en el cuadro anterior (aparece dos veces en el CSS y dos veces en el fragmento HTML) con las dimensiones deseadas.

Answer 5

No hay forma de hacerlo oficialmente, aquí hay un truco tonto. El siguiente código asegurará que la imagen no sea más ancha / más alta de 120 píxeles. Si es así, la imagen se desbordará fuera del elemento:

<div style="width: 120px; height: 120px; overflow: hidden; display: inline-block;">
    <img src="{$image}" align="absmiddle" width=120 style="min-width: 120px; min-height: 120px;" />
</div>

Answer 6

Por extraño que parezca, Facebook no usa una imagen cuadrada más grande a pesar de que muestran una imagen de perfil cuadrada más grande en las nuevas imágenes de la línea de tiempo. Si miras más de cerca, toman una imagen rectangular más grande y la reposicionan dentro de un elemento HTML como Michael propuso anteriormente.

Me gustaría esperar que en algún momento los datos de posicionamiento que usan para esto se publiquen a través de la API, pero no estoy al tanto de que esos datos estén disponibles todavía. He tenido momentos en los que esto podría haber sido útil también y hasta ahora solo he centrado la imagen o he usado la parte superior. Sin embargo, no es ideal ya que FB ya permite y realiza un seguimiento del posicionamiento personalizado del "cuadrado" más importante de la imagen a través de su creador de "iconos".

Answer 7

Simple, acabo de enterarme de esto.

Ejemplo,

https://graph.facebook.com/friends_Id/picture?width=200&height=200

tada ~