Membuat Tombol Share To Messenger Untuk Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/03/2018

Salah satu tombol share yang belum familiar di Blogger adalah tombol share to Messenger. Sampai saat ini saya belum menemukan blog yang menggunakan tombol share to Messenger ini. Padahal tombol ini sangat bermanfaat untuk membagikan postingan kepada teman Anda yang menggunakan layanan Messenger.

Dengan tombol share to Messenger ini kita bisa dengan mudah membagikan postingan blog yang mungkin sedang dibutuhkan oleh teman kita untuk suatu hal.

Tombol share to Messenger ini tidak menggunakan javascript sehingga bisa digunakan pada blog AMP maupun blog NON AMP. Untuk ikon share to Messenger ini juga menggunakan SVG sehingga ringan dan mudah disesuaikan jika disatukan dengan tombol share lainnya.

Tombol share to Messenger ini saya bagikan untuk melengkapi tombol share pada blog Anda sehingga tombol share blog Anda menjadi lebih komplit dan lebih memudahkan pengunjung untuk berbagi postingan ke berbagai platform sosial media.

Ketika tombol share to Messenger ini diklik, akan masuk ke halaman berbagi Facebook seperti pada gambar di bawah ini. Anda tinggal ketikan nama-nama teman Facebook dan menambahkan pesan.


Sebagai contoh silahkan klik tombol berbagi ke Messenger di bawah ini untuk membagikan postingan ini ke teman Messenger Anda.

Messenger

Nah jika Anda ingin mencoba menggunakan tombol berbagi ke Messenger seperti ini, silahkan ikuti langkah-langkahnya berikut ini.

Ada beberapa hal yang harus disiapkan untuk menggunakan tombol share to Messenger ini, di antaranya:

1. Buat aplikasi Facebook untuk page Facebook blog Anda, jika sudah memilikinya maka silahkan catat ID aplikasinya.
2. Membuat halaman "Terima Kasih Telah Berbagi", seperti contoh ini dan silahkan catat URL lamannya.

Jika 2 hal di atas sudah Anda buat, silahkan gunakan kode berikut ini untuk menampilkan tombol share to Messenger.

<a expr:href='&quot;https://www.facebook.com/dialog/send?app_id=1234567890&amp;link=&quot; + data:post.url + &quot;&amp;redirect_uri=url_laman_thanks&quot;' target="_blank" rel="nofollow noopener" title="Share to Messenger">

<svg class="messenger-icon" width="24" height="24" viewBox="0 0 24 24">

    <path fill="#0084ff" d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" />

</svg> <span>Messenger</span>

</a>

Silahkan ganti kode 1234567890 dengan ID aplikasi Facebook blog Anda dan ganti juga kode url_laman_thanks dengan URL laman thanks yang tadi dibuat sebelumnya.

Dan tambahkan CSS berikut agar posisi ikon Messenger rata tinggi dengan teks.

.messenger-icon{vertical-align:middle}

Selamat mencoba dan semoga bermanfaat.