Memasang Google URL Shortener Menggunakan URL Shortener API Key

Ada banyak cara bantu-membantu memudahkan pengunjung blog untuk membantu share postingan yang disukainya, cara yang paling umum yaitu disediakannya oleh si pengelola blog yaitu tombol sosial sharing yang cara pemasangannya sudah banyak kita bahas sebelumnya di blog ini. Di postingan kali ini kita akan membahas masih seputar tombol share namun sedikit berbeda dari umumnya, disini akan kita tambahkan tombol sharing berupa Google Url Shortener dimana salah satu fungsi Google Url Shortener untuk memperpendek alamat url menjadi singkat, pastinya akan memudahkan pengunjung nantinya. 

Pemasangan Google URL Shortener ini cukup mudah kita hanya menambahkan sedikit arahan dan ada beberapa juga yang di modifikasi alasannya yaitu aku sesuaikan supaya lebih memudahkan dalam penggunannya, kemudian Pemasanngan Google Url Shortener ini juga menggunakan Url Shortener API Key dari Google juga yang fungsinya nanti akan otomatis terbentuk Url Shortener disetiap Postingan yang ditampilkan pada Blog.

Bagi teman yang mau mencobanya mari kita simak dan ikuti langkah pemaasangannya dibawah ini, Cara Memasang Google URL Shortener Menggunakan URL Shortener API Key.

Sebelum memulai ada baiknya daftar dahulu untuk URL Shortener API Key, untuk caranya dapat teman lihat DISINI.

Langkah Pertama

Silahkan salin arahan CSS dibawah ini lalu letakkan 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>

Langkah Ke Dua
Silahkan cari arahan <b:includable id='post' var='post'> lalu geser sedikit kebawah akan terlihat arahan ini atau ibarat mirip dibawah ini.

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

Setelah ketemu silahkan salin arahan dibawah ini lalu letakkan sempurna dibawah 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>

Langkah Ke Tiga
Silahkan salin arahan Javascript dibawah ini lalu letakkan diatas 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>

Perhatikan arahan xxxxxxxxx yang ditandai silahkan ganti dengan arahan yang didapat dari pembuatan API Key diatas tadi. Silahkan SAVE dan selesai, selamat mencoba.