Embed Tweet di WordPress.com

Setelah kemarin bahas lagu lagi lagu lagi, hari ini saya akan membahas tentang bagaimana cara menampilkan tweet tertentu di WordPress. Hal ini terinspirasi dari berita-berita online masa kini, yang kadang sumbernya dari Twitter. Canggih banget sih, tweet aja bisa jadi berita. 

Tapi ya udah lah, let’s not talk about the background story. Yang jelas, saya penasaran, bisa nggak sih, di WordPress yang gratisan ini nampilin kayak gitu. Kalo bisa, gimana caranya? Oh iya, yang saya maksudkan adalah individual tweet ya, bukan twitter widget yang biasa muncul di sidebar. 

Setelah membaca panduan dan mencoba, saya menemukan bahwa kita bisa menampilkan tweet di tulisan kita dengan beberapa alternatif berikut. 

Disclaimer: Mohon maaf jika tweet yang ditampilkan di sini isinya penting banget

Cara #1:
Copas (copy-paste)  kode yang disediakan oleh Twitter

Untuk melakukan cara ini, kita harus membuka Twitter versi web. 

Kita dapat melihat bahwa pada pojok kanan atas dari setiap tweet ada tanda ‘v’.

Klik tanda ‘v’ pada tweet yang ingin kita tampilkan, sehingga nantinya muncul beberapa menu.

Pilih menu “Embed Tweet” sehingga akan muncul tampilan berikut.

Copas isi kotak di bawah “Add this Tweet to your website by copying the code below” ke HTML editor di WordPress. Isinya kurang lebih seperti ini.

The problem is, wordpress.com tidak dapat mengeksekusi tag script, sehingga jika tidak kita modifikasi, kita akan mendapatkan tampilan seperti ini.

Oke, tweet-nya sih bener, tapi kok di bawahnya muncul tulisan “//platform.twitter.com/widgets.js”? Usut punya usut, WordPress mengoreksi kode kita dengan sok tau sehingga menjadi seperti ini.

Maka dari itu, jika menggunakan cara ini, hilangkan saja tag script-nya. Cukup copas sampai </blockquote> saja.

Cara #2:
Copas langsung url tweet-nya
.

Ini adalah cara yang paling gampang dan dummy. Tinggal copas url tweet yang akan kita tampilkan. Kita dapat melakukannya dengan menekan ‘v’ pada pojok kanan atas tweet dan memilih menu “Copy link to tweet“. Nanti akan muncul tampilan berikut. 

Tinggal copas saja isi kotaknya.

Cara lainnya adalah dengan mengklik pada tanggal atau titik lain pada tweet hingga muncul tampilan berikut.

Selanjutnya, tinggal copas url yang tertera di address bar.

Misalkan url kita seperti ini. 

https://twitter.com/u_wenk/status/812574074505302016

Yang akan tampil di blog kita nanti seperti ini.

Sebagai catatan, jika kebetulan kita membuka twitter versi mobile, alamat url yang kita dapatkan adalah:

https://mobile.twitter.com/u_wenk/status/812574074505302016

Jika langsung kita copas, tweet yang ingin kita tampilkan tidak akan muncul. Yang muncul malah tulisan seperti ini:

https://mobile.twitter.com/u_wenk/status/812574074505302016

Untuk mengatasinya, cukup hapuskan bagian ‘mobile.‘ dari url tersebut.

Cara #3:
Menggunakan shortcode

Ini adalah cara yang paling direkomendasikan, karena selain menampilkan tweet, kita dapat juga mengatur lebar, alignment, dan banyak lagi. Syntax dasarnya seperti ini:

[tweet url]

atau

[tweet ID]

Kata ‘tweet‘ adalah reserved word, tidak boleh diubah. Sementara itu, url dan ID isinya berubah-ubah, menyesuaikan tweet yang ingin kita tampilkan. ID yang dimaksud di sini adalah ID tweet. Misalkan kita punya url:

https://twitter.com/u_wenk/status/812574074505302016

ID tweet-nya adalah 812574074505302016. Jadi, untuk menampilkannya, kita dapat menuliskan:

[tweet https://twitter.com/u_wenk/status/812574074505302016]


atau

[tweet 812574074505302016]

Hasilnya sama saja.

Sekarang misalnya kita ingin mengubah lebar tweet yang tampil menjadi ukuran tertentu. Cara penulisannya:

[tweet url width='ukuran']

atau 

[tweet ID width='ukuran']

Kata width juga merupakan reserved word, tidak boleh diubah. Sementara itu, ukuran dapat diisi dengan angka, sesuai lebar yang kita inginkan.

Misalnya kita ingin menampilkan tweet seperti yang di atas dengan lebar 150 px. Kita dapat menuliskan:

[tweet https://twitter.com/u_wenk/status/812574074505302016 width='150']

atau

[tweet 812574074505302016 width='150']


Hasilnya:

Kemudian, kita juga dapat mengubah follow button dan tweet action menjadi bahasa tertentu. Cara penulisannya:

[tweet url lang='kodebahasa']

atau 

[tweet ID lang='kodebahasa']

Bagian ‘kodebahasa‘ di sini dapat diisi dengan kode dari bahasa yang ingin kita gunakan. Daftar kode bahasa yang ada di WordPress dapat dilihat di tautan ini

Misalnya kita ingin mengubah follow button dan tweet action menjadi bahasa Indonesia, kita dapat menuliskan

[tweet https://twitter.com/u_wenk/status/812574074505302016 lang='id']

atau

[tweet 812574074505302016 lang='id']


Hasilnya:

Kita juga dapat menampilkan atau menyembunyikan balasan dari tweet tertentu. Cara penulisannya:

[tweet url hide_thread='true']

atau 

[tweet ID hide_thread='true']


By default
, hide_thread bernilai ‘false‘, jadi jika tidak dituliskan, balasan tweet akan ditampilkan. Contohnya seperti ini.


(url: https://twitter.com/u_wenk/status/582466259792494592)

Jika kita ingin menyembunyikan balasannya, kita cukup menuliskan

[tweet https://twitter.com/u_wenk/status/582466259792494592 hide_thread='true']

atau

[tweet 582466259792494592 hide_thread='true']

Hasilnya:

Selanjutnya, kita juga dapat menampilkan atau menyembunyikan tampilan media yang menempel pada tweet tertentu. Cara penulisannya:

[tweet url hide_media='true']

atau 

[tweet ID hide_media='true']

Misal kita gunakan tweet yang tampil sebelumnya. Di tweet tersebut, kita dapat melihat bahwa di sana ada gambar. Kita dapat menyembunyikan gambar tersebut dengan menuliskan

[tweet https://twitter.com/u_wenk/status/582466259792494592 hide_media='true']

atau

[tweet 582466259792494592 hide_media='true']


Hasilnya:

Selain hal-hal yang sudah disebutkan di atas, kita juga dapat mengatur alignment dari tweet yang kita tampilkan. Cara penulisan:

[tweet url align='alignment']

atau 

[tweet ID align='alignment']

Bagian ‘alignment‘ dapat diisi dengan left, right, atau center.

Misal saya ingin menampilkan tweet saya di tengah, saya dapat menuliskan

[tweet https://twitter.com/u_wenk/status/812574074505302016 align='center']


atau

[tweet 812574074505302016 align='center']


Hasilnya:

Terakhir, selain dapat digunakan secara terpisah, parameter width, lang, hide_thread, hide_media, dan align juga dapat digunakan secara bersamaan. Misalnya:

[tweet 582466259792494592 width='150' lang='id' hide_thread='true' hide_media='true' align='center']

Akan menghasilkan tampilan:

Semoga bermanfaat. :)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s