I've recently noticed that in the layouts for the new Timeline profile, Facebook is using the "normal" version (read: larger) of the user's profile image extensively, both on the Timeline and in the Friends List. As we all know, this image is retrieved by querying the graph with:
https://graph.facebook.com/[userid]/picture?type=normal
Of course, this image isn't a guaranteed square crop. However, Facebook uses element-level CSS to position and crop it manually (see image below). The positioning is interesting in that it's seemingly generated before page render.
See:
Notice how there's an element-level CSS style applied. In this case it's a top offset:
style="top:-50%"
I'm assuming that this is pulling the arbitrary offset/positioning value from somewhere (the graph, a db, etc.), not using some client-side JS for facial detection, since the process of setting a new Facebook profile picture (usually) involves manually cropping your face. See it for yourself: change your profile picture and if the proportions aren't square-ish, there's an intermediate, manual cropping step.
Furthermore, this image is posted to /photo.php with the x, y, width, height, and other various parameters passed. I know some of that is used to generate the 50x50 square crop, but it also has to be stored somewhere else, correct?
My question is whether or not Facebook currently exposes a method to retrieve these offset values so we can accurately square-crop the larger profile pictures without having to rely on facial recognition or client-side processing to guarantee that the subject is centered.
If you don't want Facebook to crop your profile picture, make sure it meets the recommended dimensions. The maximum pixel size for PCs is 170 x 170 pixels. On smartphones, the recommended dimensions are 128 x 128 pixels. If you upload an image that's bigger than that, Facebook will automatically crop it.
When you upload or select an image for your ad, we'll automatically apply the recommended aspect ratio per placement. We'll crop your images to square, vertical and horizontal aspect ratios for different placement groups, such as feeds and stories.
Answering my own question here. Looking at http://developers.facebook.com/docs/reference/fql/profile/ I noticed it's possible to get the following with an FQL query to the profile table:
pic_crop
| string
The URL to the largest-sized square profile picture for the object being queried. The image is at least 100px in width. This URL may be blank.
My emphasis on that last bit.
The response looks like this:
<fql_query_response list="true">
<profile>
<pic_crop>
<uri>https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/xxxxxx_xxxxxxxx_xxxxxxxxxx_n.jpg</uri>
<width>180</width>
<height>173</height>
<left>0.08468</left>
<top>0.06897</top>
<right>0.91532</right>
<bottom>0.93103</bottom>
</pic_crop>
</profile>
</fql_query_response>
Voila: Image size and crop positioning. The only caveat, naturally, is that last bit in bold. The URL might be blank.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With