Sabtu, 01 Mei 2010

Installasi Twitter @Anywhere Pada Kotak Komentar


Penulis: ArdianZzZ | Ardianzzz.blogspot.com









Kotak komentar adalah sarana diskusi yang paling efektif. Atau paling tidak,
kotak komentar adalah salah satu tempat untuk sekedar saling sapa dan
berinteraksi. Karena pada engine blogger tidak terdapat fasilitas untuk reply
comment, kegiatan bertegur-sapa biasanya dilakukan dengan meniru Facebook atau
Twitter. Yaitu dengan menambahkan simbol “At”(@) pada awal nama. Misalnya saya
ingin membalas komentar o-om, maka saya menambahkan @oomdotcom
pada awal kalimat. Sebagai tanda bahwa tanggapan tersebut saya tujukan untuk o-om.






Kita dapat menambahkan interaktivitas kotak komentar dengan menggunakan plugn
Twitter @Anywhere. Dimana setiap kata yang diawali dengan simbol “At”(@) dapat
diconvert secara otomatis menjadi link yang menuju akun twitter yang dituju.
Sangat menarik bukan, karena dapat menambah suasana kotak komentar menjadi lebih
hidup dan interaktif.






Untuk lebih jelas, dapat dilihat pada demo page
disini.







Berikut ini adalah langkah-langkah installasi Twitter @Anywhere:




1. Masuk di @Anywhere


Sebelumnya, anda harus memiliki akun twitter terlebih dahulu. Kemudian
kunjungi
http://dev.twitter.com/anywhere











2. Daftarkan Aplikasi


Isikan segala informasi yang dibutuhkan. (Hal ini sangat mudah dan tidak
perlu penjelasan lebih)


 






3. Dapatkan API key.






 

4. Installasi



Setelah mengetahui API key, hal yang perlu dilakukan adalah dengan menambahkan
JavaScript berikut ini sebelum </head>


 

<script src="http://platform.twitter.com/anywhere.js?id=APIKey"
type="text/javascript"></script>


 

Gantilah APIKey dengan API
Key anda.


 

Beberapa fitur yang dapat digunakan adalah:


 

a. LinkifyUser


Script akan mengubah semua konten yang diawali dengan “at” simbol menjadi
link akun twitter.


 


b. Hovercards


Membuat link memunculkan tooltip yang berisi informasi tentang akun twitter.


 

Untuk melakukannya letakkan javascript berikut ini:


 

<script>

twttr.anywhere(function(twitter) {

twitter(&quot;
.comment-body&quot;).linkifyUsers();

twitter.hovercards();

});

</script>


 

Ganti huruf yang berwarna merah dengan class yang sesuai. Jika anda menggunakan
Basic Minima, maka kotak komentar memiliki class .comment-body. Jika tidak yakin
dan anda menginginkan semua konten dalam body diconvert menjadi link maka
gantilah dengan body.


 

5. Kesimpulan


Cara ini sangat mudah dilakukan dan cukup efektif untk menambah
interaktivitas pada kotak komentar. Tetapi yang perlu diperhatikan adalah, jika
kita menuliskan username yang salah maka link yang dihasilkan menjadi tidak
relevan. Misalnya saya menuliskan @oomdotcom yang
menghasilkan link menuju http://twitter.com/oomdotcom.
Tetapi jika saya menuliskan @o-om, maka link yang dihasilkan adalah
http://twitter.com/o-om yang berarti salah sasaran.





Selain kedua fitur di atas, terdapat jga fitur-fitur seperti



  • Follobutton

  • Tweet Box

  • Twitter Connenct


Untuk lebih jelasnya tentang cara penggunaannya dapat mengunjungi:

http://net.tutsplus.com


 


Profile Penulis:


ArdianZzZ adalah Seorang blogger biasa tetapi bukan blogger yang biasa-biasa saja. Sangat antusias dengan webdesain terutama pada Typography, CSS dan JavaScript.


Tidak ada komentar:

Posting Komentar