Memasang Google URL Shortener Menggunakan URL Shortener API Key

Ada banyak cara sebenarnya memudahkan pengunjung blog untuk membantu share postingan yang disukainya, cara yang paling umum adalah disediakannya oleh si pengelola blog adalah 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 kode dan ada beberapa juga yang di modifikasi karena saya sesuaikan agar 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 sobat 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 sobat lihat DISINI.

Langkah Pertama

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

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

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

Setelah ketemu silahkan salin kode dibawah ini lalu letakkan tepat dibawah kode </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 kode Javascript dibawah ini lalu letakkan diatas 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>

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