Pada artikel yang lebih dahulu saya posting tentang social sharing button responsive AMP untuk blogger, sekarang ini tim saya akan membuat artikel dan membagikan kepada kalian tentang cara membuat social sharing button untuk blog Wordpress responsive AMP.
Untuk perbedaan responsive AMP social sharing button antara untuk Blogger dan Wordpress AMP ini hanya terletak pada pengutipan url thumbnail post untuk data-param-media pada tombol Pinterest dan title serta url postingan untuk tombol Whatsapp. Nah jika kalian mempunyai blog Wordpress dan menggunakan AMP, silahkan coba pasang responsive AMP social sharing button ini.
Untuk Cara Memasangnya silahkan ikuti langkah-langkah berikut ini.
Jika kalian menggunakan plugin AMP dari Automattic, silahkan kalian edit plugin-nya Kemudian silahkan kalian klik
<script async custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'></script>Dan kemudian silahkan kalian pasang kode
/* Social Share */
.sharethis{position:relative;margin:20px 16px;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;}
.clear{clear:both;display:block;}Kemudian langkah selanjutnya silahkan kalian pasang kode
<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 data-param-media='<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);
echo $thumb_url[0];
?>' 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' data-param-text='Check out this article: <?php echo wp_kses_data( $this->get( 'post_title' ) ); ?> - <?php echo get_permalink(); ?>' 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>
</div>Dan terakhir silahkan kalian update filenya kemudian silahkan cek salah satu postingan AMP blog kalian.