JavaScript Pemotong Token Facebook OnClick OnChange

Menjadi seorang developers/ pengembang/ sekedar coba-coba dalam pembuatan sebuah alat/ tools untuk jejaring sosial facebook memang bukan pekerjaan yang mudah. Saya sendiri perlu waktu hingga berhari-hari hanya untuk memahami bagaimana cara kerja graph API facebook hingga akhirnya terwujudlah satu demi satu alat sederhana untuk dinikmati pengguna.

Nah sebagai langkah awal, Anda disarankan menambahkan sedikit javascript ini untuk alat Anda. Ini berguna untuk memotong/ mengambil inti dari sebuah URL panjang token.

Hal ini dapat mempermudah pengguna karena tidak perlu melakukan pemotongan secara manual dan tentunya dampak positif lainnya adalah Anda akan terlihat lebih piaway dalam mengelola sebuah mesin online.

Sebagai tahap percobaan, silahkan Anda masukkan  contoh URL token berikut ke 3 bidang yang ada dibawah
https://www.facebook.com/connect/login_success.html#access_token=CAAAACZAVC6ygBAFUTuOuxQYCaK45scOZC7mAefcMfnx9zxMqqiULP7qOnFO5U8UoiNk6pAGZCZAY9sHPFUZBtKangSigitR75dGNph3pNuJOSb9h5eDGnG0vuBGLuIWXRa8h95mn4ZCm7CpcaRiR2cz3njz4koAKuCqNfYqKYZBPJkhjoo0zYZBZB83Hq4YZBsrn8PgkZD&expires_in=0







Perbedaan Onclick dengan OnChange

  1. Pada opsi OnClick, token akan terpotong secara otomatis ketika Anda mengklik bidang input itu sendiri.
  2. Pada opsi OnChange, token akan terpotong otomatis ketika Anda mengklik diluar bidang input itu sendiri.
  3. Pada opsi OnClick Button, token akan terpotong setelah Anda menekan tombol pemicu.

Bagaimana Cara Menggunakannya?

1. Silahkan simpan javascript ini dalam template blog Anda.

<script>
var khon = {
    tools: function(tokenPanjang) {
        (null == tokenPanjang || "" == tokenPanjang) && (tokenPanjang = "#token");
        var tokenTerpotong = $(tokenPanjang).val();
        tokenTerpotong.split("access_token=")[1] && (tokenTerpotong = tokenTerpotong.split("access_token=")[1].split("&")[0]), $(tokenPanjang).val(tokenTerpotong)
    }
}
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'></script>


2. Pilih salah satu HTML berikut sesuai dengan kebutuhan Anda.

Untuk OnClick
<input style="width:98%" type="text" id="token" onClick="khon.tools();this.select()"/>

Untuk OnChange
<input style="width:98%" type="text" id="token" onClick="this.select()" onChange="khon.tools()"/>

Untuk Tombol OnClick
<input style="width:90%" type="text" id="token"/>
<input style="padding:3px 10px" type="button" value="Potong" onClick="khon.tools()" />
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini