IT

Cara Pasang Share Link + image thumbnail Blogspot post ke Whatsapp

Share it:
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 .oke kita praktek ya..

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 semuanya ya.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;}
Setelah itu ctrl+f dan cari post-share jika ada, jika tema nya default cari class share biasanya nongol ,kemudian taruh kode html ini dibawah class=share (pada sesi html ya) dan simpan.selesai.
  <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 thumbnail nya maka gunakan send text saja sedangkan phone diperlukan kalau kita ingin menyebar kontak 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 icon WA itu sendiri biasanya ada yang menggunakan awesome-font css untuk stylesheet tapi hasilnya dengan svg ini ada space untuk tulisan whatsapp.

itu dia cara pasang share link image/thumbnail blogpsot ke whatsapp, semoga bermanfaat.
Share it:

IT

Post A Comment:

0 comments: