Membuat Short URL Otomatis Dengan Google API

Membuat Short URL Otomatis Dengan Google API Klo bahasa kerennya sih Auto Generate Short URL. Klo kamu perhatiin, di setiap bagian bawah judul postingan blog ini ada sebuah URL yang cukup pendek. URL itu merupakan "jalan pintas" menuju ke postingan blog ini. Itulah yang disebut short URL. Misalnya kamu punya postingan yang beralamat di http://www.domain.com/2016/07/ini-judul-postingan-yang-sangat-panjang-sekali.html, ketika pake short URL, alamatnya berubah menjadi http://goo.gl/xYz.

Kenapa mesti pake short URL dari Google? Yah, namanya juga Google. Klo Google sudah menyediakan, ngapain pake yang lain? LOL kidding, selera aja sih. Klo mau pake bit.ly, tinyurl, atau yang lain juga boleh.

Bedanya, short URL di blog ini otomatis ter-generate. Saya gak pernah sengaja memendekkan setiap URL ke http://goo.gl. Dia benar-benar akan tercipta otomatis begitu postingan baru dibuat. Lumayan menghemat waktu kan? Make your life easier.

Membuat Short URL Otomatis Dengan Google API

Sebenarnya kamu bisa bikin shortener URL menggunakan domain sendiri, contoh domain.com/mUyhz. Tapi saya gak bahas itu, agar blogger yang belum pake domain sendiri pun bisa coba.

Apa aja kelebihan pake short URL otomatis?
  1. Alamat postingan lebih gampang diingat.
  2. Gampang di copy-paste, jadi lebih shareable.
  3. Terlihat lebih simple.
  4. Yang pasti otomatis, gak usah ribet memendekkan sendiri.

Oke, langsung ke tutorial ya.

Pertama: Dapatkan Google Shortener API Key


  1. Buka Google API Library. Pastikan kamu punya akun Google ya. Kemudian klik Credentials.
    Membuat Short URL Otomatis Dengan Google API
  2. Muncul form create project. Isi sesuai keinginan. Kemudian klik button Create.
    Membuat Short URL Otomatis Dengan Google API
  3. Klik Overview.
    Membuat Short URL Otomatis Dengan Google API
  4. Lihat di bagian "Other popular APIs". Klik URL Shortener API.
    Membuat Short URL Otomatis Dengan Google API
  5. Klik Enable.
    Membuat Short URL Otomatis Dengan Google API
  6. Setelahnya, akan ada tulisan "This API is enabled, but you can't use it in your project until you create credentials. Click "Go to Credentials" to do this now (strongly recommended)." Klik aja buttonnya.
    Membuat Short URL Otomatis Dengan Google API
  7. Isikan seperti ini:
    - Which API are you using? Pilih URL Shortener API.
    - Where will you be calling the API form? Pilih Web browser (Javascript).
    - What data will you be accessing? Pilih Public data.
    Membuat Short URL Otomatis Dengan Google API
  8. Muncul form lain. Isikan seperti ini:
    - Name. Tulis sesuai keinginan.
    - Accept requests from these HTTP referrers (web sites). Isikan alamat blog kamu.
    Membuat Short URL Otomatis Dengan Google API
  9. Muncul form lain menandakan pembuatan API sukses! Catat kode API nya ya. Jika sudah, klik button Done.
    Membuat Short URL Otomatis Dengan Google API

Kedua: Settingan Pada Blogger


  1. Simpan kode CSS ini sebelum ]]></b:skin> atau </style>. Catatan, ini style yang dipakai pada blog Igniel. Kamu bisa ubah sesuai keinginan.
    .shorten-box {float:right; font-size:15px;padding: 5px 6px;background: #008c5f;color:#fff;border: 1px solid;border-radius: 3px;border-radius:3px;}
    .shorten-text {display:inline-block;position: relative;margin-right:8px;}
    #output{display:inline-block;}
    .output{display:inline-block;monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000;cursor:pointer;background:#fff;border-radius:3px;line-height:1;padding:2px 5px;margin:0;box-shadow: inset 0px 0px 1px rgba(0,0,0,.0.8); }
    .output:focus,.output:active{outline:none}
  2. Menyimpan output kode, alias tempat tampilnya short URL. Sebenarnya ini bisa ditaruh dimana aja, asal masih dalam kolom body postingan. Saya contohkan, output akan disimpan di bawah postingan.
    - Cari kode <b:includable id='post' var='post'>
    - Scroll kebawah, cari kode ini atau yang mirip seperti ini.
    <data:post.body/>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    - Simpan kode ini dibawah </div>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='shorten-box'>
    <input expr:value='data:post.url' id='longurl' name='url' type='hidden'/>
    <div class='shorten-text'>Short URL:</div>
    <div id='output'/>
    <div class='clear'/>
    </div>
    </b:if>
  3. Simpan kode ini sebelum </body>. Ganti kode XXXKODEAPIXXX dengan kode API kamu sendiri.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script>
    //<![CDATA[
    (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
    function makeShort() {
        var longUrl = document.getElementById("longurl").value;
        var request = gapi.client.urlshortener.url.insert({
            'resource': {
                'longUrl': longUrl
            }
        });
        request.execute(function(response) {
            if (response.id != null) {
                str = "";
                str += "<div class='output' contenteditable='true' onClick='document.execCommand(&quot;selectAll&quot;,false,null)' title='Click and CTRL+C'>" + response.id + "</div>";
                document.getElementById("output").innerHTML = str;
            } else {
                alert("ERROR: creating short url n" + response.error);
            }
        });
    }
    function load() {
        gapi.client.setApiKey('XXXKODEAPIXXX');
        gapi.client.load('urlshortener', 'v1', function() {
            document.getElementById("output").innerHTML = makeShort();
        });
    }
    window.onload = load;
    //]]>
    </script>
    </b:if>
  4. Terakhir, jangan lupa Save Template.

Selesai. Sekarang kamu gak usah cape-cape memendekkan URL untuk setiap postingan karena dia akan otomatis ter-generate.

Artikel Terkait

13 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • ADMIN PK
    16/12/20
    Profil: https://www.blogger.com/profile/04027216696529247659
    suhu tolong cek website saya pikirankita.site, kira" ada yang salah gak... soalnya bebrapa kali ngajuin adsense gak diterima...
  • Rafael Putra
    7/5/18
    Profil: https://www.blogger.com/profile/04524106668075079373
    Wah tampilan situs API nya agak beda, jadi susah nerapinnya
  • Unknown
    18/2/18
    Profil: https://www.blogger.com/profile/10484940399209879457
    Hehe,,, nyangkut lgie,, blognya bener2 membuat ane terinspirasi,, ane bookmark blognya,, byk tutor yg blon pernh ane tahu,,, 😜 😜 😜
  • krisna
    11/1/18
    Profil: https://www.blogger.com/profile/10244369178960406933
    agar short url muncul di mobile bagaimana?
    setelah menggunakan tutorial diatas sudah berhasil muncul pada tampilan dekstop
    namun pada tampilan mobile tidak muncul
    • Igniel
      11/1/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mungkin scriptnya kamu simpen didalam tag kondisional. Cek lagi dan simpen scriptnya diluar tag kondisional.
  • Dwi Purwanto
    2/11/17
    Profil: https://www.blogger.com/profile/11685515579416885105
    Dicoba ah
  • Unknown
    8/10/17
    Profil: https://www.blogger.com/profile/06158185625531966364
    Wah ternyata ada fitur simple dari Google ya :) bisa di terapkan di blog saya www.candrarudi.com nih :)
  • BENGKEL ANDROID DAN WINDOWS
    2/8/17
    Profil: https://www.blogger.com/profile/14131858090765235443
    Kok ga muncul ya gan short url nya di blog saya ?
    • Igniel
      2/8/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mungkin ada langkah yang terlewat. Coba lagi aja kak.
  • Khoirul Rizky F
    8/7/17
    Profil: https://www.blogger.com/profile/01283443632737330492
    code Style nya gak aktif
    • Igniel
      8/7/17
      Profil: https://www.blogger.com/profile/09199170379661896200
      Masih lancar semua kok.
  • setiadiwhe
    4/6/17
    Profil: https://www.blogger.com/profile/14135167419197459577
    maaf mau tanya kenapa saya ga bisa ya, klo saya ikutin link tutorial diatas bagian overviewnya ga keluar...
    mohon infonya kira-kira kenapa ya?
  • Urang Sunda
    6/5/17
    Profil: https://www.blogger.com/profile/00122762849910429550
    Hatur Nuhun Tutorna,, ASK barangkali ada kelanjutan buat Generate shorterner otomatis untuk file PHP..