Google APIs Client Library for JavaScriptを使うと、ブラウザだけで goo.gl の短縮URLを作成できます。

準備

Google APIs ダッシュボードでプロジェクトを作成する。または既存プロジェクトを選択する。
左のメニューからライブラリを選択して、検索欄にurl等と入れるとURL Shortener APIが見つかるので選択する。
上部の有効にするを選択する。
左のメニューから認証情報を選択して、認証情報を作成→APIキーと選択してAPIキーを作成する。

Firebaseで作成したプロジェクトを使うこともできます。

実装

まずGoogle APIs Clientを読み込みます。HTML内に<script src="https://apis.google.com/js/api.js"></script>を書けばOKです。

<html>

<head>
  <!-- Google APIs Client -->
  <script src="https://apis.google.com/js/api.js"></script>
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>

次に、このライブラリを使って短縮URLを生成する関数を作成します。url-shortener.jsというファイルを作成して、以下のコードを記述します。

url-shortener.js

function shorten(url) {
  return new Promise((resolve, reject) => {
    gapi.load('client', _ => {
      gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/urlshortener/v1/rest'],
      })
        .then(_ => gapi.client.urlshortener.url.insert({
          longUrl: url
        }))
        .then(resolve, reject)
    });
  });
}

YOUT_API_KEYは、先程作成したAPIキーに置き換えてください。

そしてこれを先程のGoogle APIs Clientの読み込みの後に加えます。

<html>

<head>
  <!-- Google APIs Client -->
  <script src="https://apis.google.com/js/api.js"></script>
  <!-- shorten 関数 -->
  <script src="url-shortener.js"></script>
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>

あとは、shorten(url)関数を呼べば、短縮URLのレスポンスがPromiseオブジェクトで取得できます。

<html>

<head>
  <!-- Google APIs Client -->
  <script src="https://apis.google.com/js/api.js"></script>
  <!-- shorten 関数 -->
  <script src="url-shortener.js"></script>
</head>

<body>
  <h1>Hello World</h1>
  <div id="shortUrlOutput"></div>

  <script>
    // 短縮URLを取得する
    shorten('http://www.eje-c.com')
      .then(function(response) {
        // response.result.id に短縮URLが入っている
        var shortUrl = response.result.id;
        // 画面に表示
        document.getElementById('shortUrlOutput').innerHTML = shortUrl;
      });
  </script>
</body>

</html>