Skip to content

Instantly share code, notes, and snippets.

@zulhfreelancer

zulhfreelancer/gravatar.html

Created October 5, 2014 14:09
Show Gist options
  • Save zulhfreelancer/6fdf8bf06f0a0981d71b to your computer and use it in GitHub Desktop.
Save zulhfreelancer/6fdf8bf06f0a0981d71b to your computer and use it in GitHub Desktop.
Download ZIP
Get Gravatar Image Using JSON // Demo: http://jsfiddle.net/eqpdd5c5/ // Gravatar Profile: https://en.gravatar.com/zulhfreelancer // Gravatar JSON: http://en.gravatar.com/zulhfreelancer.json
Raw
gravatar.html
<head>
<script>
function getData() {
var json = {
"entry": [{
"id": "11014108",
"hash": "9db0054df76cc4b80888ff713527a652",
"requestHash": "zulhfreelancer",
"profileUrl": "http:\/\/gravatar.com\/zulhfreelancer",
"preferredUsername": "zulhfreelancer",
"thumbnailUrl": "http:\/\/0.gravatar.com\/avatar\/9db0054df76cc4b80888ff713527a652",
"photos": [{
"value": "http:\/\/0.gravatar.com\/avatar\/9db0054df76cc4b80888ff713527a652",
"type": "thumbnail"
}],
"name": {
"givenName": "Zulhilmi",
"familyName": "Zainudin",
"formatted": "Zulhilmi Zainudin"
},
"displayName": "Zulhilmi Zainudin",
"aboutMe": "Pereka grafik &amp;amp; pembangun laman web. Mempunyai kepakaran di dalam bidang rekaan grafik dan pembangunan laman web berasaskan sistem WordPress. Pengasas projek Bina Blog Dot Com Sendiri.",
"currentLocation": "Kuantan, Malaysia",
"urls": [{
"value": "http:\/\/www.binablogdotcomsendiri.com\/",
"title": "Bina Blog Dot Com Sendiri"
}, {
"value": "http:\/\/www.binablogdotcomsendiri.com\/blog\/",
"title": "Bina Blog Dot Com Sendiri"
}, {
"value": "http:\/\/zulhilmizainudin.com\/live\/",
"title": "Personal Blog"
}]
}]
}
// get thumbnailUrl from the JSON
var thumbnailUrl = json.entry[0].thumbnailUrl;
// construct image URL
var imgUrl = '<img src="' + thumbnailUrl + '">';
// put data into div id #img
var imgDiv = document.getElementById("img");
imgDiv.innerHTML = imgUrl;
// construct image URL custom size
var imgSize = 200; // change image size here
var imgUrlcustomsize = '<img src="' + thumbnailUrl + '?s=' + imgSize + '">';
// put data into div id #imgcustomsize
var imgDivcustomsize = document.getElementById("imgcustomsize");
imgDivcustomsize.innerHTML = imgUrlcustomsize;
}
</script>
</head>
<body onload="getData()">
<div id="img"></div>
<br>
<div id="imgcustomsize"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment