Memasang Twitter Card di Blogger

18 Mei 2018
Blogger secara default sudah ramah dengan Google+ dan Facebook. Ketika pos Blogger dishare ke Google+ atau Facebook, mereka sudah bisa menampilkan snippet, semacam kartu berisi gambar, judul, dan deskripsi/ringkasan posnya.

Seperti ini.



Tapi tidak dengan Twitter. Pas dishare ke Twitter nggak muncul apa-apa.



The Open Graph Protocol


Ini bukan salah satu judul film Mission Impossible yang dibintangi kakakku Tom Cruise.

The Open Graph Protocol adalah protokol yang memungkinkan halaman website menampilkan rich object ketika dibagikan ke media sosial. Rich object bisa dalam bentuk gambar, musik, video, dan lainnya. Protokol ini sudah tersedia di template default Blogger, sehingga ketika dibagikan ke Google+ atau Facebook, pos Blogger bisa menampilkan snippet.

Kalau kamu ngintip kode Blogger, kamu bisa melihat Open Graph live action. Setidaknya ada empat properti yang disematkan, ada og:url (url posnya), og:title (judul posnya), og:description (ringkasan posnya), dan og:image (gambar di pos yang ditampilkan di snippet, kalau Blogger biasanya gambar pertama yang berukuran besar).

Twitter sebenarnya bisa membaca data Open Graph, hanya saja kamu masih perlu menambahkan meta tag khusus buat Twitter, yaitu Twitter Card.

Twitter Card


Sehingga cara paling sederhana untuk memasang Twitter Card adalah cukup dengan menambahkan sebaris kode ini.

<meta content="summary_large_image" name="twitter:card" />

Biar lebih lengkap, kamu bisa menambahkan twitter:creator dan twitter:site juga. twitter:creator adalah id Twitter penulis, sedangkan twitter:site adalah id Twitter website/blogmu.

<meta content="@kurniaweb" name="twitter:creator" />
<meta content="@kurniaweb" name="twitter:site" />

Di properti twitter:card, kamu bisa memilih antara summary_large_image atau summary saja. Kalau hanya summary, gambar thumbnail yang tampil di snippet berukuran kecil berada di sebelah kiri snippet. Kalau summary_large_image gambar thumbnailnya besar di bagian atas snippet, mirip seperti Facebook dan Google+.

Properti lain tidak perlu karena Twitter bisa mengambil data og:url, og:title, og:description, dan og:image. Ingat, Blogger mengambil data Open Graph gambar pertama di posting, maka letakkan gambar terbaikmu (yang akan kamu tampilkan di snippet) di bagian awal pos.

Validasi


Setelah memasang Twitter Card, kamu masih perlu melakukan validasi supaya Twitter bisa segera menampilkan snippet kalau ada yang ngeshare url blogmu.

Masukkan salah satu pos di blogmu, klik Preview card.

Selesai.

Fungsi klik kanan touchpad tidak bekerja di Ubuntu 18.04

7 Mei 2018
Mouse wireless milik ibuku chip receivernya hilang. Jadinya beliau pinjem mouse kabel Logitech M105 kepunyaanku.

Terpaksa malam ini aku menggunakan touchpad buat bekerja.

Namun aku menyadari, ternyata fungsi klik kanan touchpad tidak bekerja sebagaimana mestinya di Ubuntu 18.04 LTS. Ketika kutekan tombol klik kanan untuk mengeluarkan menu, dia tetep ngeklik kiri.

Kukira bug di Ubuntu 18.04 LTS, tapi faktanya memang settingannya demikian.

Settingan defaultnya, sentuh touchpad pakai satu jari untuk klik kiri, sentuh pakai dua jari untuk klik kanan, tiga jari untuk klik tengah.

Solusi.


Nah supaya perilakunya normal, klik tombol klik kanan touchpad bisa beneran ngeklik kanan, kamu bisa menggunakan aplikasi GNOME Tweaks.



Install dulu GNOME Tweaks lewat Ubuntu Software kalau belum punya. Alat ini berguna banget buat ngatur settingan GNOME Shell yang mana menjadi desktop environment default di Ubuntu 18.04.

Buka GNOME Tweaks. Buka menu Keyboard & Mouse. Di bagian Mouse Click Emulation, pilih opsi Area.



Selesai.

Tidak perlu logout atau restart.

Sekarang tombol klik kiri touchpad berfungsi sebagai klik kiri, klik kanan sebagai klik kanan, begitu pula klik tengah bisa dilakukan dengan mengeklik bagian tengah tombol touchpad.

Fungsi sentuhan dua jari untuk klik kanan dan tiga jari untuk klik tengah tetep aktif.

Solusi kudapatkan dari It's FOSS.

Ubuntu 18.04 LTS (Bionic Beaver)

29 April 2018
Ubuntu 18.04 LTS dengan codename Bionic Beaver mulai tersedia tanggal 26 April.

Tidak ingin ketinggalan, aku pun menginstalnya di laptop ASUS X550DP kepunyaanku.

Abaikan device name-nya.

Ada banyak perubahan dibanding versi LTS sebelumnya.

Hal yang paling terlihat adalah perubahan desktop environment. Kalau sebelumnya pakai Unity, sekarang pakai GNOME Shell.

Kernel menggunakan versi anyar, yang kompatibel dengan hardware jaman now. Bundling software yang disertakan juga versi terbaru semua, LibreOffice, Mozilla Firefox, dan lainnya.

Ubuntu Software juga semakin matang. Selain menampilkan repositori Ubuntu, dia juga bisa memasang aplikasi-aplikasi snap (included) dan flatpak (butuh konfigurasi tambahan).

Tampilan Ubuntu Software, nggak kalah dengan Google Play Store.

Ada Skype, Spotify, Slack, Discord, Minecraft, Android Studio, Sublime Text, Atom, dan masih banyak lagi aplikasi snap dan flatpak. Semuanya bisa langsung dicari dan diinstal lewat Ubuntu Software. Tidak perlu lagi membuka Terminal dan mengetik perintah instalasi sudo apt install atau sudo snap install. Tidak perlu lagi menambahkan PPA pihak ketiga.

Semakin friendly dan memudahkan pengguna awam.

Redesign

12 April 2018
Mulai hari ini sampai beberapa hari, minggu, bulan, atau tahun ke depan, aku mungkin akan sibuk mendesain ulang template blog ini.

Aku mau bikin template yang bisa membuatku semangat nulis. Template yang simpel, rapi, fast loading, cat friendly human friendly, SEO friendly, mobile friendly, social media friendly, valid HTML5, valid AMP, skor > 90 di GTmetrix, PageSpeed Insight, dan Pingdom. Meskipun sulit atau bahkan mustahil, paling tidak aku akan berusaha menciptakan yang terbaik.

Template dasar yang kugunakan adalah Template Simple bawaan Blogger.

Changelogs akan kudokumentasikan di pos ini, beserta link referensinya kalau ada. Aku akan membuat tutorial versiku di pos tersendiri nantinya.

Baiklah. Aku mulai sekarang.

Changelogs:


  1. Menghapus CSS bundle bawaan Blogger.
  2. Mengubah meta title tag.
  3. Menghapus CSS di b:skin.
  4. Menambahkan pondasi CSS pakai modern normalize.
  5. Menghapus navbar.
  6. Menyederhanakan struktur div yang digunakan, menghapus faux, macro, dll.
  7. Membuat struktur semantik HTML5, layout satu kolom.
  8. Mendesain tampilan mobile site dulu, baru desktop.
  9. Menambahkan font dari Google Fonts, Roboto untuk heading, Merriweather untuk body, Inconsolata untuk kode. Batal. Pakai font Arial untuk heading dan body, Georgia untuk blockquote, Inconsolata untuk kode. Biar tidak memberatkan loading.
  10. Menghapus margin di form komentar.
  11. Menambahkan form kontak di halaman statis.

To do:


  1. Belum social media friendly
  2. Belum valid HTML5 dan AMP (susah 😕).
  3. Belum ada icon untuk berbagai browser dan gadget.
  4. Area untuk widget belum ada dan widget kemungkinan belum responsif.
  5. Mempertimbangkan layout dua kolom, penambahan sidebar untuk widget.

Referensi koding template Blogger: gist GitHub ini.

Sejauh ini lumayan. Tampilan dan performa sudah sesuai target. Template satu kolom yang simpel, rapi, dan fast loading.

Hanya kurang validasi HTML5 dan AMP, serta integrasi ke media sosial belum ada.

Diperbarui: 8 Mei 2018.

Dua Puluh Tujuh

10 April 2018


Sudah mendekati sepuluh ribu hari sejak pertama kali menghirup nafas di dunia ini. Hari ini genap (atau ganjil?) usiaku 27 tahun.

Alhamdulillah. Sampai hari ini masih diberi kesehatan dan nikmat yang paling besar.

Semoga di sisa usiaku, aku menjadi orang yang lebih baik dan lebih bermanfaat.

Amiin.

Halo dunia!

25 Maret 2018


Selamat datang di blog baruku.

Blog ini akan kugunakan sebagai diary.

Aku akan menulis pemikiran dan pengalaman pribadi. Tentang pekerjaan, komputer, web, cerita jalan-jalan, sepedaan, bepergian, bisa opini, ulasan, dan segala hal yang aku memiliki keinginan untuk membagikannya.

Semoga bermanfaat.