Media Sosial Twitter adalah salah satu cara terbaik untuk promosi produk anda, memang benar bahwa sosial media menjadi tempat promosi produk gratis, selain produk juga kita dapat mempromosikan website dengan cara memposting url ke sosial media. Twitter menyediakan tombol-tombol untuk dipasang ke blog, seperti tombol Follow me Twitter, tombol Tweet (share button twitter), tombol twitter message atau mengirimkan pesan ke twitter kita dengan memasang tombolnya di website atau blog, selain memasang tombol-tombol tersebut, kita juga dapat menampilkan plugin timeline twitter di blog, timeline twitter adalah tampilan tweet yang pernah kita lakukan di twitter.
Baiklah, kita akan membuat nya satu persatu, silahkan sobat ikut langkah-langkah memasang tombol follow, tweet, message dan menampilkan timeline twitter di blog.
Ganti Info4Youmyid dengan link twitter sobat. Kode diatas berguna untuk membuat @username saat seseorang men-tweet postingan kita, secara otomatis @username twitter akan tertulis diakhir teks, lebih jelasnya, nanti akan kita bahas lagi dibawah.
Simpan Template, Done!
Disini saya akan menjelaskan tahap demi tahap dalam pembuatanya, jika sobat tidak ingin membacanya, silahkan langsung cari saja kode lengkapnya yang berada didalam text box. Namun, saya sarankan sobat untuk membaca penjelasanya terlebih dahulu, agar dapat bebas mendesain tampilan-tampilannya sesuka hati sesuai selera jika mengerti caranya.
Contoh diatas adalah default dari twitter, namun jika sobat ingin memperbesar, menghilangkan tampilan jumlah follower, atau menyembunyikan username (@Info4Youmyid) berikut adalah setting tambahan untuk tombolnya.
Kode dibawah ini bersifat opsional, jadi tidak perlu ditambahkan jika mau menggunakan setelan default twitter.
data-size="large" adalah untuk memperbesar tombolnya.
data-show-count="false" menyembunyikan tampilan jumlah follower twitter kita yang berada disebelah tombol.
data-show-screen-name="false" untuk menghilangkan @username didalam tombol.
Tempatkan kode-kode diatas didalam a href jika ingin menambahkanya.
Kode Atribut Komplit Tombol Follow Twitter
Jika sobat tidak mau ribet-ribet nyusun kode nya, ini saya sediakan, tinggal copy paste saja di postingan / widget blog.
Silahkan disesuaikan, hapus saja yang tidak diinginkan, jika tampilan terlalu besar, silahkan di hapus data-size
Bukankah terlihat berbeda dengan gambar sebelumnya, disana yang seharusnya Judul dari postingan telah kita ganti dengan kata-kata yang kita buat sendiri, sedangkan untuk yang saya beri tanda panah merah tersebut adalah dari atribut rel="me" sebelumnya, jadi secara otomatis @username kita akan tampil disana. Silahkan sobat tentukan lebih menyukai yang mana, jika sobat lebih suka untuk menampilkan Judul postingan saat orang lain men-tweet, silahkan lewati langkah dibawah ini nanti, dan gunakan kode default diatas tadi.
Lalu, bagaimana untuk mengganti judul tersebut menjadi kata-kata yang kita buat sendiri? sobat hanya perlu menambahkan atribut text di belakang /intent/tweet pada kode default sebelumnya, perlu diingat, saat penulisan kode, gunakan %20 sebagai pengganti Spasi. Contoh:
?text=Info4You%20|%20Tips%20Blog%20Lengkap ini hanyalah contoh untuk blog yang niche tips blog, sobat bisa mengganti kata-kata keren sesuka hati sesuai dengan topik blog sobat masing-masing, dan berikut adalah kode lengkapnya:
Sama seperti Tombol Tweet sebelumnya, untuk membuat tombol message kita menggunakan href dengan link khusus yaitu https://twitter.com/messages/compose untuk mengarahkan ke direct message twitter, dan tambahan atribut recipient_id untuk menegaskan tab message yang terbuka akan mengarah ke ID yang kita masukkan. Tidak lupa juga, kita berikan class twitter-dm-button.
Baiklah, kita akan membuat nya satu persatu, silahkan sobat ikut langkah-langkah memasang tombol follow, tweet, message dan menampilkan timeline twitter di blog.
Cara Memasang Widget JavaScript Twitter di Blog
yang pertama harus kita lakukan disini adalah memasang script agar plugin twitter dapat tampil di widget blog. Silahkan sobat login ke blog, lalu Template - edit HTML. Copy kode dibawah ini, pada edit HTML cari <body> dan paste dibawahnya.
JavaScript Twitter
Selain kode diatas, sobat juga perlu menyimpan kode berikut ini dibawah <head> - <script>window.twttr = (function(d, s, id) {
- var js, fjs = d.getElementsByTagName(s)[0],
- t = window.twttr || {};
- if (d.getElementById(id)) return t;
- js = d.createElement(s);
- js.id = id;
- js.src = "https://platform.twitter.com/widgets.js";
- fjs.parentNode.insertBefore(js, fjs);
- t._e = [];
- t.ready = function(f) {
- t._e.push(f);
- };
- return t;
- }(document, "script", "twitter-wjs"));</script>
- <link rel="me" href="https://twitter.com/Info4Youmyid"/>
Simpan Template, Done!
Disini saya akan menjelaskan tahap demi tahap dalam pembuatanya, jika sobat tidak ingin membacanya, silahkan langsung cari saja kode lengkapnya yang berada didalam text box. Namun, saya sarankan sobat untuk membaca penjelasanya terlebih dahulu, agar dapat bebas mendesain tampilan-tampilannya sesuka hati sesuai selera jika mengerti caranya.
Cara Membuat Tombol Follow Me Twitter di Blog
untuk membuat tombol follow, script nya sangat sederhana sekali, saya uraikan satu demi satu dulu okay, jika ingin kode komplit nya silahkan lewati penjelasan ini dan langsung menuju Kode Komplit. Pertama, buatlah a href yang menuju alamat twitter sobat dan berikan class twitter-follow-button.Contoh diatas adalah default dari twitter, namun jika sobat ingin memperbesar, menghilangkan tampilan jumlah follower, atau menyembunyikan username (@Info4Youmyid) berikut adalah setting tambahan untuk tombolnya.
Kode dibawah ini bersifat opsional, jadi tidak perlu ditambahkan jika mau menggunakan setelan default twitter.
data-size="large" adalah untuk memperbesar tombolnya.
data-show-count="false" menyembunyikan tampilan jumlah follower twitter kita yang berada disebelah tombol.
data-show-screen-name="false" untuk menghilangkan @username didalam tombol.
Tempatkan kode-kode diatas didalam a href jika ingin menambahkanya.
Kode Atribut Komplit Tombol Follow Twitter
Jika sobat tidak mau ribet-ribet nyusun kode nya, ini saya sediakan, tinggal copy paste saja di postingan / widget blog.
Atribut Default
Testing
- <a class="twitter-follow-button"
- href="https://twitter.com/Info4Youmyid">
- </a>
Atribut Tanpa Count, @username dan large
Testing
- <a class="twitter-follow-button"
- href="https://twitter.com/Info4Youmyid"
- data-show-count="false"
- data-size="large"
- data-show-screen-name="false">
- </a>
Silahkan disesuaikan, hapus saja yang tidak diinginkan, jika tampilan terlalu besar, silahkan di hapus data-size
Cara Membuat Tombol Tweet Postingan ini (Tweet this post)!
Untuk membuat tombol Tweet Twitter, anda hanya perlu memberikan atribut a href dengan value https://twitter.com/intent/tweet atribut ini bermaksud untuk membuat link ke web twitter, jadi jangan diubah ya, dan tambahkan juga class twitter-share-button sangat simpel bukan? silahkan dipraktekan dengan tombol berikut Tweet dan dibawah ini adalah kode nya.
Atribut Default Tombol Tweet
Sobat bisa menambahkan atribut lain, seperti data-size dan text. Apa itu atribut text dan bagaimana cara kerjanya? atribut text pada plugin twitter tweet berguna untuk mempersingkat tampilan judul yang akan di tampilkan saat orang men-tweet postingan kita, sebagai contoh lihat gambar ini.- <a class="twitter-share-button"
- href="https://twitter.com/intent/tweet">
- Tweet</a>
Diatas adalah gambar saat saya men-tweet postingan ini, terlihat disana text awalnya adalah judul postingan, nah atribut text berguna untuk mengubah kata-kata awal tersebut, kita dapat menentukanya, misalnya misalnya blog sobat niche tips blog, maka tentukanlah kata-kata yang bagus untuk ditampilkan pada timeline pengunjung yang men-tweet postingan kita nantinya, contoh: "Tips Blog Untuk Pemula | Lengkap Hanya di Info4You" maka tampilanya akan seperti gambar berikut.
Bukankah terlihat berbeda dengan gambar sebelumnya, disana yang seharusnya Judul dari postingan telah kita ganti dengan kata-kata yang kita buat sendiri, sedangkan untuk yang saya beri tanda panah merah tersebut adalah dari atribut rel="me" sebelumnya, jadi secara otomatis @username kita akan tampil disana. Silahkan sobat tentukan lebih menyukai yang mana, jika sobat lebih suka untuk menampilkan Judul postingan saat orang lain men-tweet, silahkan lewati langkah dibawah ini nanti, dan gunakan kode default diatas tadi.
Lalu, bagaimana untuk mengganti judul tersebut menjadi kata-kata yang kita buat sendiri? sobat hanya perlu menambahkan atribut text di belakang /intent/tweet pada kode default sebelumnya, perlu diingat, saat penulisan kode, gunakan %20 sebagai pengganti Spasi. Contoh:
?text=Info4You%20|%20Tips%20Blog%20Lengkap ini hanyalah contoh untuk blog yang niche tips blog, sobat bisa mengganti kata-kata keren sesuka hati sesuai dengan topik blog sobat masing-masing, dan berikut adalah kode lengkapnya:
Kode Tweet Button Dengan Atribut Text
Testing
- <a class="twitter-share-button"
- href="https://twitter.com/intent/tweet?
- text=Tulis%20Kata-kata%20Kerenmu%20Disini">
- Tweet</a>
Cara Membuat Tombol Twitter Message
Berikut adalah kode lengkapnya.
Kode Tombol Message Twitter
Testing Message @Info4Youmyid
- <a href="https://twitter.com/messages/compose
- ?recipient_id=IDTwitter"
- class="twitter-dm-button"
- data-screen-name="@Info4Youmyid">
- Message @Info4Youmyid</a>
recipient_id=IDTwitter ganti yang merah ini dengan ID sobat, ganti @Info4Youmyid dengan @username sobat.
Q: Gimana cara mengetahui ID Twitter kita?A: Silahkan sobat ke gettwitterid.com dan masukkan @username tanpa "@". Contoh: Info4Youmyid
Cara Memasang Widget Timeline Twitter di Blog
Yang satu ini sebenarnya tidak saya rekomendasikan, karena membaut loading web kita bertambah lama, apalagi jika timeline twitter sobat banyak memuat foto dan video. Tapi jika sobat suka berikut adalah atribut yang kita butuhkan. Tidak jauh berbeda dengan sebelumnya, yang pertama harus kita buat adalah href dengan alamat twitter masing-masing dan class twitter-timeline untuk ukuran maksimum defaultnya adalah lebar 180px dan tinggi 520px, namun kita bisa mendesain atau mengatur hal tersebut dengan menambahkan atribut data-width dan data-height .Untuk penyusunan atribut-atribut yang telah kita bahas tadi, silahkan lihat dibawah.
Kode Default Widget Timeline Twitter
Tampilan Timeline
Tweets by @TwitterDev
Silahkan ganti https://twitter.com/Info4Youmyid dengan alamat twitter sobat atur juga width (lebar) dan height (tinggi) timeline nya sesuai selera, timeline ini bisa sobat embed pada Tata-Letak atau postingan seperti contoh diatas, untuk dipostingan silahkan paste di mode HTML bukan Compose. Itu adalah default nya, sobat juga dapat mendesain dengan menambahkan atribut-atribut lain yang didukung seperti data-chrome dengan elemen noheader noborders nofooter noscrollbar transparent untuk kegunaan masing-masing element adalah sebagai berikut:- <a class="twitter-timeline"
- href="https://twitter.com/Info4Youmyid"
- data-width="300"
- data-height="400">
- Tweets by @Info4Youmyid </a>
Tweets by @TwitterDev
nofooter adalah untuk menyembunyikan footer timeline, dapat sobat lihat contoh diatas, paling akhir terdapat link embed dan view on twitter jika ingin menyembunyikanya silahkan berikan elemen ini.
noheader untuk menyembunyikan bagian atas timeline, seperti contoh diatas, Tweets by @Info4Youmyid akan disembunyikan jika memberikan elemen ini.
transparent element ini menjadikan background timeline transparan, default background nya adalah berwarna putih, jika sobat ingin menyesuaikan warna background dengan tampilan widget blog silahkan gunakan elemen ini.
noborders sesuai namanya, elemen ini untuk menghilangkan border (garis tepi) pada timeline.
noscrollbar sebelumnya saya salah paham dengan elemen yang satu ini, saya kira setelah diberi elemen ini, timeline tidak dapat di scroll, setelah dicoba ternyata hanya menghilangkan tampilan scrollbar saja, tapi widget timeline tetap bisa di scroll kebawah jika kursor mengarah ke widget.
Untuk mendesain dengan menambahkan data-chrome silahkan lihat kode dibawah ini.
Kode Dengan data-chrome Widget Timeline Twitter
Sobat bisa menambahkan lebih dari satu elemen dengan Spasi sebagai pemisahnya.- <a class="twitter-timeline"
- href="https://twitter.com/Info4Youmyid"
- data-width="300"
- data-height="400"
- data-chrome="nofooter">
- Tweets by @Info4Youmyid </a>
Contoh: data-chrome="nofooter noborders transparent" Silahkan bereksperimen sendiri.
Cara Menampilkan Widget Twitter Di Blog
Kita sudah mendapatkan script twitter nya, sekarang tugas sobat adalah menampilkanya di blog, sobat dapat menempatkanya akhir postingan, atau dengan menambahkan Gadget pada Tata Letak, bisa juga dibawah judul, sesuai selera masing-masing. Akan kita ulas bagaimana cara penempatanya diberbagai blog.#1 Menempatkan widget twitter di akhir postingan
Saya rasa penempatan tombol-tombol seperti ini memang strategis adalah diakhir postingan khususnya tombol share, karena saat pengunjung selesai membaca, mereka akan langsung menemukan tombol nya langsung, jika memang tulisan kita bermanfaat dan layak untuk di bagikan, mereka akan dengan senang hati mengklik tombol tersebut, berbeda jika sobat meletakkanya diatas postingan, karena minat pengunjung untuk membagikan postingan belum ada, sebab tulisan pun belum dibaca, dan saat mereka selesai membaca, kadang malas untuk scroll ke atas lagi.Baiklah berikut caranya:
1. Silahkan sobat login ke blogger.com.
2. Klik Template lalu Edit HTML
3. Cari kode ini <data:post.body/> dan paste kode widget sobat setelah nya atau sebelum </b:if> .
4. Simpan template, lalu lihat blog sobat, apa sudah benar penempatanya, jika belum tampil berarti salah penempatan, dan coba lebih teliti lagi.
Keterangan: Perlu diperhatikan, setiap template bervariasi.<data:post.body/> bisa lebih dari 1, contohnya pada template blog ini terdapat 4 <data:post.body/> yang perlu sobat perhatikan adalah tag kondisi sebelumnya, lihat gambar dibawah.
dapat sobat lihat yang saya beri kotak berwarna biru adalah conditional tags, Jika condition nya adalah == "item" maka apa yang kita taruh setelah. <data:post.body/> hanya akan tampil pada halaman postingan saja. Untuk yang bertanda panah biru tersebut adalah tag condition jika ingin menampilkan apa yang ditaruh setelah <data:post.body/> hanya tampil pada halaman static (Laman), jadi jangan sampai salah ya. Saya tekankan lagi, paste kode widget nya setelah <data:post.body/> dan sebelum </b:if> karena jika sobat paste kode setelah </b:if> maka widget tersebut akan ikut tampil dipostingan halaman depan blog, banyak kasus seperti itu buat blogger pemula, saya juga dulu pernah mengalaminya saat ingin meletakkan iklan dibawah postingan, iklan tersebut ikut tampil juga di setiap info update dihalaman depan blog, alhasil tampilan jadi tidak menarik, dan memberatkan loading juga.
Untuk tombol like, share, follow, dan lain-lain memang terlihat menarik jika ikut tampil diakhir jump break postingan halaman depan blog, seperti gambar diatas, namun seperti yang saya katakan juga, pengunjung tidak akan mengklik tombol tersebut karena mereka belum membacanya, jadi anda hanya akan memberatkan loading halaman depan saja, jika postingan dihalaman depan banyak yang tampil.
#2 Menempatkan Widget Di atas Postingan
Selera masing-masing, jadi tetap akan saya berikan cara nya untuk menampilkan widget diatas postingan dan dibawah judul, mungkin sobat sekalian juga ingin memiliki opsi lain, atau membuat widget nya tampil atas dan bawah postingan sekaligus.Karena sebelumnya sudah saya terangkan panjang lebar, jadi pada kali ini saya langsung saja, caranya sederhana, kalau sebelumnya untuk menampilkan dibawah postingan sobat harus menempatkan kode nya Setelah <data:post.body/> maka sekarang sobat harus melakukan Sebelum <data:post.body/> . Hanya begitu bro? iya gitu doang kok, hehe.
#3 Memasangnya Widget Twitter di Gadget blog
Cara yang satu ini saya yakin sobat sudah banyak yang tau ya, tapi biar fair akan tetap saya jelaskan caranya.1. Login ke blogger.com
2. Pada bilah kiri, pilih Tata Letak atau Layout jika tampilan blogger sobat in english.
3. Klik Tambahkan Gadget dimana saja yang sobat inginkan.
4. Pilih HTML/JavaScript.
5. Beri judul/kosongkan saja, dibawahnya Pastekan kode widget. 6. Klik Simpan, beres!
Sobat juga bisa menampilkan 2 tombol atau lebih pada gadget nya, berikan tag <br /> sebagai jarak kebawahnya nya. Contoh lihat gambar dibawah. Saya membuat tombol follow dan messages.
 |
 |
Gimana, mudah bukan, selesai deh desain blog kita dengan widget twitter. Semoga postingan ini dapat bermanfaat buat sobat semua.
Sumber referensi & kode: https://dev.twitter.com/products/web
Postingan pertama "TEST KOMEN"
ReplyDelete*Sory ya pertamaxxx nya dijadikan buat testing design web, tapi hadiah gelas antik nya gk saya ambil kok :D