problem synchronizing fb profile pic

[illtellyoulater]

Hello Shade, I'm having problems trying to import the facebook profile picture.

The pic is not fetched because usercp > "avatar url" field is populated with a url like "http://graph.facebook.com/nnnnnnnnnnnnnnn/picture?width=100&height=100" which is not a direct link to a picture, but it's a redirecting url which redirects to the actual picture.

Any clues on how to fix this?

[Shade-]

Actually, the profile picture is something different from the avatar. The profile picture is the equivalent of your Facebook's cover, whereas the avatar is... the avatar. In the current version they are not separated into two different options, and they are synced together within the same option range. However, the profile picture (aka cover) will be imported if and only if Profile Picture plugin is installed (this will be checked automatically).

As for the avatar being a link instead of a direct image link, it's meant to be like this because it wastes the less resources possible in the process, which does not involve querying one more time Facebook for the avatar. Instead, the avatar url is built upon a fixed pattern, adding just the user's ID which is queried when authenticating, and this minimizes both resources and time spent for the entire integration process. The link, however, displays correctly the image when requesting whatever page it is embedded in, so you don't have to worry about images not being shown.

[illtellyoulater]

"The link, however, displays correctly the image when requesting whatever page it is embedded in, so you don't have to worry about images not being shown."

That's exactly what it is not doing :) How would a "src" attribute of an be able to go through a redirect?

All I see in the HTML of a user profile in the avatar picture section is: <img src="http://graph.facebook.com/669197052/picture?width=100&amp;height=100" alt="" height="100" width="100">

and this is not able to show a picture, because well, it isn't a picture.

Please see this: http://jsfiddle.net/26ozxk5w/2/

So, reading at https://developers.facebook.com/docs/graph-api/reference/v2.1/user/picture#readfields an approach could be querying the resource with ?redirect=0 parameter, to obtain the json description of the resource which also contains the direct path to the image, and then use that to show the image on the pages.

https://graph.facebook.com/669197052/picture?redirect=0&width=100&height=100

will output:

{
   "data": {
      "height": 100,
      "is_silhouette": false,
      "url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfa1/v/t1.0-1/c20.0.100.100/p100x100/1002220_10152284122297053_228270310_n.jpg?oh=7c62bf6988d5a475593e65feae85a406&oe=54AD22C6&__gda__=1421170904_a98ba88ea9c9fc5894cd4f62c54f92f7",
      "width": 100
   }
}

So in PHP it should be something like:

$json = file_get_contents(escape_string("http://graph.facebook.com/{$data['id']}/picture?redirect=0&width={$maxwidth}&height={$maxheight}"));
$obj = json_decode($json);
echo $obj->data->url

Forgive me if PHP is not correct, I am not good at it :)

[illtellyoulater]

I got it working, but avatar field in mybb_users has to be expanded to 255 chars, check pull request.

[illtellyoulater]

Wow I just realized that my browser was blocking the loading of the redirecting url because of the Disconnect extension (https://addons.mozilla.org/en-US/firefox/addon/disconnect/) and I had that extension installed both in latest versions of Firefox and Chrome.. Without that my own jsfiddle example above works and so my code is not necessary.

I only thought it was a browser problem after you commented with "image is correctly displayed in modern browsers" at my pull request here https://github.com/Shade-/MyFacebook-Connect/pull/34. Maybe if you had told me straight away that personally you were not having any problems at all showing the images I could have sorted this faster and also avoided to waste some of your time... oh well.. but that's probably my fault, next time before going on I will make sure that I'm not the only one experiencing a bug :) Thanks for the hint!