Overlaying social profile pictures on top of images
Overlaying social profile pictures on top of images
Social apps
Presentation
Cropping
Beginner

Overlay profile picture from a social network on top of another image by setting the overlayparameter (l in URLs) to the corresponding network and user name. Cloudinary will automatically fetch the latest profile picture of social network sites.

Here's an original image: Original

https://res.cloudinary.com/demo/image/upload/site_bg_bright.jpg
Here's how to add a fetched Facebook profile picture: Overlay
https://res.cloudinary.com/demo/image/upload/l_facebook:zuck,w_300/site_bg_bright.jpg

Here's how to add a fetched Instagram profile picture: Scale + position

https://res.cloudinary.com/demo/image/upload/l_instagram_name:angelinajolieofficial,w_200,h_368,c_fill,g_south_east/site_bg_bright.jpg

You can apply any further transformations on the overlaid image, for example, cropping the image as a circle and applying a 'sepia' effect: Transformed

https://res.cloudinary.com/demo/image/upload/l_twitter_name:BrunoMars.png,w_300,r_max,e_sepia/site_bg_bright.jpg

Overlays usually look better on brighter background images rather than on strong colored ones. You can use the opacity parameter (o in URLs) to brighten the base image as needed. Here's an example of brightening an image with the opacity parameter, scaling it down and overlaying Lance Armstrong's Twitter profile picture: Strong colored image with opacity

https://res.cloudinary.com/demo/image/upload/w_300,c_scale,o_30/l_gplus:112009945208508693556,w_100/pasta.jpg

Here are the supported parameters for the various networks:

  • facebook - Profile ID or Profile name in Facebook
  • twitter_name- Profile name in Twitter
  • twitter - Profile ID in Twitter
  • instagram_name - Profile name in Instagram
  • instagram - Profile ID in Instagram
  • gplus - Profile ID in Google Plus

Have a look at the following for more information:
Documentation - Facebook profile pictures
Documentation - Twitter profile pictures
Blog post - Display Instagram and Google+ profile pictures in your website and mobile app