Membuat tombol Share on Whatsapp di blog

Ska Blogger - Membuat tombol Share on Whatsapp di blog. Whatsapp merupakan aplikasi smartphone yang sudah banyak digunakan orang. Whatsapp sendiri memiliki fitur yang friendly dan simple sebagai aplikasi chatting. Baru-baru ini, Whatsapp mengeluarkan fitur terbarunya. Yaitu Share on Whatsapp. Saya mengetahui sebelumnya melalui aplikasi Instagram, yang disetiap postnya terdapat tombol Share on Whatsapp. Ternyata, tombol tersebut juga terdapat dalam halaman web. Maksudnya, halaman web pun juga dapat di Share. Tentunya melalui suatu kode yang dibentuk menjadi sebuah tombol. Tombol ini saya kembangkan dari halaman ini.

Kode mentahnya seperti ini:
<a href="whatsapp://send?text=Hello%20World!">Hello, world!</a>
Dari situ dapat diketahui bahwa hasil yang didapat dari sebuah tag a adalah link. Dimana link tersebut akan membagikan nilai dari atribut href setelah huruf = (yang bergaris bawah).

Tambahkan saja xhtml blogger dari posting untuk memunculkan judul artikel dan juga url posting.
data:post.title : Memunculkan judul posting
data:post.link : Memunculkan URL posting

Hasilnya seperti ini:

<a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' expr:title='data:post.title'>
  Share on Whatsapp!
</a>

Pasang Share on Whatsapp di blog:
Letakan link html berikut, diatas </head> pada template kamu:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"/>

html berikut dapat dipasang dimana saja. Tetapi tombol akan berfungsi pada saat berada di halaman posting. Bila ingin dipasang dibawah artikel, letakan dibawah <data:post.body/>

<b:if cond='data:blog.isMobile'>
  <div class='share_wa'>
    <a class='share_wa-link' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' expr:title='data:post.title'>
      <i class="fa fa-whatsapp"></i>
      <br/>
      <span>Share on Whatsapp!</span>
    </a>
  </div>
</b:if>

Letakan CSS berikut diatas ]]></b:skin>:

/*** SHARE ON WHATSAPP ***/
.share_wa{
  text-align:center;
  display:inline-block;
  height:73.5px;
  width:141px;
  overflow:hidden;
}
a.share_wa-link {
  font: normal normal bold 13px/20px Arial;
  color:white;
  text-align:right;
}
.fa-whatsapp{
  font-size:30px;
  line-height:25px;
  height:25px;
  width:25px;
  border:2px solid white;
  padding:7px;
  margin:5px;
  display:inline-block;
  background:#42BF4F;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  -webkit-box-shadow:0px 0px 0px 10px #39f;
  -moz-box-shadow:0px 0px 0px 10px #39f;  
  box-shadow:0px 2px 5px 1px rgba(0,0,0,.3);  
}
a.share_wa-link span {
  text-align: center;
  margin-top: -50px;
  font-weight: bold;
  font-size: 15px;
  color:black;
}

Catatan: Tombol ini dapat digunakan apabila halaman dibuka melalui smartphone yang memiliki aplikasi Whatsapp yang sudah terupdate.

Hasilnya akan muncul seperti ini:

Terimakasih sudah membaca artikel Membuat tombol Share on Whatsapp di blog. Semoga bermanfaat.

125 × 125

Your text ads. Free ads. Click here.

125 × 125

Your text ads. Free ads. Click here.

Description	:	Membuat tombol Share on Whatsapp di blog
Rating	:	5.0
Reviewer	:	Putra
ItemReviewed	:	Membuat tombol Share on Whatsapp di blog
Updated at	:	17.37 - Ska Blogger
Diposting oleh	:	Putra
Label:	:	Blogger
Share	:	Whatsapp!