Cara Pasang Share Link + image thumbnail Blogspot post ke Whatsapp

Awalnya saya coba - coba mencari referensi, namun yang ada untuk web html bukan xml seperti di blogspot.

whatsapp

share artikel hanya link nya saja sangat tidak menarik, bagusnya dilengkapi thumbnail juga kan ?  perbedaan nya hanyalah berada di meta tag saja yang perlu penambahan sedikit.

contoh   kirim link+ image thumbnail blogspot ke whatsapp

Sebelum itu yang perlu kita lakukan masuk ke edit template thema kita pilih thema -> edit html,yang ini pasti sudah tahu .Kemudian tekan tombol ctrl+f untuk cari  ]]></b:template-skin>, nah letakkan kode css ini diatas ]]></b:template-skin>

.button {  font-style: normal;  font-size: 12px;  font-family: 'Open Sans', sans-serif;  color: white;  background-color: #414980;  padding: 0px 6px;  border-width: 0px;  border-radius: 0px;  text-align: center;  outline: none;  line-height: 30px;  display: inline-block;  cursor: pointer;  box-sizing: border-box;  height: 30px;  text-decoration: none;}.button__icon {  fill: white;  display: inline-block;  vertical-align: middle;  height: 17px;  margin-right: 1px;}

.button--wa {  background-color: #25d366;}.social-buttons {  margin: 0;  padding: 0;  list-style: none;}.social-buttons::after {  content: '';  display: block;  clear: both;}.social-buttons .button {  padding-left: 10px;  padding-right: 10px;}.social-buttons .button__icon {  margin-right: 5px;}.social-buttons__item {  float: left;  margin-right: 5px;}

Kode diatas adaah penampakan untuk tombol Whatsapp ya ,Setelah itu ctrl+f dan cari post-share (atau bagian share ) jika ada biasanya peletakannya bisa di bawah post atau di bawah header, copy dan paste disitu.

  <ul class="social-buttons">  <li class="social-buttons__item"><a expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:blog.url + &quot;&amp;title=&quot; + data:blog.pageName + data:blog.postThumbnailUrl + data:blog.metaDescription'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="button__icon"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg> Whatsapp</a >  </li>      </ul>

Perlu diingat untuk mengirim ke whatsapp ada dua metode yaitu dengan send text seperti diatas dan send phone. Karena kita ingin mengirim artikel dan juga thumbnail nya maka gunakan send text saja sedangkan phone diperlukan kalau kita ingin menyebar kontak nomor kita ke target.

nah, kode + data:blog.postThumbnailUrl + data:blog.metaDescription ini lah yang akan menampilkan thumbnail dan deskripsi postingan blog kita di whatsapp. Sedangkan svg itu adalah penampakan untuk icon WA itu sendiri biasanya ada yang menggunakan awesome-font css untuk stylesheet nya tapi dengan svg ini memungkinkan space untuk tulisan whatsapp. itu dia cara pasang share link image/thumbnail blogpsot ke whatsapp, semoga bermanfaat.