How do I goo.gl-shorten a url in js?

Question

Prereq: create yourself an API key for urlshortener at https://code.google.com/apis/console/

There are lots of docs for various ways of turning a goo.gl url into the original URL via the js get api, e g: here, here and here -- and at least the first one even works.

If I tweak that one ever so slightly to use the insert api to convert a url to a tiny url, passing a { "longUrl": "https://codepen.io/" } instead, though, it breaks. Try it at http://codepen.io/johan/full/EHbGy#YOUR-API-KEY-HERE if you like, or run this somewhere:

<script>
var api_key = 'YOUR-API-KEY-HERE';

function makeRequest() {
  var request = gapi.client.urlshortener.url.insert({
    'longUrl': 'https://codepen.io/'
  });
  request.execute(function(response) {
    alert(JSON.stringify(window.got = response));
  });
}

function load() {
  gapi.client.setApiKey(api_key);
  gapi.client.load('urlshortener', 'v1', makeRequest);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=load"></script>

...it just responds with an error:

{ "code": 400
, "message": "Required"
, "data": 
  [ { "domain": "global"
    , "reason": "required"
    , "message": "Required"
    , "locationType": "parameter"
    , "location": "resource.longUrl"
    }
  ]
, "error": 
  { "code": 400
  , "message": "Required"
  , "data": 
    [ { "domain": "global"
      , "reason": "required"
      , "message": "Required"
      , "locationType": "parameter"
      , "location": "resource.longUrl"
      }
    ]
  }
}

Suggestions? (No, it doesn't work any better if you change the url.insert parameter to an object with a resource.longUrl key – or just passing the url without a wrapper object.)

Sentence

Answer 1

It's not super clear in the docs or error message, but your request should look like the following and all will be well:

var request = gapi.client.urlshortener.url.insert({
    'resource': {'longUrl': 'https://codepen.io/'}
});

Nonunion

Thanks! Maintaining good docs is as hard as making good APIs. – Sentence

@Sentence What, you mean this link to an example of a URL Resource wasn't helpful? developers.google.com/url-shortener/v1/url/url#resource – Nonunion

There's a lot of opportunity for developers.google.com to improve with someone cloutful (and Google Webmaster Tools capable) to sort out its 404s. I could see that being a ceaseless full-time QA position. – Sentence

Answer 2

I think I'll drop the messy client library for this, when it turns out I can do it five lines of coffescript instead of loading all that cruft, as I already have jQuery around anyway: http://codepen.io/johan/pen/puJyH

api = 'https://www.googleapis.com/urlshortener/v1/url'
api += "?key=#{key}"  if key = location.search.slice 1

$.ajax
  url: api
  type: 'POST'
  data: JSON.stringify(longUrl: url)
  contentType: 'application/json'
  success: (got) ->
    alert "shortened url: #{got.id}"

Sentence

Note: this insert api worked fine prior to November 15, but has since been failing the CORS OPTIONS request with a 404 error so the actual POST can't happen. I have filed a bug report both on the mailing list and docs site. The google js client still does work, as it bends backwards to create a hidden www.googleapis.com iframe which does non-CORS rpc ajax requests on behalf of your page. – Sentence