[Tutorial] Memasang Twitter @Anywhere Pada Blog


15 Mac lepas, Twitter telah melancarkan satu platform baru yang dikenali sebagai @anywhere. Pada mulanya, platform ini dilancarkan ke laman digg, Yahoo!, Bing, Youtube dan lain-lain. Platform baru ini berintegrasi dengan twitter ke laman blog/web dengan menggunakan beberapa baris JavaScript. Oleh itu, ia membantu korang untuk menambah tweet, trafik, follower dan pengguna. Sekarang, korang boleh menggunakan Twitter @anywhere pada blog korang dengan memasang Tweet Box. Ia akan menjadikan tweet yang dihantar akan ditukarkan ke username @Piratz. Selain dari Tweet Box, pengunjung blog korang akan dapat menglihat satu hover box berserta follow button dan maklumat twitter korang. Contoh : Dekatkan mouse pada perkataan @Piratz. Satu lagi fungsi adalah twitter button seperti yang terdapat pada bahagian sidebar.

Langkah 1 : Daftar API
Sebelum menggunakan @anywhere, korang mestilah mendapatkan API untuk blog korang. Dapatkan API disini. Sebaik sahaja korang klik pada link tersebut, korang perlu mengisi maklumat seperti berikut.


Klik pada gambar untuk paparan lebih jelas

Selepas anda mendaftar, anda akan menerima key API tersebut. Kemudian, korang perlu memastikan adalah bahawa permission level ditetapkan kepada Read and Write, jika tidak pengguna tidak akan dapat klik butang follow.

Untuk mengubahnya, klik pada link http://twitter.com/oauth. Pada halaman ini, korang akan melihat aplikasi yang didaftar oleh korang. Klik pada aplikasi tersebut, dan harus membawa ke halaman application details. Klik pasa butang "Edit Application Settings" dan korang perlu scroll kebawah sehingga ke kolum yang berlabel "Default Access type". Tukar ke “Read & Write”.

Langkah 2 : Memasang Pada Blog
Kerana platform Twitter @Anywhere ini mempunyai banyak fungsi yang boleh digunakan, aku akan menerangkannya satu persatu.

Pengguna Blogger sila masukkan code diatas </head>. Lokasi : Layout > Edit HTML
<script src="http://platform.twitter.com/anywhere.js?id=APIKeyDiSini" type="text/javascript"></script>


Pengguna Wordpress, sila masukkan pada bahagian header.php (<head> diantara dua code ini </head>)
<script src="http://platform.twitter.com/anywhere.js?id=APIKeyDiSini&v=1" type="text/javascript"></script>


Fungsi-Fungsi @Anywhere

1. Auto-Link Semua Twitter Username

Fungsi ini akan membuat auto-link pada semua username twitter dibahagian post dan comment. Ia akan berfungsi apabila korang menulis username twitter berformat seperti : @piratz (Secara automatik ia akan membuat link ke akaun twitter). Masukkan code dibawah selepas code API Key.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.linkifyUsers();
};
</script>


2. Auto-Link Semua Twitter username dengan Hovercard



Contoh Hovercard seperti gambar diatas. Fungsi ini auto-link semua twitter username yang ditemui, dan juga menyediakan hovercard apabila mouseover pada username tersebut. Contoh : @Piratz. Dekatkan mouse pada @Piratz. Jika pengunjung blog menekan butang follow, maka dengan automatik mereka follow korang di twitter. Masukkan code dibawah selepas code API Key.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.hovercards();
};
</script>


3. Smart Follow Button




Smart mengikuti butang membolehkan pengunjung follow akaun twitter terus dari blog korang. Korang boleh membuat button tersebut dimana sahaja bahagian blog yang korang mahu. Lihat contoh di atas:

Masukkan code dibawah selepas code API Key. Tukar perkataan Piratz ke Usename Twitter Korang.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter('#follow-piratz').followButton("piratz");
};
</script>


Kemudian, masukkan code dibawah pada lokasi/bahagian blog yang korang suka. Tukar perkataan Piratz ke Usename Twitter Korang.
<div id="follow-piratz"></div>


4. Live Tweet Box Pada Blog




Korang boleh membuat tempat menghantar tweet di blog korang yang akan membolehkan pengunjung untuk terus tweet daripada blog korang tanpa perlu ke Twitter/menggunakan sebarang aplikasi. Sebagai contoh seperti diatas: (Peringatan!! Jika korang menekan button tweet, ia akan terus ke dihantar ke twitter sebagai tweet secara automatik). Seperti arahan-arahan diatas, masukkan code dibawah selepas code API Key.
<script type="text/javascript">
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter("#custom-tweetbox").tweetBox({
label: "Live Tweet Box:",
defaultContent: "Type Your Tweet Here",
height: 50,
width: 480,
});
};
</script>


Korang boleh mengubah height dan width mengikut saiz yang korang suka. Selain itu, perkataan yang akan muncul didalam box tersebut boleh diubah dengan menggantikan "Type Your Tweet Here".

Masukkan code dibawah pada bahagian yang korang mahu tweet box berada.
<div id="custom-tweetbox"></div>


Bagi pengguna Wordpress, terdapat juga plugin yang boleh membuat Auto-link Hovercard. Tetapi membuat secara manual lebih mencabar dan memberi kepuasan.

Sumber :
Twitter Anywhere Documentation
Simple Twitter Connect Plugin
Wpbeginner

p/s : Kalau boleh, retweet la entri ini ke Twitter dan hantarkan komen/feedback bersama twitter username korang (kalau ada). Diingatkan : @piratz adalah cara yang betul untuk membuat auto-link twitter korang disini. Sekian

10 Comments

  1. oo kalo camnie , kacang jela .. ok2 aku nk try yer

    ReplyDelete
  2. bagus ahh.. tp aku tanak letak icon follow..

    ReplyDelete
  3. okay this is interesting.. but i dont really fully understand what it is for.. but im guessing that it's for those websites that uses twitter right? =)

    ReplyDelete
  4. Wordpress dah ada plugin. Senang la camni hehe

    ReplyDelete
  5. perrggh..menarik..cool la bro..aku dh lame tgu entri mcm nih

    ReplyDelete
Previous Post Next Post