Google had changed their policy for fetching profile image
New way to fetch google+ profile image
Google have recently decided to change the way you can fetch profile image. Good old building of image URL is not supported anymore after Google has applied security policy.
In good old, but unfortunately deprecated approach you only needed profile id to build a URL for fetching Google+ profile image like the following:
https://plus.google.com/s2/photos/profile/<PROFILE ID>?sz=<IMAGE SIZE IN PIXELS>
for example, for my Google+ profile image, URL would be as following
https://plus.google.com/s2/photos/profile/108404484724048935794?sz=100
This was working for quite some time and made fetching profile image really easy, but recently this was changed by Google. Now you cannot access profile image unless you have your application created through Google console.
To create your Google+ app you need to login with your Google plus account to https://console.developers.google.com. Right after you create your app, make sure you enable Google+ API for it.
Next step is to generate keys for it and use API Key generated for that app.
API keys are accessible in Google console in Credentials section in lift navigation menu of your previously created Google+ project.
Use this API key along with profile ID for which you want to fetch profile image to build URL from which you will pull JSON data with image path details. URL should be in the following format:
https://www.googleapis.com/plus/v1/people/<PROFILE ID>?fields=image&key=<API KEY>
With a simple get to this URL, Google will give you back JSON in the following format:
{ "image": { "url": "https://lh3.googleusercontent.com/-OkM...AANA/ltpH4BFZ2as/photo.jpg?sz=50" } }
Query string value sz=50 you can simply replace with the value of the image you need. This way images for comments on this website are loaded. This example shows only fetching profile image, but by adding additional parameters to GET request URL, you can fetch other details. The list of all fields you can fetch you can find at https://developers.google.com/+/api/latest/people/get.
The reason this article is in JQuery section is very simple. If you decide to make GET request from your back-end code, you page loading time will depend on time for this get request to Google. In ideal cases, you might not notice this, but first time API is down on Google side or inaccessible for any reason, you page will suffer long time to loan, possible timeout request or even an application exception.
Much better approach is to make this call on client code side, after whole page is loaded. This way you will serve your main content to client and in case remote API is down or inaccessible, you will not have problem with page loading time or exception which will fail to display whole page.
$.get("https://www.googleapis.com/plus/v1/people/<PROFILE ID>?fields=image&key=<API KEY>", function (data) { var imageUrl = data.image.url.replace("?sz=50", "?sz=100"); });
Whenever you are accessing external resource, do it from the client side to avoid page slow loading or possible timeout or application exception. In case you need to do authentication or some complex operation with the request and you cannot do everything on client side code, create your proxy page/view or controller action, do the processing in it and invoke it with script after page is loaded.
In case you need some additional info or suggestion, please post your comment.
References
Disclaimer
Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.
Comments for this article