Membuat Bit.ly Short URL dengan jQuery & Ajax

Sekarang ini sudah banyak aplikasi web yang dibuat untuk memudahkan kita menyingkat suatu URL website. Layanan short URL ini biasa digunakan dalam situs jejaring sosial seperti Twitter. Alasannya karena lebih praktis dan tentu saja menghemat jumlah karakter. Salah satu website yang menyediakan layanan short URL adalah Bit.ly. Nah, pada postingan kali ini kita akan belajar membuat short URL sendiri dengan menggunakan jQuery dan AJAX.

Langkah pertama untuk membuat aplikasi sederhana ini adalah membuat account di bit.ly. Setelah itu nanti kita akan mendapatkan username dan API key. Selanjutnya buat sebuah file HTML yang isinya sebagai berikut.


Kode berikut ini digunakan untuk memanggil dan menggenerate fungsi bit_url, dimana #short adalah nama id pada tombol submit. Sedangkan #url adalah nama id pada kotak input nilai.
$("#short").click(function(){
var url=$("#url").val();
...
...
}
Sedangkan kode yang digunakan untuk menampilkan hasil short url dari URL yang kita inputkan yaitu sebagai berikut. Dimana #result merupakan nama id dari tag <div> di kode HTML-nya.
$("#result").html('<a href="'+bit_url+'" target="_blank">'+bit_url+'</a>');
Selamat mencoba dan semoga bermanfaat.
 

Source: http://www.9lessons.info/

15 Comment:

situsonline said...

Apakah ada keuntungan kita kl mengshort url itu mas..?

holichaxor said...

prinsip kerjanya sama seperti adf.ly ya gan

Ahmad Fikry said...

situsonline: salah satu kegunaanya untuk menyingkat URL di twitter yang memang terbatas 140 karakter.

holichaxor: yap bener, tp kalo di bit.ly gak bisa ngehasilin $_$

saleh said...

TUKARAN LINK YUK LINK KAMU SUDAH SAYA PASANG DI BLOG AKU,,,,,,,,,

Eloktavian said...

Kalo tanpa API bit.ly bisa gag gan?

baju tanah abang said...

numpang mampir...salam kenal...

Sembunyi said...

Ijin ikutan praktek dulu ah. mau belajar short url nih :)

Ahmad Fikry said...

Eloktavian: gak bisa gan..

baju tabah abang:salam kenal juga :)

Sembunyi: monggo, silakan..

Bazz said...

gan, mau nanya nih..
itu kan hasilnya bit.ly/blabla...
bisa kan kalo hasil shortnya di ganti..
misal domainku.com/blabla..?

herry siomponk said...

di blog saya ada itu gan, setiap postingan ada shortURL nya...
Tapi aku makenya bukan pake cara ini gan...

Latest Ipod said...

Aduh gan.. puyeng nih mau bikin....
Langsung download sourcenya aja dah....
:capedes

Forum Flasher Center said...

mantap nich ikut coba ya...

Ahmad Fikry said...

Bazz : gak bisa gan. Kalo membuat short url pake domain sendiri bisa.. Tapi saya belum pernah nyoba. Googling aja, banyak tutorialnya kok gan..

ng said...

makasih gan tutornya
btw nanggepin komentar diatas bisa ok gan pake domain sendiri tapi tetep gnain fitur bit.ly
masukin aja domain agan di bagian seting bit.ly jadi ntar tiap mendekin url keluarnya pake domain agan
CMIIW

Kita Kemana said...

nice share gan, izin coba yah :)

Post a Comment