cara Membuat Google URL Shortener Dengan URL Shortener API Key

selamat malam kawan geeks kali ini saya akan membagikan tutorial dari sebuah blog legendaris, saya mendapat tutorial ini dari blog bernama kompiajaib, dan kode itu di kembangkan dari blog beben koben, yang terbukti dan tidak akan ragu untuk mempraktekannya karena tutorial yang didapat sudah teruji, url shortener sebagaimana fungsinya untuk memperpendek url, sehingga menghemat space karakter huruf, misal kita ingin share di twitter dan ternyata karakternya berlebihan, maka kita bisa menyingkatnya dengan url shortener milik google, dari tutorial dan penjelasan yang didapat tutorial ini merupakan altrenatif dari url shortener yang pernah di share blog kompi ajaib milik mas suryadi.

untuk demonya kalian bisa ke sini

dan tampilan url shortener

hasil URL SHORTENER API KEY

jika tertarik dan ingin memasangnya di blog kalian, kalian bisa mencoba mengikuti tutorial di bawah ini.

 1. simpan kode css di bawah ini di atas kode </head>

<style type='text/css'>

/*<![CDATA[*/

.shorten-box{font-size:100%;font-weight:bold;color:#666!important;margin:10px 0}

#output{display:inline-block;}

.shorten-text{display:inline-block;margin-right:5px;border:1px solid transparent;line-height:1;padding:5px 0;}

.output{display:inline-block;font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;hyphens:none;color:#000;cursor:pointer;background:#f8f8f8;border:1px solid #ccc;border-radius:3px;line-height:1;padding:5px 8px;margin:0;box-shadow: inset 0px 0px 1px rgba(0,0,0,.08);}

.output:focus,.output:active{outline:none}

.clear{clear:both}

/*]]>*/

</style>

 2. copy kode html
cari kode ini <b:includable id='post' var='post'>  dan gulung layar ke bawah dan temukan kode ini atau yang mirip dengan kode ini

<data:post.body/>

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div> 

simpan kode

<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'>Share this with short URL:</div>

<div id='output'/>

<div class='clear'/>

  </div>

</b:if>

di bawah kode </div>.

3.  membuat url API key sendiri

pada langkah ini kita membuat URL Shortener API key sendiri supaya code ini berjalan di blog, untuk tutorialnya silahkan cek SINI.
jika tutorial sudah diikuti dengan benar, maka kita mendapat URL SHORTENER API KEY yang benar, dan catat API KEY yang di buat tadi.

4. copy paste kode javascript

copy dan paste kode javascript di bawah ini di atas kode </body>

<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('XXXXXXXXXXXXXXXXXXXXXXXXXXXXX');

    gapi.client.load('urlshortener', 'v1', function() {

        document.getElementById("output").innerHTML = makeShort();

    });

}

window.onload = load;

//]]>

</script>

</b:if>

ganti kode

XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

dengan kode URL SHORTERNER API KEY yang telah di buat pada langkah ketiga tadi, jika sudah dan simpan.

selesai, semoga sukses

sumber :

http://www.kompiajaib.com/2016/03/alternative-lain-membuat-google-url.html

http://beben-koben.blogspot.com/2013/06/add-google-url-shortener-api-for-blogger.html
http://hayageek.com/google-url-shortener-api/