Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

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.

89 komentar:

  1. Wisnu1/5/10

    Mantap mas, yang penting pertamax ahh...

    BalasHapus
  2. hemmmm... nambah lagi pengetahuannya

    BalasHapus
  3. Langsung dicoba

    BalasHapus
  4. wew, boleh juga nih infonya, masih anget dan baru nih... cobain ah di blogspot saya, makasih gan infonya mantap banget~!

    BalasHapus
  5. Sudah dicoba dan berhasil, makasih banyak atas infonya keren abis deh... :D Keep work!

    BalasHapus
  6. Makasih infonya om. Keren.

    BalasHapus
  7. Akhirnya artikel ini muncul juga, mantab ko ardianzZzzZz

    sistem kerjanya hampir sama seperti sistem komentar yang pake reply ya, kendala utamanya tetap kita harus mengidentifikasi acc twitternya dulu.

    hmmm semoga makin maju deh sistem komentar di blogger ;)

    BalasHapus
  8. keren nih tipsnya..langsung praktek deh..

    BalasHapus
  9. Wah.. Agan ardianzzz lagi.. emank paling kreatif an lain dari yang lain agan yang satu ini.. 5 jempol gan buat u..

    BalasHapus
  10. Info baru dan gress nih Om langsung di coba deh, salam sejahtera aja ya Om

    BalasHapus
  11. ada semacam plugin nya ga om?

    BalasHapus
  12. nunggu web yg buka open sourcenya aja ah...hihihihi
    diliad-liad web2 jejaring sdh pd ngelakuin...hohohoho

    BalasHapus
  13. hmmm....twitter cakalan tambah digandrungin nih....layanan micro blogging yang satu ini emang yahud hehehe. Thank infonya

    BalasHapus
  14. Ma kasih infonya,,, tambah pengetahuan

    BalasHapus
  15. Mantap Oom... Langsung dicoba nich...

    BalasHapus
  16. Wah...tips yang bagus neh...

    BalasHapus
  17. tipsnya boleh dicoba ni,,,

    BalasHapus
  18. Kalau diarahkan ke acount facebook bisa gak?

    BalasHapus
  19. wah...mantap infonya... thanks..

    BalasHapus
  20. terima kasih atas tipsnya oom...

    BalasHapus
  21. thx infonya...
    o-om gak ada SM ya??

    BalasHapus
  22. Good posting om langsung tak coba :D

    BalasHapus
  23. nice info, tenkyu Gan :D :D :D

    BalasHapus
  24. Wah, artikel yang bagus langsung coba praktekan dulu ah. :D

    BalasHapus
  25. asyiik
    ijin coba ya om

    BalasHapus
  26. aku ikutan ya om, thanks ..

    BalasHapus
  27. Langsung ikut praktek dlu ahh..

    BalasHapus
  28. bang adhie3/5/10

    mau coba juga nih Om, trims ya....

    BalasHapus
  29. Buat yang tertarik mencoba....

    Salam hangat oom... thanks ;;)

    BalasHapus
  30. klo pake akun facebook g bs y...?

    BalasHapus
  31. Wah, bagus nih tipsnya.

    BalasHapus
  32. Assalamuallaikum om . . .
    Saya Damar, baru lulus dari SMA, . . .saya baru nih dalam dunia blog2an (sekitar2-3 bulanan). . .JIka Om berkenan mengajari saya, saya pengen deh . . .ikutin blog o-om nih terus . . .

    saya mau nanya Om, gimana siih cara buat gambat O-om yg ada di header itu lho . . . tak liat2 kok bagus ya . . .bisa bergerak lagi . . .

    liat ke blog-ku ya om . . .

    BalasHapus
  33. :) eh . . .ini ketinggalan emoticon-nya . . . . .he

    BalasHapus
  34. salam sahabat
    makasih infonya om dan ardian
    kendala utamanya tetap kita harus mengidentifikasi acc twitternya dulu.

    BalasHapus
  35. pErtamax mas ... sip dah :| www.masrendra.info

    BalasHapus
  36. terima kasih yach.. :D
    Optimalisasi twitter neh :D

    BalasHapus
  37. wihh.. makin banyak fasilitas yang bisa kita gunakan untuk keperluan blog, makin bersemangat neh belajar ngeblog... makasih banget Om

    BalasHapus
  38. Boleh juga nih buat nambah pernak-pernik blog gw lansung ke TKP.

    Bagi sobat semuanya nyok ikutan kontes seo dan dapatkan hadiah Fantastis total 14 Juta Rupiah. Biar tambah semarak langsung aja menuju kontes seo :X

    BalasHapus
  39. Thank infonya mas o-om. D'show

    BalasHapus
  40. keren-keren artikelnya bos

    BalasHapus
  41. Keren bagnet tutornya..coba ah...

    BalasHapus
  42. keren om, thansk sharingnya..

    BalasHapus
  43. MAsih bingung..Btw thanks infonya

    BalasHapus
  44. langsung di coba saja sobat..
    keren pastinya :D

    BalasHapus
  45. Om, mau tanya. kenapa link ke blog saya malah masuk ke linkxc.com? Mohon bantuannya.
    Nuhun......

    BalasHapus
  46. terima kasih tipsnya gan..sangat bermanfaat

    BalasHapus
  47. Beuh..oke nih Om infonya.
    Boleh dipraktekin.
    Makasih :)

    BalasHapus
  48. keren mas tutornya...ta' cobain ah

    BalasHapus
  49. Mantab banget tutornya..terimakasih ya bos...

    BalasHapus
  50. Oh,your blog is very nice .I really like it ^^!

    ..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥.
    ♥..♥  ╔══╦══╗╔╦══╗  ♥..♥
    ♥..♥  ╚═╗║╔╗║║║╔╗║  ♥..♥
    ♥..♥  ╔═╝║║║║║║║║║  ♥..♥
    ♥..♥  ║╔═╣║║║║║║║║  ♥..♥
    ♥..♥  ║╚═╣╚╝║║║╚╝║  ♥..♥
    ♥..♥  ╚══╩══╝╚╩══╝  ♥..♥
    ♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥♥..♥


    ----------------------------------
    Welcome to my websites :
    Desktop Wallpaper
    Theme for Desktop
    Theme for Mobile
    Theme for Media

    BalasHapus
  51. Wah, bisa-bisa malah jadi ajang curcol tuh blognya, tapi tetep aja ini sangat bagus :)

    BalasHapus
  52. Tips yang sangat briliant bung,

    BalasHapus
  53. @f4nz77 test...123

    BalasHapus
  54. ko o-om ga pake plugin ini? :D

    BalasHapus
  55. Infonya boleh jg ne om, thanks ya jd nambah ilmu baru dech. isi komentarnya jg penting dunk!!!!!

    BalasHapus
  56. numpang baca2 pak,,,itung2 nambah ilmu. coba bapak lihat http://www.risacomputers.co.cc/ kira2 apa lagi yang kurang

    BalasHapus
  57. =)) @TeofilusCandra

    BalasHapus
  58. http://wwwtausiahustadzcom.blogspot.com

    BalasHapus
  59. PREmiUm ... EH salAH, PErTAMAx LEbIh OKe

    ARMStrOng_ProDuct@yahOo.co.iD

    BalasHapus
  60. wah mantap nih infonya, bisa di coba nih, lumayan jd tambah2in pengetahuan. thanks Rokok Herbal

    BalasHapus
  61. terima kasih banget infonya....
    kumpulan artikel anda sangat berguna bagi saya sbgai pemula.....
    boleh apa tidak saya memposting artikel2 anda di blog saya......?
    terima kasih, sukses selalu untuk anda

    BalasHapus
  62. saya mahu mencobanya di blog saya :)

    BalasHapus
  63. Ada efek ke SEO gak mas kalau pasang widget kaya gitu?

    BalasHapus
  64. ini ky kumpulan social bookmark ya om ??? tak coba dl oom kynya bgs neh ...

    BalasHapus
  65. boleh juga neh featured nya, tak coba dulu om ...

    BalasHapus
  66. tip yang mantap, harus segera dicoba :D

    BalasHapus
  67. wah ini yang saya cari-cari...thank's ya Om...
    nanti saya coba

    BalasHapus
  68. featured yang bagus di, dicoba ah. thanks

    BalasHapus
  69. langsung dicoba bos :)

    BalasHapus
  70. mantap om...thanks om...
    saranya om selalu cemerlang dan selalu berhasil...thanks lagi deh...

    BalasHapus
  71. Mau buat account twitter dulu. soalnya belum punya akun twitter.

    BalasHapus
  72. @oomdotcom tes dulu oom...

    BalasHapus
  73. blog oom gak isi ya.. wah sia sia tadi ane isi @oomdotcom

    BalasHapus
  74. Bagus banget artikelnya, mas. ijin bookmark

    BalasHapus
  75. sangat membantu sekali tutorialnya..
    Terima kasih

    BalasHapus
  76. Mantep Oom..hehehe :)

    BalasHapus
  77. saya coba, thanks for the tutor

    BalasHapus
  78. ane nggak suka neko-neko....,,yang penting seonya bener, dan pengunjung melimpah rua kayak air...
    itu udah cukup buat ane
    top lyrics | song lyrics |music lyrics

    BalasHapus
  79. Nice Info gan.....

    BalasHapus
  80. Wah tapi terlalu memberatkan loading kali ya om! :D Saya sih pakai yang standar aja lah, biar gak terlalu banyak script juga.. :)

    BalasHapus


 

Back to Top