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.
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.
- 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.
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:
Ruby:
cl_image_tag("65646572251.jpg", :type=>"facebook")
PHP:
cl_image_tag("65646572251.jpg", array("type"=>"facebook"))
Python:
CloudinaryImage("65646572251.jpg").image(type="facebook")
Node.js:
cloudinary.image("65646572251.jpg", {type: "facebook"})
Java:
cloudinary.url().type("facebook").imageTag("65646572251.jpg");
JS:
cloudinary.imageTag('65646572251.jpg', {type: "facebook"}).toHtml();
jQuery:
$.cloudinary.image("65646572251.jpg", {type: "facebook"})
React:
<Image publicId="65646572251.jpg" type="facebook">
</Image>
Vue.js:
<cld-image publicId="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")
Android:
MediaManager.get().url().type("facebook").generate("65646572251.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").generate("65646572251.jpg")!, cloudinary: cloudinary)
For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID.
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:
Ruby:
cl_image_tag("1330457336.jpg", :type=>"twitter")
PHP:
cl_image_tag("1330457336.jpg", array("type"=>"twitter"))
Python:
CloudinaryImage("1330457336.jpg").image(type="twitter")
Node.js:
cloudinary.image("1330457336.jpg", {type: "twitter"})
Java:
cloudinary.url().type("twitter").imageTag("1330457336.jpg");
JS:
cloudinary.imageTag('1330457336.jpg', {type: "twitter"}).toHtml();
jQuery:
$.cloudinary.image("1330457336.jpg", {type: "twitter"})
React:
<Image publicId="1330457336.jpg" type="twitter">
</Image>
Vue.js:
<cld-image publicId="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")
Android:
MediaManager.get().url().type("twitter").generate("1330457336.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "twitter").generate("1330457336.jpg")!, cloudinary: cloudinary)
Here's an example of fetching the same profile picture using the Twitter Screen Name:
Ruby:
cl_image_tag("BillClinton.jpg", :type=>"twitter_name")
PHP:
cl_image_tag("BillClinton.jpg", array("type"=>"twitter_name"))
Python:
CloudinaryImage("BillClinton.jpg").image(type="twitter_name")
Node.js:
cloudinary.image("BillClinton.jpg", {type: "twitter_name"})
Java:
cloudinary.url().type("twitter_name").imageTag("BillClinton.jpg");
JS:
cloudinary.imageTag('BillClinton.jpg', {type: "twitter_name"}).toHtml();
jQuery:
$.cloudinary.image("BillClinton.jpg", {type: "twitter_name"})
React:
<Image publicId="BillClinton.jpg" type="twitter_name">
</Image>
Vue.js:
<cld-image publicId="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")
Android:
MediaManager.get().url().type("twitter_name").generate("BillClinton.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "twitter_name").generate("BillClinton.jpg")!, cloudinary: cloudinary)
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:
Ruby:
cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", :type=>"gravatar")
PHP:
cl_image_tag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", array("type"=>"gravatar"))
Python:
CloudinaryImage("e3264cf16f34ecd3c7c564f5668cbc1e.jpg").image(type="gravatar")
Node.js:
cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", {type: "gravatar"})
Java:
cloudinary.url().type("gravatar").imageTag("e3264cf16f34ecd3c7c564f5668cbc1e.jpg");
JS:
cloudinary.imageTag('e3264cf16f34ecd3c7c564f5668cbc1e.jpg', {type: "gravatar"}).toHtml();
jQuery:
$.cloudinary.image("e3264cf16f34ecd3c7c564f5668cbc1e.jpg", {type: "gravatar"})
React:
<Image publicId="e3264cf16f34ecd3c7c564f5668cbc1e.jpg" type="gravatar">
</Image>
Vue.js:
<cld-image publicId="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")
Android:
MediaManager.get().url().type("gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "gravatar").generate("e3264cf16f34ecd3c7c564f5668cbc1e.jpg")!, cloudinary: cloudinary)
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:
Ruby:
cl_image_tag("65646572251.jpg", :width=>80, :height=>120, :gravity=>"face", :crop=>"fill", :type=>"facebook")
PHP:
cl_image_tag("65646572251.jpg", array("width"=>80, "height"=>120, "gravity"=>"face", "crop"=>"fill", "type"=>"facebook"))
Python:
CloudinaryImage("65646572251.jpg").image(width=80, height=120, gravity="face", crop="fill", type="facebook")
Node.js:
cloudinary.image("65646572251.jpg", {width: 80, height: 120, gravity: "face", crop: "fill", type: "facebook"})
Java:
cloudinary.url().transformation(new Transformation().width(80).height(120).gravity("face").crop("fill")).type("facebook").imageTag("65646572251.jpg");
JS:
cloudinary.imageTag('65646572251.jpg', {width: 80, height: 120, gravity: "face", crop: "fill", type: "facebook"}).toHtml();
jQuery:
$.cloudinary.image("65646572251.jpg", {width: 80, height: 120, gravity: "face", crop: "fill", type: "facebook"})
React:
<Image publicId="65646572251.jpg" type="facebook">
<Transformation width="80" height="120" gravity="face" crop="fill" />
</Image>
Vue.js:
<cld-image publicId="65646572251.jpg" type="facebook">
<cld-transformation width="80" height="120" gravity="face" crop="fill" />
</cld-image>
Angular:
<cl-image public-id="65646572251.jpg" type="facebook">
<cl-transformation width="80" height="120" gravity="face" crop="fill">
</cl-transformation>
</cl-image>
.NET:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(80).Height(120).Gravity("face").Crop("fill")).Action("facebook").BuildImageTag("65646572251.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(80).height(120).gravity("face").crop("fill")).type("facebook").generate("65646572251.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setType( "facebook").setTransformation(CLDTransformation().setWidth(80).setHeight(120).setGravity("face").setCrop("fill")).generate("65646572251.jpg")!, cloudinary: cloudinary)
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.
Cloudinary automatically checks whether profile pictures have changed, according to a pre-defined caching period. If so, 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.
