zulhfreelancer
10/5/2014 - 2:09 PM

Get Gravatar Image Using JSON // Demo: http://jsfiddle.net/eqpdd5c5/ // Gravatar Profile: https://en.gravatar.com/zulhfreelancer // Gravatar

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

<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>