CODEWITHSUNDEEP
javascriptgoogle-api
Mahtab Alam
Mahtab Alam

Reputation: 627

Using Google URL Shortner API for Web Browsers

I am trying to use Google URL Shortener API. I have enabled the Google URL Shortener API and generated the API Key. I am following this example http://hayageek.com/google-url-shortener-api/. But I am not able to shorten the original URL.

<html>

<head>
<link  type="text/css" rel="stylesheet"  href="css/bootstrap.css" />    
<link  type="text/css" rel="stylesheet"  href="css/style.css" />    
<script src="js/bootstrap.js"></script>    
<script src="js/jquery-1.11.3.js"></script>    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">    
</script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">        
</script>  
<link rel="stylesheet" type="text/css"   
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
</head>
<body background="eiffel10.jpg">
<script src="js/bootstrap.js"></script>    
<script src="js/jquery-1.11.3.js"></script> 
<script src="js/jquery.contenthover.js"></script> 
<!-- Form   -->
<br/><br/><br/>
<div class="container">    
<div class="row">
<div class="col-md-4">

<h2></h2><br/>
<form class="form-inline" role="form" >
<div class="form-group">
<label for="url" class="col-sm-2 control-label">Original URL</label>                     
</div>

<div class="form-group">
<input type="text" name="url" id="longurl" class="form-control"  
placeholder="Enter your name ..."/>                     
</div> 
<div class="form-group">
<button type="button" onclick="shortIt();" class="btn btn-primary">Short 
It</button>              
</div>    
</form>
</div>
</div>
</div>   

<div id="output">Result</div>
<script type="text/javascript">
 function shortIt() 
 { var longUrl=document.getElementById("longurl").value;
  //Below alert is displayed
 alert(longUrl);
var request = gapi.client.urlshortener.url.insert({ "resource": {
          "longUrl": longUrl
    }
    });
// Below alert is not displayed on clicking the Short It so the problem is 
//with the request variable
alert("xcvbn");

    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()
{gapi.client.setApiKey('AIzaSyC6iiKUFLkzpyGdvI5QdLf3m1shuM8xxxx');

    gapi.client.load('urlshortener', 'v1',function()    
 {document.getElementById("output").innerHTML="";}); 
}
window.onload = load;   
 
</script>
<script src="https://apis.google.com/js/client.js"> </script>  
</body>
</html>

And what is the use of client.js , Is it mandatory to include client.js

Upvotes: 1

Views: 136

Answers (1)

Parth Sane
Parth Sane

Reputation: 587

Google's official developer site has a page explaining this.

  1. Google's ajax API and bootstrap both require server side execution. Thats why it doesn't work if you open it in your browser statically. All of these are dynamic components that will only work when executed ad delivered by a server.
  2. Basically client.js is their javascript library for accessing Google services.

Pro Tip:- Always use a local server to test any website while you're making it, that way you have no nasty surprises when you upload it online to the production server.

Upvotes: 1

Related Questions