Overlay profile picture from a social network on top of another image by setting the overlay
parameter (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:
Here's how to add a fetched Instagram profile picture:
You can apply any further transformations on the overlaid image, for example, cropping the image as a circle and applying a 'sepia' effect:
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:
Here are the supported parameters for the various networks:
facebook
- Profile ID or Profile name in Facebooktwitter_name
- Profile name in Twittertwitter
- Profile ID in Twitterinstagram_name
- Profile name in Instagraminstagram
- Profile ID in Instagramgplus
- 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