Membuat Short URL Otomatis Dengan Google API

Bahasa kerennya sih Auto Generate Short URL. Bedanya dengan yang biasa, short URL ini otomatis ter-generate. Dia benar-benar akan tercipta otomatis begitu postingan baru dibuat. Lumayan menghemat waktu kan? Make your life easier. auto generate short link, auto generate short URL, membuat URL shortener, membuat link shortener, membuat short URL sendiri, membuat short link sendiri, memendekkan URL, memendekkan link, memendekkan alamat link, membuat URL menjadi pendek, membuat link menjadi pendek, cara mendapatkan google api, cara mendapatkan kode api google, tips trik blog, Tips Blogger, Tips Blogspot, Tips Trik Blog Tutorial Blog, trik blog, tutorial blogger, Tutorial Blogging, Tutorial Blogspot
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.
14
Membuat Short URL Otomatis Dengan Google API
Membuat Short URL Otomatis Dengan Google API
Bahasa kerennya sih Auto Generate Short URL. Bedanya dengan yang biasa, short URL ini otomatis ter-generate. Dia benar-benar akan tercipta otomatis begitu postingan baru dibuat. Lumayan menghemat waktu kan? Make your life easier. auto generate short link, auto generate short URL, membuat URL shortener, membuat link shortener, membuat short URL sendiri, membuat short link sendiri, memendekkan URL, memendekkan link, memendekkan alamat link, membuat URL menjadi pendek, membuat link menjadi pendek, cara mendapatkan google api, cara mendapatkan kode api google, tips trik blog, Tips Blogger, Tips Blogspot, Tips Trik Blog Tutorial Blog, trik blog, tutorial blogger, Tutorial Blogging, Tutorial Blogspot
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

14 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Calvin_IT
    16 November, 2022
    Profil: https://www.blogger.com/profile/17875494573512297119
    udah beda tampilan di google cloudnya. jadi ga relevan lagi tutornya
  • ADMIN PK
    16 Desember, 2020
    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
    07 Mei, 2018
    Profil: https://www.blogger.com/profile/04524106668075079373
    Wah tampilan situs API nya agak beda, jadi susah nerapinnya
  • Altgo
    18 Februari, 2018
    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 Januari, 2018
    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 Januari, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mungkin scriptnya kamu simpen didalam tag kondisional. Cek lagi dan simpen scriptnya diluar tag kondisional.
  • Dwi Purwanto
    02 November, 2017
    Profil: https://www.blogger.com/profile/11685515579416885105
    Dicoba ah
  • Unknown
    08 Oktober, 2017
    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
    02 Agustus, 2017
    Profil: https://www.blogger.com/profile/14131858090765235443
    Kok ga muncul ya gan short url nya di blog saya ?
    • Igniel
      02 Agustus, 2017
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mungkin ada langkah yang terlewat. Coba lagi aja kak.
  • Khoirul Rizky F
    08 Juli, 2017
    Profil: https://www.blogger.com/profile/01283443632737330492
    code Style nya gak aktif
  • setiadiwhe
    04 Juni, 2017
    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
    06 Mei, 2017
    Profil: https://www.blogger.com/profile/00122762849910429550
    Hatur Nuhun Tutorna,, ASK barangkali ada kelanjutan buat Generate shorterner otomatis untuk file PHP..