Aug 22, 2017

Memasang Google URL Shortener Menggunakan URL Shortener API Key

URL Shortener API

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.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.