Responsive AMP Social Sharing Buttons For Blogger

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/23/2017

Sebelumnya saya sudah memposting responsive social sharing buttons with Whatsapp, Line, and BBM, kini saya bagikan juga responsive AMP social sharing buttons untuk Blogger AMP HTML.

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

Tombol responsive social sharing untuk AMP HTML ini sudah saya coba dan sudah saya terapkan pada salah satu template premium saya seperti pada tombol di bawah ini.


Jika Anda ingin mencoba memasangnya sendiri, silahkan ikuti langkahnya di bawah ini.

Silahkan simpan kode js amp-social-share 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>

Kemudian silahkan simpan kode CSS berikut 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;}

Silahkan cari kode berikut

<b:includable id='shareButtons' var='post'>

............

............

............

</b:includable>

Kemudian simpan kode berikut di bawah kode tadi (di bawah 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>

Kemudian silahkan simpan kode di bawah ini di mana Anda ingin menampilkan tombol berbaginya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='share-tool'/>

</b:if>

Bagaimana, mudah bukan? Selamat mencoba....