Overview
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.
Note: Cloudinary also supports profile picture fetching from other social networks, such as Twitter, Google+, Instagram and Gravatar.
Viewing 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:
facebook_profile_image_tag("65646572251.jpg")
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.
Picture transformation
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)
See Image transformations for more details about the possible transformation options and the supported crop modes.
Refreshing Facebook Pictures
Cloudinary automatically checks whether whether Facebook pictures have changed, according to a pre-defined caching period. If it has, Cloudinary automatically re-fetches the original image as well as all transformed images in any format or dimension. By default, Facebook images are refreshed once every 7 days. If you need a different caching period, open 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.
For details, see the 'image upload' topic within the relevant Framework help. For example: explicit refresh. Alternatively, you can use the `invalidate` parameter, but if you do, make sure you are aware of the considerations involved in invalidating cached images on the CDN.