Cara Membuat Tombol Share Sosial Button Di Template AMP

Tombol sharing sosial button responsive kali ini saya share untuk pengguna AMP blogger, bagi kamu pengguna template AMP yang mau mencoba memasang tombol share sosial button ini bisa kamu terapkan di blog kalian.

Responsive AMP social sharing button ini cukup lengkap yaitu tombol berbagi untuk Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, Whatsapp, SMS, dan Email.

Cara memasang tombol share button sosial di template AMP

1. Seperti biasa login ke blogger masuk ke dashboard kemudian pilih menu Template > edit HTML

2. Copy kode javascript dibawah ini letakan di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
</b:if>

2. Copy kode css dibawah ini

/* Social Share */
.sharethis{position:relative;margin:20px 0;padding:0;font-size:0}
.sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left}
.sharethis amp-social-share{vertical-align:middle}
.sharethis .tw{background-color: #55acee;}
.sharethis .gp{background-color: #dc4e41;}
.sharethis .fb{background-color: #3b5998;}
.sharethis .pi{background-color: #bd081c;}
.sharethis .li{background-color: #0077b5;}
.sharethis .wa{background-color: #25d366;}
.sharethis .ta{background-color: #3c5a77;}
.sharethis .sms{background-color: #ca2b63;}
.sharethis .em{background-color: #000;}

3. Cari kode berikut
<b:includable id='shareButtons' var='post'>
............
............
............
</b:includable>

Letakan kode javascript ini letakan dibawah kode
</b:includable>

<b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sharethis'>
<div class='tw'>
<amp-social-share height='20' type='twitter' width='20'/>
  </div>
<div class='gp'>
<amp-social-share height='25' type='gplus' width='25'/>
  </div>
<div class='fb'>
<amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/>
  </div>
<div class='pi'>
<amp-social-share expr:data-param-media='data:post.firstImageUrl' height='25' type='pinterest' width='25'/>
  </div>
<div class='li'>
<amp-social-share height='25' type='linkedin' width='25'/>
  </div>
<div class='ta'>
<amp-social-share height='20' type='tumblr' width='20'/>
  </div>
<div class='wa'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='15' type='whatsapp' width='15'/>
</div>
<div class='sms'>
<amp-social-share height='15' type='sms' width='15'/>
</div>
<div class='em'>
<amp-social-share height='25' type='email' width='25'/>
</div>
<div class='clear'/>
</div>
</b:if>
</b:includable>

4. Kemudian copy kode javascript ini letakan dimana kamu mau menampilkan tombol sosial buttonnya terserah mau dibawah postingan apa di atas postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

5. Simpan template

Sekian cara memasang tombol sosial button responsive di template AMP.