Memasang Tombol Social Share Valid AMP

Memasang Tombol Social Share Valid AMP, Lagi-lagi masih tetap berkaitan dengan AMP, jika pada artikel sebelumnya saya membahas mengenai Cara Agar Posting Valid AMP HTML lain halnya dengan artikel kali ini.

Dimana pada artikel kali ini saya akan memberikan widget yang cukup penting yaitu tombol social share yang sudah valid AMP, perlu diketahui bahwa tombol social share ini hanya berlaku pada pengguna template AMP saja untuk pengguna non amp tidak bisa.

Tombol Social Share ini sangat ringan, karena menggunakan costum javascript ampproject.org. Tampilannya yang sederhana membuat tombol ini terlihat cukup rapih untuk sebuah blog.

Cara Pemasangan


Pertama-tama pastikan pada template sobat sudah terpasang javascript
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>

Selanjutnya tambahkan code CSS berikut tepat di dalam style post
.postsocial{float:left;vertical-align:middle;}
amp-social-share[type=&amp;quot;twitter&amp;quot;]{background-color:#55acee;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;gplus&amp;quot;]{background-color:#dc4e41;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;facebook&amp;quot;]{background-color:#3b5998;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;linkedin&amp;quot;]{background-color:#0077b5;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;pinterest&amp;quot;]{background-color:#bd081c;border-radius:2px;background-size:18px 18px;transition:all .4s ease-

Contoh
Tag konisional untuk halaman posting (item)
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style amp-custom='amp-custom'>
#navbar-iframe,.quickedit{height:0;visibility:hidden;display:none}
body{background:#E9E9E9;.......}
#header{background:#f50;.......}
...............................
...............................
...............................
.postsocial{float:left;vertical-align:middle;}
amp-social-share[type=&amp;quot;twitter&amp;quot;]{background-color:#55acee;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;gplus&amp;quot;]{background-color:#dc4e41;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;facebook&amp;quot;]{background-color:#3b5998;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;linkedin&amp;quot;]{background-color:#0077b5;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=&amp;quot;pinterest&amp;quot;]{background-color:#bd081c;border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
...............................
...............................
...............................
</style>
</b:if>

Terakhir letakkan code berikut tepat dibawah <data:post.body/>
<div class='postsocial'>
    <amp-social-share height='35' type='twitter' width='35'/>
    <amp-social-share height='35' type='gplus' width='35'/>
    <amp-social-share height='35' type='pinterest' width='35'/>
    <amp-social-share height='35' type='linkedin' width='35'/>
    <amp-social-share data-param-app_id='100003793780919' height='35' type='facebook' width='35'/>
  </div>

Simpan...
Disqus Comments