If you use Facebook Connect for authenticating users to your site or you integrate with Facebook profiles in your Web application, you may need to display Facebook profile pictures in your site.
Facebook provides access to the profile pictures of users as part of their Graph API. They provide the pictures in multiple dimensions, but they don’t necessarily match the requirements of your Web site design.
Cloudinary allows you to easily display Facebook profile pictures as part of your web application. You can display them in any dimension or aspect ratio you need, Cloudinary resizes or crops the pictures for you and deliver the images through a high performance CDN. Images are also automatically refreshed when users change their profile pictures.
To integrate a profile picture in you web site, you simply point to a URL that contains the user's application-specific numeric Facebook ID. You can also specify the numeric ID of a public Facebook page.
For example, if your Cloudinary cloud name is ‘demo’, the following URL will display the profile picture of Bill Clinton:
Here’s an example that adds an image HTML tag using our Ruby on Rails library:
When a user accesses such a URL for the first time, Cloudinary downloads the appropriate profile picture from Facebook, stores it locally in a high performance storage solution, and distributes it through a CDN. The next users to access it will receive the image quickly through the CDN while using smart cache settings.
Note: For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID.
Cloudinary fetches a good quality resolution of the profile picture. To create transformed versions of users’ profile pictures using your required image format and dimensions, pass transformation instructions as part of the URL, exactly as you would with your regular Cloudinary images.
For example, if the graphic design of your web site requires profile pictures in JPG of 80x120:
When using our Ruby on Rails library, you can do the following:
facebook_profile_image_tag("65646572251.jpg", :width => 80, :height => 120, :crop => "fill", :gravity => "face")
Note the use of the face-detection based gravity value in the above example (g_face in the URL) to ensure that the face remains in focus even when changing the image's aspect ratio.
See Image transformations for more details about the possible transformation options and the supported crop modes.
Cloudinary automatically checks whether Facebook pictures have changed, according to a pre-defined caching period. If so, Cloudinary automatically re-fetches the original image as well as all transformed images. By default, Facebook images are checked for changes once every 7 days. Cloudinary customers with a paid account can request to change this default expiration time to any desired interval by submitting a support request.
You can also force an `explicit` refresh of a Facebook picture. When you use this option, the call returns the version of the new image, which you can use to bypass previously cached CDN copies. Alternatively, you can use the `invalidate` parameter, but if you do, make sure you are aware of the considerations involved in invalidating cached media assets on the CDN.