google url shortener api and jquery not working

Question

i cant seem to get google's new url shortener api to work with jquery's post method:

  $(document).ready(function() {
   $.post("https://www.googleapis.com/urlshortener/v1/url", { longUrl: "http://www.google.com/"},
      function(data){
        console.log("data" + data);
      });
   $('body').ajaxError(function(e, xhr, settings, exception) {
       $(this).text('fail'+e);
   console.log(exception);
   });
  });

all of this gives me an empty (data) response AND an empty (exception) response. any ideas?

ive also tried this with no success:

   $.ajax({
 type: 'POST',
 url: "https://www.googleapis.com/urlshortener/v1/url",
 data: { longUrl: "http://www.google.com/"},
 success: success,
 dataType: "jsonp"
   });

I ran your top code block and firebug reports a 405 Method Not Allowed response from google. See http://stackoverflow.com/questions/4690927/problem-with-implementing-google-url-shortener-api for similar discussion — tawman, Jan 14 '11 at 19:30

score 2 · Answer 1 · answered Mar 08 '17 at 05:25

I was having the same problem of not being able to use Google Shortener API with jQuery, but after some research I got around with a simple JSON.stringify on the data

My final code looks like this:

    window.googleShAPI = 'YOUR_KEY';
    window.getShortURL = function(url,cb){
        $.ajax({
             url:'https://www.googleapis.com/urlshortener/v1/url?key='+window.googleShAPI,
             type:"POST",
             data:JSON.stringify({longUrl:url}),
             contentType:"application/json",
             dataType:"json",
             success: function(data){ cb(data.id); }
        });
    }

    // example of use:
    window.getShortURL('http://www.google.com/',function(u){console.log('ShortURL is:'+u);})

JSON.stringify was it for me.Thanks. – greaterKing May 31 '17 at 13:23 — greaterKing, May 31 '17 at 13:23

score 1 · Answer 2 · edited Feb 02 '17 at 02:42

You need API key in order to use this API

This method requires one query parameter: Your API key (using the key query parameter). Note: You can omit the query parameter when making a limited number of calls, such as during the testing phase.

also response return in JSON

$.post("https://www.googleapis.com/urlshortener/v1/url?key=enter-your-api-key", { longUrl: "http://www.google.com/"},
  function(data){
    console.log("data" + data);
  }, "json");

score 0 · Answer 3 · answered Dec 03 '15 at 19:41

Best Solution found on this :

<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 load() {
    gapi.client.setApiKey('[GOOGLE API KEY]');
    gapi.client.load('urlshortener', 'v1', function() { 
        document.getElementById("result").innerHTML = "";

        var Url = "http://onlineinvite.in";
        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);
            }
        });
    });
}
window.onload = load;
</script>
<body>
<div id="result"></div>
</body>
</html>

Please replace the [GOOGLE API KEY]

score 0 · Answer 4 · answered Jan 14 '11 at 03:59

0

I assume you have read the Google URL Shortener API reference instructions, but I do not see an API key in your code snippet:

POST https://www.googleapis.com/urlshortener/v1/url?key={key}

answered Jan 14 '11 at 03:59

tawman

2,478
1
15
24

yes i have tried sending the key in the URL as well as a post param with the same result – rahim Jan 14 '11 at 19:18

score 0 · Answer 5 · answered Jan 14 '11 at 04:03

0

try setting the contentType, like this:

$.ajax({
 type: 'POST',
 contentType: "application/json"
 url: "https://www.googleapis.com/urlshortener/v1/url",
 data: { longUrl: "http://www.google.com/"},
 success: success,
 dataType: "jsonp"
   });

answered Jan 14 '11 at 04:03

Arthur Neves

11,840
8
60
73

score 0 · Answer 6 · answered Feb 22 '11 at 21:21

Try using getJson Method:

url="https://www.googleapis.com/urlshortener/v1/url";
data = {
    key:"your-api-key",
    shortUrl:"http://www.google.com"
};
$.getJSON(url, data, function(data, textStatus){
    if(data.status=="OK"){
        alert(data.longUrl);
        }
    });

score 0 · Answer 7 · edited May 23 '17 at 12:32

0

You can't access Google's URL Shortening API using any of the methods currently described in these answers, due to cross-domain script access restrictions. See the discussion here for solutions: Cross Domain Issue with implementing Google URL shortener API

Thanks to tawman for this answer, but it was hidden in the comments and I didn't see it at first.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 04 '12 at 20:30

Eric Nguyen

40,312
4
25
31

google url shortener api and jquery not working

7 Answers7