Whether you use Facebook Connect for authenticating users to your site or you simply integrate with Facebook profiles in your Web application, you probably 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 unique Facebook ID of the user. The ID can be either the numeric ID or the public name each user can be assigned to in Facebook. The ID can also be a name or a numeric ID of a Facebook public page.
For example, if your Cloudinary cloud name is ‘demo’, the following URL will display the profile picture of Bill Clinton:
You can also display the same profile picture using the numeric ID of this Facebook page:
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.
You can create transformed versions of users’ profile pictures using your required image format and dimensions. Facebook provides profile pictures in 4 different resolutions. Cloudinary smartly decides which resolution to use as a baseline for generating the image you need.
For displaying Facebook profile pictures in your desired format and dimensions, simply pass transformation instructions as part of the URL.
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("billclinton.jpg", :width => 80, :height => 120, :crop => :fill)
See Image transformations for more details about the possible transformation options and the supported crop modes.
Users might change the Facebook profile picture once in a while. You want the images displayed in your site to be updated as well. Cloudinary manages that for you. We don’t update the images immediately when users change their pictures, but we do that not much later. Cache settings of resources are configured in a way to allow updating them automatically on users’ browsers.
You actually don’t have to do anything for making that work. It just works. All transformed images in any format or dimension will also be refreshed.