Social media profile pictures
Last updated: Sep-02-2024
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>/<signature>/<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. -
signature
: (Optional) A delivery URL signature to allow social media images to be delivered if they are set to restricted in your Security settings. -
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.
- Once you've fetched profile pictures from social media sites, you can find them in the Media Library by filtering the relevant image type from the More types field in the General tab of the advanced search.
- Following Google's shutdown of its legacy Google+ API in March 2019, the Google+ (
gplus
) option is no longer available. - Following changes in Instagram in June 2020, the Instagram (
instagram_name
) option is no longer available.
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:
- For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID.
- The 'demo' product environment is set to restrict URLs of type
facebook
unless they are signed, hence the signature component in the URLs shown here and in Transforming profile pictures. This is best practice to avoid others from delivering remote images from your product environment. See Restricted image types in the Security settings.
X (Twitter) profile pictures
For more details about signing up for the X API and generating a token, please see their documentation.
To fetch profile pictures from X (Twitter), use either the X User ID (delivery type = twitter
) or X Screen Name (delivery type = twitter_name
) as the social identifier.
For example, to fetch the X profile picture for Bill Clinton using the X User ID, use the following URL structure:
https://res.cloudinary.com/my_cloud/image/twitter/s--7TndCy8x--/1330457336
Or, through the SDKs:
To fetch the same profile picture using the X Screen Name, here's the URL structure you'll need, and the SDK code:
https://res.cloudinary.com/my_cloud/image/twitter_name/s--fVTpR0lm--/BillClinton
![Bill Clinton's Twitter Pic](https://res.cloudinary.com/demo/image/upload/v1717055447/cld-docs-hp/bill-clinton-twitter.jpg)
twitter
and twitter_name
unless they are signed, hence the signature component in the URLs shown here. This is best practice to avoid others from delivering remote images from your product environment. See Restricted image types in the Security settings.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
:
gravatar
unless they are signed, hence the signature component in the URL shown here. This is best practice to avoid others from delivering remote images from your product environment. See Restricted image types in the Security settings.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.