Membuat Telegram Share Button Untuk Blogger

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.