square Facebook pictures - facebook

Question

Using Graph API I can get small, large, medium pictures. Or I can get small square picture.
But how can I get large square picture? Is there any service I can use?

Answer 1

Simple, I just found this out.
Example,
https://graph.facebook.com/friends_Id/picture?width=200&height=200
tada~

Answer 2

Oddly enough, Facebook itself doesn't use a bigger square image even though they show a bigger squared profile picture on the new timeline pictures. If you take a closer look they take a larger rectangular image and reposition it inside an HTML element as Michael proposed above.
I would expect that at some point the positioning data they use for this will be released via the API but I am not aware of that data being available yet. I've had times where this would have been helpful also and have thus far either just centered the image or used the top portion. Not ideal though since FB already allows for and tracks custom positioning of the most important "square" of the image via their "icon" creator.

Answer 3

There is no way to do this officially, here's a silly hack. The following code will make sure the image is no wider/taller than 120 pixels. If it is, then the image will overflow outside the element:
<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 4

You can specify the picture size you want with the type argument, which should be one of square (50x50), small (50 pixels wide, variable height), and large (about 200 pixels wide, variable height).
From the Graph API Reference. Those are the only three sizes available. You can use a bigger version of the 50x50 image but it'll obviously look dithered.

Answer 5

Nowadays Graph actually could return you square image of any size. They cache most common sizes (like 100x100, 128x128) and return the closest size by the following request (hover to see)

Answer 6

As the other answers already stated, in facebook the square pictures are only in 50x50 resolution.
A simple CSS hack does the trick though:
Query the large image, wrap the img-tag with a div and apply this CSS to the div:
img#facebook_img {
width: YOUR_WIDTH;
}
div#wrapper {
height: YOUR_HEIGHT;
overflow: hidden;
}
If YOUR_WIDTH and YOUR_HEIGHT are the same you get your square image and the ratio is preserved.

Answer 7

None of the answers worked perfectly for me, having come across profile pictures of various dimensions (some with a greater height than expected, some with a smaller height) which ended up either stretched or non-centered.
In the end I used a div element instead of an img and set the image through a background-image style attribute rather than through its src attribute.
CSS file:
.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>
Replace 120px in the above (occurs twice in the CSS and twice in the HTML fragment) with your desired dimensions.