Versi [Javascript] : Memendekan URL dengan Google Short API

 Author : hadinug, 06 November, 2014, Komentar

Berbeda dengan versi sebelumnya yang menggunakan PHP, kali ini kami akan menuisakna bagaimana menggunakan API javascript google, untuk memendekan url yang panjang. Sebelumnya kami juga telah memberikan alternatif lain mengunakan PHP disini. SO mari kita ikuti step by step nya:


Langka-1 [Javascript] Funtion

Namun sebelumnya anda harus meload librari js google client.js seperti ini



<script src="https://apis.google.com/js/client.js"></script>


Function Javascript


function shortInfo()
{
    var shortUrl = document.getElementById("shorturl").value;

    var request = gapi.client.urlshortener.url.get({
        'shortUrl': shortUrl,
        'projection': 'FULL'
    });
    request.execute(function(response)
    {

        if (response.longUrl != null)
        {
            str = "<b>Long URL:</b>" + response.longUrl + "<br>";
            str += "<b>Create On:</b>" + response.created + "<br>";
            str += "<b>Short URL Clicks:</b>" + response.analytics.allTime.shortUrlClicks + "<br>";
            str += "<b>Long URL Clicks:</b>" + response.analytics.allTime.longUrlClicks + "<br>";

            document.getElementById("output").innerHTML = str;
        }
        else
        {
            alert("error: " + response.error);
        }

    });

}

function doSort()
{
    var longUrl = document.getElementById("longurl").value;
    var request = gapi.client.urlshortener.url.insert({
        'resource': {
            'longUrl': longUrl
        }
    });
    request.execute(function(response)
    {

        if (response.id != null)
        {
            str = "<b>Long URL:</b>" + longUrl + "<br>";
            str += "<b>Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>";
            document.getElementById("output").innerHTML = str;
        }
        else
        {
            alert("error: creating short url n" + response.error);
        }

    });
}

function load()
{
    //Get your own Browser API Key from  https://code.google.com/apis/console/
    gapi.client.setApiKey('AIzaSyDoE0akrBvl1f3IIRLpuXpVBDsxTfa4ceg');
    gapi.client.load('urlshortener', 'v1', function() {
        document.getElementById("output").innerHTML = "";
    });

}
window.onload = load;


Langkah-2 [HTML]


<p>
    URL: <input type="text" id="longurl" name="url" value="http://www.hadinug.net" /> <br/>
    <input type="button" value="Create Short" onclick="doSort();" />  
</p>
<p>
    URL: <input type="text" id="shorturl" name="url" value="http://goo.gl/GEZEJO" /> <br/>
    <input type="button" value="Get Short  URL Info" onclick="shortInfo();" />
</p>
<div id="output">Loading....</div>


So.. sangat mudah bukan, lihat demo nya disini

 
Bagikan halaman ke sosial media
 
Tags :   google    googleAPI    shortURL    javascript       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda