Alternative Lain Menciptakan Google Url Shortener Dengan Url Shortener Api Key

Pada postingan sebelumnya, kita menciptakan Google URL Shortener dengan menggunakan urltinyfy javascript API, nah sekarang kita akan mencoba menciptakan Google URL Shortener dengan memakai URL Shortener API key akun kita sendiri.

Sebenarnya saya menemukan ini sudah cukup usang dari blog kang +Beben Koben namun masih terkendala dalam menciptakan URL Shortener API key. Namun balasannya kemarin saya menemukan tutorial yang pas untuk mendapat URL Shortener API key sehingga berhasil menciptakan Google URL Shortener.

Kemudian saya sedikit memodifikasi tampilannya dengan menghilangkan tombol show hide onclick sehingga short URL akan pribadi tampil dan menambahkan select text dengan klik pada short URL untuk memudahkan meng-copy short URL. Juga menambahan asynchronous pada Google client.js semoga tidak menyebabkan blocking render js di blog. Untuk demo silahkan lihat pada link di bawah ini, silahkan lihat pada bab bawah postingan.

DEMO

Nah bagi yang ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama
Silahkan simpan arahan CSS di bawah ini di atas arahan </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. Langkah Kedua
Silahkan copy arahan HTML di bawah ini dan simpan di bawah postingan blog. Silahkan cari arahan ini <b:includable id='post' var='post'> lalu gulung layar ke bawah dan temukan arahan di bawah ini atau yang menyerupai mirip di bawah ini.

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

Silahkan simpan arahan di bawah ini di bawah arahan di atas (di bawah arahan </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'>Share this with short URL:</div>
 <div id='output'/>
 <div class='clear'/>
   </div>
 </b:if>

3. Langkah Ketiga
Pada langkah ini kita harus menciptakan URL Shortener API key sendiri semoga short URL sanggup berjalan di blog. Untuk menciptakan URL Shortener API key, silahkan ikuti tutorialnya DI SINI. Jika Anda mengikuti tutorialnya dengan benar, maka Anda akan mendapat URL Shortener API key yang benar lalu silahkan catat API key yang Anda dapatkan.

4. Langkah Keempat
Silahkan copy javascript di bawah ini dan simpan di atas arahan </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>

Silahkan ganti arahan XXXXXXXXXXXXXXXXXXXXXXXXXXXXX di atas dengan URL Shortener API key Anda sendiri yang tadi Anda buat pada Langkah Ketiga.

Selesai... selamat mencoba....

Sumber:
https://komporajaibku.blogspot.com//search?q=membuat-google-url-shortener-untuk
http://hayageek.com/google-url-shortener-api/


Sumber https://www.kompiajaib.com/

Share this post