Ditulis oleh: Ditulis pada: 3/24/2016
Pada postingan sebelumnya, kita membuat Google URL Shortener dengan menggunakan urltinyfy javascript API, nah kini kita akan mencoba membuat Google URL Shortener dengan menggunakan URL Shortener API key akun kita sendiri.Sebenarnya saya menemukan ini sudah cukup lama dari blog kang +Beben Koben namun masih terkendala dalam membuat URL Shortener API key. Namun akhirnya kemarin saya menemukan tutorial yang pas untuk mendapatkan URL Shortener API key sehingga berhasil membuat Google URL Shortener.
Kemudian saya sedikit memodifikasi tampilannya dengan menghilangkan tombol show hide onclick sehingga short URL akan langsung tampil dan menambahkan select text dengan klik pada short URL untuk memudahkan meng-copy short URL. Juga menambahan asynchronous pada Google client.js agar tidak menyebabkan blocking render js di blog. Untuk demo silahkan lihat pada link di bawah ini, silahkan lihat pada bagian bawah postingan.
Nah bagi yang ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
1. Langkah Pertama
Silahkan 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. Langkah Kedua
Silahkan copy kode HTML di bawah ini dan simpan di bawah postingan blog. Silahkan cari kode ini
<b:includable id='post' var='post'> kemudian gulung layar ke bawah dan temukan kode di bawah ini atau yang mirip seperti di bawah ini.
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Silahkan simpan kode di bawah ini di bawah kode di atas (di bawah kode
</div>).
<b:if cond='data:blog.pageType == "item"'>
<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 membuat URL Shortener API key sendiri agar short URL dapat berjalan di blog. Untuk membuat 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 kemudian silahkan catat API key yang Anda dapatkan.
4. Langkah Keempat
Silahkan copy javascript di bawah ini dan simpan di atas kode
</body>
<b:if cond='data:blog.pageType == "item"'>
<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("selectAll",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 kode
XXXXXXXXXXXXXXXXXXXXXXXXXXXXX di atas dengan URL Shortener API key Anda sendiri yang tadi Anda buat pada Langkah Ketiga.Selesai... selamat mencoba....
Sumber:
http://beben-koben.blogspot.com/2013/06/add-google-url-shortener-api-for-blogger.html
http://hayageek.com/google-url-shortener-api/