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: