Widget Update via Twitter

Twitter merupakan jejaring sosial yang menawarkan fitur microblog (posting pendek, kurang dari 200 karakter) yang memungkinkan penggunanya untuk mengirim & membaca pesan (tweets). Pengguna dapat menulis pesan berdasarkan topik dengan menggunakan ‘hashtags’ (#). Sedangkan untuk menyebutkan atau membalas pesan dari pengguna lain bisa menggunakan tanda ‘at’ (@).

Sekarang, bagaimana cara memasang widget “update via twitter” dalam blog? Anda dapat melakukannya melalui dua cara, otomatis atau manual. Ketika Anda memilih “otomatis”, maka yang perlu Anda lakukan adalah mengunjungi situs Twitter Resources & dibutuhkan beberapa kostumasi, agar widget yang Anda inginkan tampil maksimal dalam blog.

Apabila Anda memilih “manual”, maka terdapat beberapa langkah yang harus dipenuhi.

  • Download atau copypaste script blogger.js melalui situs resminya, yang tampak seperti di bawah ini:
    function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push("<li><span>"+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};
    Script di atas sudah dikompres melalui Yui Compressor. Anda pun bisa menambah & memodifikasi kode yang berwarna merah, contoh: <span> menjadi <span style="color:#333333; font-size:1em;"> dan sebagainya.
  • Simpan script tersebut dalam situs layanan penyimpanan file Anda, seperti: Google Code atau simpan dalam media penyimpanan Anda.
  • Twitter menyediakan beberapa script yang bisa kita manfaatkan menjadi widget, antara lain:
    User Timeline
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>
    Public Timeline
    <script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&amp;count=5"></script>
    User Favorite
    <script type="text/javascript" src="http://twitter.com/favorites/username.json?callback=twitterCallback2&amp;count=5"></script>
    User Search
    <script type="text/javascript" src="http://search.twitter.com/search.json?tag=jython&from=username&rpp=5&callback=twitterCallback2"></script>
    Silakan ganti kode yang berwarna merah dengan username Anda.
  • Misalnya, Anda ingin memasang user timeline maka yang Anda lakukan adalah menambahkan kode berikut dalam “Add/tambah gadget” blogger:
    <div id="twitter_div">
    <ul id="twitter_update_list">
    </ul>
    <p>@<a href="###" title="Follow me">username</a> on Twitter</p>
    </div>
    <script type='text/javascript'>
    //<![CDATA[
    function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};
    //]]>
    </script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>
    atau
    <div id="twitter_div">
    <ul id="twitter_update_list">
    </ul>
    <p>@<a href="###" title="Follow me">username</a> on Twitter</p>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>
    Ganti kode yang berwarna merah dengan alamat twitter & username Anda.
  • Sekarang bandingkan widget timeline Anda tersebut dengan akun profil timeline Anda di Twitter

Update (30 Oktober 2012) — Kode Widget Twitter Update di atas mungkin tidak dapat digunakan lagi, pihak pengembang Twitter telah menyediakan widget tersebut pada Create and manage your widgets dalam akun tiap pengguna Twitter. Sebagai tambahan, setelah membuat widget tersebut diharapkan tidak menghapusnya. Oleh karena sangat dimungkinkan script yang digunakan juga tidak dapat menampilkan pembaharuan timeline melalui Twitter.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Demo tampilan widget “timeline via twitter” dapat Anda lihat pada posting widget update.

@Optimasi_Blog on Twitter

39 komentar untuk “Widget Update via Twitter”

  1. Terima kasih atas artikelnya yang sangat bermanfaat buat saya, ditunggu artikel-artikel bermutu lainnya........

    Jasa pindahan

    BalasHapus
  2. Thank's Informasinya yg amat sangat detail, sehingga dirasa tidak akan kesulitan untuk mencobanya !
    Selamat Berkarya bro....

    BalasHapus
  3. Makasih Neh Mas Tips update twitternya, berguna neh bagi yang membutuhkan...

    BalasHapus
  4. Thanks, tapi kayaknya saya ga butuh deh, cuma berat-beratin loading blog, lagipula ga lama lagi juga Twitter bakal redup

    BalasHapus
  5. jarang twitteran aneh.. hihi
    cuma di link kan saja ke twitt kalo mau update status, :P

    BalasHapus
  6. Kapan templatenya bakal di rilis, secepetnya dong

    BalasHapus
  7. menarik sekali untuk dicoba secara optimal!

    BalasHapus
  8. Thanks infonya gan, dan jangan lupa berkunjung ke blogku juga yah, kebetulan sedang ada kontes sticker islami, gratis kok.

    BalasHapus
  9. Makasih gan atas penjelasannya. Lain waktu blogwalking lagi ke sini.

    BalasHapus
  10. Kunjungi balik ke web Charis ya!

    BalasHapus
  11. makasih Informasih nya....n tutorialnya...
    kucoba ah..

    BalasHapus
  12. thanks inponya gan..bermanfaat sekali
    http://sharetelekomunikasi.blogspot.com

    BalasHapus
  13. terus terang saja, kalau twiter ane belum ngarti jg berbeda dengan FB, tp terima kasih gan atas infonya

    BalasHapus
  14. Info yang sangat menarik saudara ... Mari bentuk persaudaraan

    Yuk kita sama-sama Tambah wawasan dari SEO backlink

    Liat Daftar Blog Dofollow Comment 2011 :

    http://ilmunyata.blogspot.com/2011/05/liat-daftar-blog-dofollow-2011.html

    BalasHapus
  15. Salam kenal ya kawand,,, thxz infonya

    BalasHapus
  16. Keep blogging, smuga berguna ilmunya

    BalasHapus
  17. Happy blogging kawand, smuga menambah persaudaraan

    BalasHapus
  18. Thanks infonya sob, sungguh sangat bermanfaat...

    BalasHapus
  19. Thanks Your Share Informations And Tutorial...
    greetings good luck always

    BalasHapus
  20. wah makasih banget infonya..nih

    BalasHapus
  21. masih bingung, belum mengerti

    BalasHapus
  22. langsung Ke TKP AH...semoga sukses sluu y

    BalasHapus
  23. Infonya bermanfaat banget. thanks
    http://caramembuatblog.info

    BalasHapus
  24. thanks Your Share Informations N Tutorial greetings good luck always

    BalasHapus
  25. wah makin exsis aja nih..

    BalasHapus
  26. wihhh... makin mantap aj postingannya gan !!

    BalasHapus
  27. mantapp nih infonya.
    mksii gan !!

    BalasHapus
  28. mice artikel. langsung di coba nih!

    BalasHapus
  29. thanx y gan atasi informasinya...
    maaf saya org awam,, kgx ngerti yang gtuan,, hehe,,,
    v mw coba ahh

    BalasHapus
  30. aduh saya kurang paham soal twitter gtu,, ahh ribet banget apalagi singkatan2 gtu,, haduh... kgx ngerti ahh

    BalasHapus
  31. saya kurang paham soal twitter,, saya pkir sii apa banget.. pusing ahh,, ribet... apalagi singkatan2 gtu yang ada d twiit,, kgx ngerti sya...

    BalasHapus
  32. good post...
    makasih y gan atas informasinya....

    BalasHapus
  33. menarik juga nie artikel... makasih y info'y...

    BalasHapus