Membuat Telegram Share Button Untuk Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/04/2018

Tidak bisa dipungkiri lagi kini Telegram menjadi salah satu platform perpesanan pesaing Whatsapp yang memiliki cukup banyak fitur dan kemudahan dalam menggunakannya. Terus bertambahnya pengguna Telegram ini tentunya merupakan salah satu peluang yang bagus sebagai sarana untuk menyebarkan konten blog.

Nah tentu saja keberadaan tombol berbagi ke Telegram atau Telegram share button akan sangat mempermudah para pengunjung untuk membagikan konten postingan ke teman atau grup Telegram.

Untuk itu kini saya bagikan cara membuat Telegram share button untuk blogger yang nantinya bisa Anda gabungkan dengan share button lainnya sehingga share buttonnya menjadi lebih kumplit lagi.

Setelah kemarin kita membuat Messenger Share Button, kini kita akan membuat Telegram Share Button untuk menambah tombol berbagi posingan pada blog Anda.

Telegram Share Button ini tentu saja tidak menggunakan javascript sehingga bisa digunakan pada blog AMP dan Non AMP dan ikonnya juga menggunakan SVG sehingga keberadaannya tidak akan terlalu membebani loading blog.

Jika tombol berbagi ke Telegram ini diklik maka akan muncul halaman seperti berikut ini (jika di browser desktop) dan penampakan hasilnya di Telegram seperti pada gambar di bawahnya.


Untuk demonya silahkan coba pada Fiddle berikut ini:


Jika Anda ingin mencobanya silahkan gunakan kode berikut ini untuk menampilkan Telegram share button di blog Anda.

<a expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:post.url + &quot;&amp;text=Ada%20yang%20keren%20lho,%20nyesel%20kalo%20ga%20buka...%20kunjungi:&quot;' target="_blank" rel="nofollow noopener" title="Share to Telegram">

<svg class="telegram-icon" width="24px" height="24px"><path fill="#32afed" d="M12,0c-6.626,0 -12,5.372 -12,12c0,6.627 5.374,12 12,12c6.627,0 12,-5.373 12,-12c0,-6.628 -5.373,-12 -12,-12Zm3.224,17.871c0.188,0.133 0.43,0.166 0.646,0.085c0.215,-0.082 0.374,-0.267 0.422,-0.491c0.507,-2.382 1.737,-8.412 2.198,-10.578c0.035,-0.164 -0.023,-0.334 -0.151,-0.443c-0.129,-0.109 -0.307,-0.14 -0.465,-0.082c-2.446,0.906 -9.979,3.732 -13.058,4.871c-0.195,0.073 -0.322,0.26 -0.316,0.467c0.007,0.206 0.146,0.385 0.346,0.445c1.381,0.413 3.193,0.988 3.193,0.988c0,0 0.847,2.558 1.288,3.858c0.056,0.164 0.184,0.292 0.352,0.336c0.169,0.044 0.348,-0.002 0.474,-0.121c0.709,-0.669 1.805,-1.704 1.805,-1.704c0,0 2.084,1.527 3.266,2.369Zm-6.423,-5.062l0.98,3.231l0.218,-2.046c0,0 3.783,-3.413 5.941,-5.358c0.063,-0.057 0.071,-0.153 0.019,-0.22c-0.052,-0.067 -0.148,-0.083 -0.219,-0.037c-2.5,1.596 -6.939,4.43 -6.939,4.43Z"/></svg> <span>Telegram</span>

</a>

Dan tambahkan CSS berikut untuk tampilan ikon SVG Telegram:

.telegram-icon{fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;vertical-align:middle}

Selamat mencoba dan semoga bermanfaat.