Social media profile pictures

If you use social media for authenticating users on your site or you integrate with their profiles in your web application, you may want to display social media profile pictures in your site.

Most social media sites provide access to profile pictures via API. They may provide the pictures in multiple dimensions, but they don't necessarily match the requirements of your site design.

Cloudinary allows you to easily display social media 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 delivers the images through a high performance CDN. Images can also be automatically refreshed when users change their profile pictures.

Delivering profile pictures

To integrate a profile picture in your website, point to a URL that contains a unique identifier or username of the social media photo.

The cloudinary image delivery URL for social media photos follows the format:

https://res.cloudinary.com/<cloud name>/image/<social delivery type>/<social identifier>.<format file extension>

Where:

• cloud name: The unique identifier for your Cloudinary product environment, used for URL building and API access.
• social delivery type: The social network delivery type. Supported values: facebook, twitter, gravatar.
• social identifier: The unique identifier of the resource on the social network.
• format file extension: (Optional) The requested delivery format of the image.

When a user accesses such a URL for the first time, Cloudinary downloads the appropriate profile picture from the social media site, stores it locally, and distributes it through a CDN. The next users to access it will receive the image quickly through the CDN.

Facebook profile pictures

To fetch profile pictures from Facebook, use the application-specific numeric Facebook ID as the social identifier and set the social delivery type to facebook.

Here's an example of fetching the Facebook profile picture for Bill Clinton:

Twitter profile pictures

To fetch profile pictures from Twitter, use either the Twitter User ID (delivery type = twitter) or Twitter Screen Name (delivery type = twitter_name) as the social identifier.

Here's an example of fetching the Twitter profile picture for Bill Clinton using the Twitter User ID:

Here's an example of fetching the same profile picture using the Twitter Screen Name:

Gravatar profile pictures

To fetch profile pictures from Gravatar, use the user's email address which has been encoded with an MD5 hash as the social identifier and set the social delivery type to gravatar.

Here's an example of fetching the Gravatar picture for the email address info@cloudinary.com:

Transforming profile pictures

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:

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.

Refreshing profile pictures

Cloudinary automatically checks whether profile pictures have changed, according to a pre-defined caching period. If a profile picture has changed, Cloudinary automatically re-fetches the original image as well as all transformed images. By default, profile 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 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.