> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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>/<signature>/<social identifier>.<format file extension>`

**Where:**

* `cloud name`: The unique identifier for your [Cloudinary product environment](https://console.cloudinary.com/console), used for URL building and API access.
* `social delivery type`: The social network delivery type. Supported values: [facebook](#facebook_profile_pictures), [twitter](#x_twitter_profile_pictures), [gravatar](#gravatar_profile_pictures).
* `signature`: (Optional) A [delivery URL signature](delivery_url_signatures) to allow social media images to be delivered if they are set to **restricted** in your [Security settings](https://console.cloudinary.com/app/settings/security).
* `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](dam_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:

![Bill Clinton profile pic](https://res.cloudinary.com/demo/image/facebook/s--ZuJGmG2B--/65646572251 "thumb: w_175")

```nodejs
cloudinary.image("65646572251", {sign_url: true, type: "facebook"})
```

```react
new CloudinaryImage("65646572251")
  .setSignature("ZuJGmG2B")
  .setDeliveryType("facebook");
```

```vue
new CloudinaryImage("65646572251")
  .setSignature("ZuJGmG2B")
  .setDeliveryType("facebook");
```

```angular
new CloudinaryImage("65646572251")
  .setSignature("ZuJGmG2B")
  .setDeliveryType("facebook");
```

```js
new CloudinaryImage("65646572251")
  .setSignature("ZuJGmG2B")
  .setDeliveryType("facebook");
```

```python
CloudinaryImage("65646572251").image(sign_url=True, type="facebook")
```

```php
(new ImageTag('65646572251'))
	->sign()
	->deliveryType("facebook");
```

```java
cloudinary.url().transformation(new Transformation().signed(true).type("facebook").imageTag("65646572251");
```

```ruby
cl_image_tag("65646572251", sign_url: true, type: "facebook")
```

```csharp
cloudinary.Api.UrlImgUp.Signed(true).Action("facebook").BuildImageTag("65646572251")
```

```dart
cloudinary.image('65646572251').transformation(Transformation()
	.setSignature("ZuJGmG2B")
	.setDeliveryType("facebook"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").generate("65646572251", signUrl: true)!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().signed(true).type("facebook").generate("65646572251");
```

```flutter
cloudinary.image('65646572251').transformation(Transformation()
	.setSignature("ZuJGmG2B")
	.setDeliveryType("facebook"));
```

```kotlin
cloudinary.image {
	publicId("65646572251")
	 signature()
	 deliveryType("facebook") 
}.generate()
```

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

```react_native
new CloudinaryImage("65646572251")
  .setSignature("ZuJGmG2B")
  .setDeliveryType("facebook");
```

> **NOTES**:
>
> * 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](#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](https://console.cloudinary.com/app/settings/security).

### X (Twitter) profile pictures

> **INFO**:
>
> Cloudinary needs your X API v2 access credentials (paid ones) in order to fetch profile pictures on your behalf.
> To enable this feature for your account, please [contact support](https://support.cloudinary.com/hc/en-us/requests/new) and provide us with your **X API v2** credentials: **Consumer Key**, **Consumer Secret**, **Access Token**, and **Access Token Secret**. 
> For more details about signing up for the X API and generating a token, please see their [documentation](https://docs.x.com/x-api/getting-started/getting-access).

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:

![Bill Clinton profile pic](https://res.cloudinary.com/my_cloud/image/twitter/s--7TndCy8x--/1330457336.jpg "thumb: w_175, with_image:false, with_url:false, with_code:true")

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 profile pic](https://res.cloudinary.com/my_cloud/image/twitter_name/s--fVTpR0lm--/BillClinton "thumb: w_175, with_image:false, with_url:false, with_code:true")

> **NOTE**:
>
> The 'demo' product environment is set to restrict URLs of type `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](https://console.cloudinary.com/app/settings/security).

### 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`:

![Cloudinary Gravatar](https://res.cloudinary.com/demo/image/gravatar/s--urfyPcob--/e3264cf16f34ecd3c7c564f5668cbc1e "thumb: w_175")

```nodejs
cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e", {sign_url: true, type: "gravatar"})
```

```react
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e")
  .setSignature("urfyPcob")
  .setDeliveryType("gravatar");
```

```vue
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e")
  .setSignature("urfyPcob")
  .setDeliveryType("gravatar");
```

```angular
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e")
  .setSignature("urfyPcob")
  .setDeliveryType("gravatar");
```

```js
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e")
  .setSignature("urfyPcob")
  .setDeliveryType("gravatar");
```

```python
CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e").image(sign_url=True, type="gravatar")
```

```php
(new ImageTag('e3264cf16f34ecd3c7c564f5668cbc1e'))
	->sign()
	->deliveryType("gravatar");
```

```java
cloudinary.url().transformation(new Transformation().signed(true).type("gravatar").imageTag("e3264cf16f34ecd3c7c564f5668cbc1e");
```

```ruby
cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e", sign_url: true, type: "gravatar")
```

```csharp
cloudinary.Api.UrlImgUp.Signed(true).Action("gravatar").BuildImageTag("e3264cf16f34ecd3c7c564f5668cbc1e")
```

```dart
cloudinary.image('e3264cf16f34ecd3c7c564f5668cbc1e').transformation(Transformation()
	.setSignature("urfyPcob")
	.setDeliveryType("gravatar"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setType( "gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e", signUrl: true)!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().signed(true).type("gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e");
```

```flutter
cloudinary.image('e3264cf16f34ecd3c7c564f5668cbc1e').transformation(Transformation()
	.setSignature("urfyPcob")
	.setDeliveryType("gravatar"));
```

```kotlin
cloudinary.image {
	publicId("e3264cf16f34ecd3c7c564f5668cbc1e")
	 signature()
	 deliveryType("gravatar") 
}.generate()
```

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

```react_native
new CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e")
  .setSignature("urfyPcob")
  .setDeliveryType("gravatar");
```

> **NOTE**:
>
> The 'demo' product environment is set to restrict URLs of type `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](https://console.cloudinary.com/app/settings/security).

## 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:

![Bill Clinton profile pic](https://res.cloudinary.com/demo/image/facebook/s--nAw6kUFC--/c_fill,g_face,h_120,w_80/65646572251)

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

```react
new CloudinaryImage("65646572251")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setSignature("nAw6kUFC")
  .setDeliveryType("facebook");
```

```vue
new CloudinaryImage("65646572251")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setSignature("nAw6kUFC")
  .setDeliveryType("facebook");
```

```angular
new CloudinaryImage("65646572251")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setSignature("nAw6kUFC")
  .setDeliveryType("facebook");
```

```js
new CloudinaryImage("65646572251")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setSignature("nAw6kUFC")
  .setDeliveryType("facebook");
```

```python
CloudinaryImage("65646572251").image(gravity="face", height=120, width=80, crop="fill", sign_url=True, type="facebook")
```

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

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

```ruby
cl_image_tag("65646572251", gravity: "face", height: 120, width: 80, crop: "fill", sign_url: true, type: "facebook")
```

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

```dart
cloudinary.image('65646572251').transformation(Transformation()
	.resize(Resize.fill().width(80)
.height(120)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.setSignature("nAw6kUFC")
	.setDeliveryType("facebook"));
```

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

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

```flutter
cloudinary.image('65646572251').transformation(Transformation()
	.resize(Resize.fill().width(80)
.height(120)
	.gravity(
	Gravity.focusOn(
	FocusOn.face()))
	)
	.setSignature("nAw6kUFC")
	.setDeliveryType("facebook"));
```

```kotlin
cloudinary.image {
	publicId("65646572251")
	 resize(Resize.fill() { width(80)
 height(120)
	 gravity(
	Gravity.focusOn(
	FocusOn.face()))
	 })
	 signature()
	 deliveryType("facebook") 
}.generate()
```

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

```react_native
new CloudinaryImage("65646572251")
  .resize(
    fill()
      .width(80)
      .height(120)
      .gravity(focusOn(face()))
  )
  .setSignature("nAw6kUFC")
  .setDeliveryType("facebook");
```

Note the use of the [face-detection](face_detection_based_transformations) 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](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.