author Ahmad Muhardian

Cara Embed Pesan dari Telegram ke Blog dan Web


Embed Telegram

Ada banyak channel menarik untuk diikuti di Telegram. List lengkapnya ada di: kumpulan channel dan group telegram.

Jika kamu adalah pengelola channel, kamu mungkin ingin pesan-pesan yang ada di-channel-mu dimuat di blog.

Biasanya kita melakukannya dengan screenshot. Namun, ini kurang bagus. Karena kalau ada link di sana, maka link tersebut tidak bisa diklik.

Solusinya:

Kita harus menggunakan embed (menempel). Dengan cara ini, apapun yang ada di sana akan ditampilkan langsung di blog kita.

Pada tulisan ini, saya akan menunjukkan cara embed pesan di channel Telegram ke blog dan juga kita akan membuat shortcode untuk Hugo.

Cara Embed Pesan Telegram ke Blog

Pertama buka channel atau group yang ingin kita embed pesannya. Setelah itu klik kanan lalu pilih copy link.

Copy link pesan di chanel telegram

Setelah itu buka Post Widget. Lalu pada isisan Link to post, paste link yang baru saja di-copy.

post widget

Nah, dari sini.. kita bisa lihat hasil preview dan menentukan ukuran lebar dan juga opsi untuk menampilkan foto profil.

Jika sudah merasa bagus, silahkan copy Embed Code.

embed code

Lalu, bisa kita paste pada artikel blog.

Embed pesan telegram di blogger

Maka hasilnya akan seperti ini:

Cara ini bisa dilakukan di Blogger, Wordpress, Tumblr, Joomla, dll.

Perlu diketahui:

Untuk embed pesan dari group, pastikan group tersebut bersifat publik, bukan private.

Embed dengan Iframe

Jika tidak ingin embed post dengan menyertakan kode javascript dari Telgram, kita bisa gunakan elemen <iframe>.

Keuntungan dari menggunakan <iframe>:

Kita bisa mengatur bagaimana pesan akan ditampilkan dan juga bisa menggunakan Lazyloading.

Contoh:

<iframe src="https://t.me/petanikode/1567?embed=1" scrolling="no" style="border: medium none; overflow: hidden; min-width: 320px; height: 800px;" width="100%" height="100%" frameborder="0"></iframe>

Hasilnya:

Perhatikan di bagian atribut src di sana kita menaruh link dari pesan yang akan di-embed dan tambahkan ?embed=1 agar mendapatkan halaman embed dari pesan.

Namun, perlu diketahui:

Kekurangan dari cara ini adalah ukuran tingginya tidak dinamis. Kita harus mengatur sendiri ukuran tingginya dengan style css.

Shortcode Telegram Embed Untuk Hugo

Pada Hugo, kita menulis dengan format markdown.

Sebenarnya kita bisa tulis langsung kode embed di markdown, akan tetapi ini bukan cara yang bagus.

Karena akan membuat tulisan kita kurang rapi, dan juga jika kita ingin menggunannya lagi maka harus paste lagi kode embed-nya.

Lalu cara yang bagus bagaimana?

Menggunakan shortcode.

Shortcode adalah kode penyingkat di Hugo untuk menulis kode HTML yang kompleks di markdown. Dengan shortcode, kita bisa membuat kode penyingkat untuk embed Telegram.

Caranya:

Pertama, kita harus buat dulu shortcode telegram-nya. Buat sebuah file HTML baru di /layout/shorcodes/telegram.html atau /themes/<your-theme>/shortcodes/telegram.html.

Shortcode untuk embed telegram di Hugo

Setelah itu, isi dengan kode berikut:

<script async src="https://telegram.org/js/telegram-widget.js?1" data-telegram-post="{{ .Get 0 }}" data-width="100%"></script>

Lalu untuk menggunakannya pada markdown, kita tinggal tulis seperti ini:

{{< telegram "petanikode/938" >}}

Contoh:

Shortcode telegram di Hugo

Hasilnya:

Akhir kata…

Nah itulah cara meng-embed pesan dari channel Telegram ke blog dan cara membuat shortcode-nya di Hugo.

Semoga bermanfaat.

Referensi:

Baca Juga ini

Membuat Layout Tema Hugo: 3 Halaman Penting yang Harus Ada dalam Blog

Membuat Layout Tema Hugo: 3 Halaman Penting yang Harus Ada dalam Blog

Setelah kita membuat template baru, hal yang harus dilakukan selanjutnya adalah membuat layout untuk halaman-halamannya. Adapun halaman-halaman yang harus ada di dalam sebuah blog adalah: Homepage/landing page (index.html) Halaman Artikel (single.html) Halaman Taxonomy atau daftar artikel pada kategori atau tag tertentu (list.html) Namun sebelum membuatnya, kita harus membuat partial terlebih dahulu. Partial adalah pecahan-pecahan kode atau komponen dari template. Adanya partial memungkinkan kita untuk menggunakan ulang komponen yang sudah ada.

Tips dan Cara Saya Hosting Gambar untuk Hugo di Github

Tips dan Cara Saya Hosting Gambar untuk Hugo di Github

Bagi yang belum pernah ngeblog dengan SSG, mungkin akan berpikir seperti ini: “Ngeblog dengan SSG kan pakai teks editor, lalu bagaimana cara menambahkan gambar di artikelnya? Ngetik manual…kayaknya ribet.” Saya juga berpikiran seperti itu sebelumnya 😄. Tapi setelah mencoba dan merasakan sendiri ngeblog dengan SSG, rasanya lebih produktif menggunakan SSG daripada CMS seperti Blogger dan Wordpress. Pada tulisan ini, saya akan membagikan cara menambahkan gambar pada artikel Hugo dan tips cara hosting-nya di Github.

Cara Membuat Blog dengan Hugo (Ngeblog dari Teks Editor dan Terminal ala Programmer)

Cara Membuat Blog dengan Hugo (Ngeblog dari Teks Editor dan Terminal ala Programmer)

Saya punya blog: CMS-nya menggunakan Blogger dan Wordpress… …tapi tidak pernah terurus. Mungkin saya malas, karena koneksi internet yang kurang cepat. Maklum tinggal di desa, sinyalnya tidak stabil 😄. Kendala yang saya alami: Malas upload gambar satu per satu ketika membuat artikel. Tidak bisa ngedit artikel secara offline. Tidak memiliki kuasa penuh terhadap CMS-nya. Kurang aman. dan masih banyak lagi. Karena itu, sekarang saya lebih suka ngeblog dari teks editor menggunakan SSG (Satatic Site Generator) daripada CMS seperti Wordpress.

Cara Membuat Tema Hugo dari Nol (Meracik ulang Tema Petani Kode)

Cara Membuat Tema Hugo dari Nol (Meracik ulang Tema Petani Kode)

Saat ini Saya sedang menggunakan Hugo versi 0.18 dan berencana untuk meng-upgrade ke versi 0.24. Kabar baiknya, Beb sudah merilis versi 0.24 sekitar dua hari yang lalu. Selain melakukan upgrade ke mesin terbaru, saya juga berencana meracik ulang tema Petani Kode. Karena saya rasa tema ini cukup berantakan, baik dari segi kode dan performa. Alasan Saya ingin Membuat Tema Baru Kode tema yang digunakan saat ini masih berantakan.

Cara Redirect Halaman di Hugo untuk Mempertahankan Trafik

Cara Redirect Halaman di Hugo untuk Mempertahankan Trafik

Hingga saat ini, proses migrasi Petani Kode ke Hugo masih belum selesai. Mengapa saya katakan demikian? Karena banyak artikel yang belum diedit. Banyak artikel yang link-nya error 404, alias tidak ditemukan. Terpantau dari laporan Google Webmaster, error 404-nya tembus sampai 546 halaman. Hal ini akan membuat banyak orang kecewa, termasuk juga saya. Karena sudah banyak artikel yang terindeks di google, di-share di sosial media, dan link lainnya.

Cara Hosting/Deploy Hugo di Github

Cara Hosting/Deploy Hugo di Github

Github memiliki layanan hosting Static Page yang bisa kita manfaatkan untuk hosting Hugo. Pada dasarnya SSG seperti Hugo akan membuat sebuah file statis yang (biasanya) berada di dalam direktori public. Nah direktori ini yang akan kita upload ke Github agar website atau blog kita bisa dibuka melalui: https://username.github.io atau kustom domain sendiri. Berdasarkan panduan di dokumentasi Hugo, ada empat cara yang bisa dilakukan untuk hosting Hugo di Github: Hosting ke direktori doc Hosting ke cabang gh-pages Hosting ke halaman personal/organisasi Hosting Github dengan Continuous Integration (CI) Kita akan mencoba cara yang nomer 3, karena menurut saya cukup gampang.