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.

On this page:

Delivering profile pictures
Transforming profile pictures
Refreshing profile pictures

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 name of your Cloudinary account, a unique public identifier 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.

Notes

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/facebook/65646572251.jpg

Ruby:

cl_image_tag("65646572251.jpg", :type=>"facebook")

PHP (cloudinary_php v2.x):

(new ImageTag('65646572251.jpg'))
  ->deliveryType("facebook");

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("65646572251.jpg", array("type"=>"facebook"))

Library:

Python:

CloudinaryImage("65646572251.jpg").image(type="facebook")

Node.js:

cloudinary.image("65646572251.jpg", {type: "facebook"})

Java:

cloudinary.url().transformation(new Transformation().type("facebook").imageTag("65646572251.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("65646572251.jpg").setDeliveryType("facebook");

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('65646572251.jpg', {type: "facebook"}).toHtml();

Library:

jQuery:

$.cloudinary.image("65646572251.jpg", {type: "facebook"})

React:

<Image publicId="65646572251.jpg" type="facebook">

</Image>

Vue.js:

<cld-image public-id="65646572251.jpg" type="facebook">

</cld-image>

Angular:

<cl-image public-id="65646572251.jpg" type="facebook">

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Action("facebook").BuildImageTag("65646572251.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").generate("65646572251.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().type("facebook").generate("65646572251.jpg");

Kotlin:

cloudinary.image {
  publicId("65646572251.jpg")
   deliveryType("facebook") 
}.generate()

Note

For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID.

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/twitter/1330457336.jpg

Ruby:

cl_image_tag("1330457336.jpg", :type=>"twitter")

PHP (cloudinary_php v2.x):

(new ImageTag('1330457336.jpg'))
  ->deliveryType("twitter");

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("1330457336.jpg", array("type"=>"twitter"))

Library:

Python:

CloudinaryImage("1330457336.jpg").image(type="twitter")

Node.js:

cloudinary.image("1330457336.jpg", {type: "twitter"})

Java:

cloudinary.url().transformation(new Transformation().type("twitter").imageTag("1330457336.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("1330457336.jpg").setDeliveryType("twitter");

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('1330457336.jpg', {type: "twitter"}).toHtml();

Library:

jQuery:

$.cloudinary.image("1330457336.jpg", {type: "twitter"})

React:

<Image publicId="1330457336.jpg" type="twitter">

</Image>

Vue.js:

<cld-image public-id="1330457336.jpg" type="twitter">

</cld-image>

Angular:

<cl-image public-id="1330457336.jpg" type="twitter">

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Action("twitter").BuildImageTag("1330457336.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "twitter").generate("1330457336.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().type("twitter").generate("1330457336.jpg");

Kotlin:

cloudinary.image {
  publicId("1330457336.jpg")
   deliveryType("twitter") 
}.generate()

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

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/twitter_name/BillClinton.jpg

Ruby:

cl_image_tag("BillClinton.jpg", :type=>"twitter_name")

PHP (cloudinary_php v2.x):

(new ImageTag('BillClinton.jpg'))
  ->deliveryType("twitter_name");

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("BillClinton.jpg", array("type"=>"twitter_name"))

Library:

Python:

CloudinaryImage("BillClinton.jpg").image(type="twitter_name")

Node.js:

cloudinary.image("BillClinton.jpg", {type: "twitter_name"})

Java:

cloudinary.url().transformation(new Transformation().type("twitter_name").imageTag("BillClinton.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("BillClinton.jpg").setDeliveryType("twitter_name");

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('BillClinton.jpg', {type: "twitter_name"}).toHtml();

Library:

jQuery:

$.cloudinary.image("BillClinton.jpg", {type: "twitter_name"})

React:

<Image publicId="BillClinton.jpg" type="twitter_name">

</Image>

Vue.js:

<cld-image public-id="BillClinton.jpg" type="twitter_name">

</cld-image>

Angular:

<cl-image public-id="BillClinton.jpg" type="twitter_name">

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Action("twitter_name").BuildImageTag("BillClinton.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "twitter_name").generate("BillClinton.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().type("twitter_name").generate("BillClinton.jpg");

Kotlin:

cloudinary.image {
  publicId("BillClinton.jpg")
   deliveryType("twitter_name") 
}.generate()

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/gravatar/e3264cf16f34ecd3c7c564f5668cbc1e.jpg

Ruby:

cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", :type=>"gravatar")

PHP (cloudinary_php v2.x):

(new ImageTag('e3264cf16f34ecd3c7c564f5668cbc1e.jpg'))
  ->deliveryType("gravatar");

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", array("type"=>"gravatar"))

Library:

Python:

CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").image(type="gravatar")

Node.js:

cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", {type: "gravatar"})

Java:

cloudinary.url().transformation(new Transformation().type("gravatar").imageTag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").setDeliveryType(
  "gravatar"
);

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('e3264cf16f34ecd3c7c564f5668cbc1e.jpg', {type: "gravatar"}).toHtml();

Library:

jQuery:

$.cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", {type: "gravatar"})

React:

<Image publicId="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">

</Image>

Vue.js:

<cld-image public-id="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">

</cld-image>

Angular:

<cl-image public-id="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Action("gravatar").BuildImageTag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().type("gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e.jpg");

Kotlin:

cloudinary.image {
  publicId("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")
   deliveryType("gravatar") 
}.generate()

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

URL:

https://res.cloudinary.com/demo/image/facebook/c_fill,g_face,h_120,w_80/65646572251.jpg

Ruby:

cl_image_tag("65646572251.jpg", :gravity=>"face", :height=>120, :width=>80, :crop=>"fill", :type=>"facebook")

PHP (cloudinary_php v2.x):

(new ImageTag('65646572251.jpg'))
  ->resize(Resize::fill()->width(80)
->height(120)
  ->gravity(
  Gravity::focusOn(
  FocusOn::face()))
  )
  ->deliveryType("facebook");

Library:

PHP (cloudinary_php v1.x (legacy)):

cl_image_tag("65646572251.jpg", array("gravity"=>"face", "height"=>120, "width"=>80, "crop"=>"fill", "type"=>"facebook"))

Library:

Python:

CloudinaryImage("65646572251.jpg").image(gravity="face", height=120, width=80, crop="fill", type="facebook")

Node.js:

cloudinary.image("65646572251.jpg", {gravity: "face", height: 120, width: 80, crop: "fill", type: "facebook"})

Java:

cloudinary.url().transformation(new Transformation().gravity("face").height(120).width(80).crop("fill")).type("facebook").imageTag("65646572251.jpg");

JS (js-url-gen v1.x):

new CloudinaryImage("65646572251.jpg")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setDeliveryType("facebook");

Library:

JS (cloudinary-core v2.x (legacy)):

cloudinary.imageTag('65646572251.jpg', {gravity: "face", height: 120, width: 80, crop: "fill", type: "facebook"}).toHtml();

Library:

jQuery:

$.cloudinary.image("65646572251.jpg", {gravity: "face", height: 120, width: 80, crop: "fill", type: "facebook"})

React:

<Image publicId="65646572251.jpg" type="facebook">
  <Transformation gravity="face" height="120" width="80" crop="fill" />
</Image>

Vue.js:

<cld-image public-id="65646572251.jpg" type="facebook">
  <cld-transformation gravity="face" height="120" width="80" crop="fill" />
</cld-image>

Angular:

<cl-image public-id="65646572251.jpg" type="facebook">
  <cl-transformation gravity="face" height="120" width="80" crop="fill">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity("face").Height(120).Width(80).Crop("fill")).Action("facebook").BuildImageTag("65646572251.jpg")

iOS:

imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation().setGravity("face").setHeight(120).setWidth(80).setCrop("fill")).generate("65646572251.jpg")!, cloudinary: cloudinary)

Android:

MediaManager.get().url().transformation(new Transformation().gravity("face").height(120).width(80).crop("fill")).type("facebook").generate("65646572251.jpg");

Kotlin:

// This code example is not currently available.

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.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: