Here I will explain how to create JavaScript short urls using google URL Shortener API in jQuery or create goog.le short urls using jQuery, JavaScript. Google Provides URL Shortener API to create short urls with goog.le for free with a daily limit of 1,000,000 requests.
Description:
In previous articles I explained Show user current location on google map, Google Map with latitude and longitude, jQuery Google currency converter and many articles relating to Google API, JavaScript, jQuery, asp.net. Now I will explain how to create short urls using google URL Shortener API in JavaScript , jQuery.
To create short urls using Google api first we need to get API key from Google for that check this article Get Google API key once you get the api key click on Services >> Enable URL Shortner API then write the following code
<html>
<head>
<title>URL Shortener using Google API. http://goo.gl </title>
<script src="https://apis.google.com/js/client.js"
type="text/javascript">
</script>
</head>
<script type="text/javascript">
function makeRequest() {
var Url = document.getElementById("longurl").value;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': Url
}
});
request.execute(function(response)
{
if (response.id != null) {
str = "<b>Long
URL:</b>" + Url + "<br>";
str += "<b>Test
Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>";
document.getElementById("result").innerHTML = str;
}
else {
alert("Error:
creating short url \n" + response.error);
}
});
}
function load() {
gapi.client.setApiKey('AIzaSyDV5_Ca9cEVSFaiLkyzGIcDcbnV_4CiA0o');
gapi.client.load('urlshortener',
'v1', function()
{ document.getElementById("result").innerHTML
= ""; });
}
window.onload = load;
</script>
<body>
<h2> URL Shortener using Google API. http://goo.gl </h2>
<table>
<tr>
<td>Enter Long URL:</td>
<td>
<input type="text" id="longurl" name="url" size="30" value="http://www.aspdotnet-suresh.com" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Create Short Url" onclick="makeRequest();"
/></td>
</tr>
<tr>
<td colspan="2">
<div id="result"></div>
</td>
</tr>
</table>
</body>
</html>
|
Demo
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|

Subscribe by RSS
Subscribe by Email
2 comments :
nice information. Thank you for sharing it. Thanks Packers Movers
how to shorten url in addressbar through google api