WordPress AMP Sosyal Paylaşım Butonları - Bu yazımızda AMP duyarlı sosyal paylaşım butonlarını paylaşacağım.
WordPress AMP sosyal paylaşım eklentisinde bulunan butonlar; Twitter, Facebook, Google Plus, Pinterest, Linkedin, Tumblr, E-mail, SMS ve WhatSapp.
WordPress AMP sosyal paylaşım butonlarını eklemek için aşağıdaki adımları takip edin.
WordPress AMP Sosyal Paylaşım Butonları Nasıl Eklenir?
Automattic'teki AMP eklentisini kullanıyorsanız, lütfen eklentiyi düzenleyin. Ve ardından amp/templates/single.php tıklayın. Açılan sayfada <head> kodunun bir satır altına aşağıdaki AMP JS kodunu ekleyin.
<script async custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'></script>Aşağıdaki CSS kodunu <style amp-custom> - </style> stil dosyasının içerisine ekleyin.
/* AMP Social Share */
.ampshare{position:relative;padding:0;margin:20px 16px;font-size:0}
.ampshare .tw,.ampshare .gp,.ampshare .pi,.ampshare .fb,.ampshare .li,.ampshare .wa,.ampshare .ta,.ampshare .sms,.ampshare .em{height:30px;width:11.111111%;line-height:30px;margin:0;text-align:center;float:left;display:inline-block;}
.ampshare amp-social-share{vertical-align:middle}
.ampshare .tw{background-color: #55acec;}
.ampshare .gp{background-color: #dc4e42;}
.ampshare .fb{background-color: #3b5999;}
.ampshare .pi{background-color: #bd081d;}
.ampshare .li{background-color: #0077b6;}
.ampshare .wa{background-color: #25d367;}
.ampshare .ta{background-color: #3c5a78;}
.ampshare .sms{background-color: #ca2b64;}
.ampshare .em{background-color: #111;}
.clear{display:block;clear:both;}WP AMP sosyal paylaşım butonlarının görünmesini istediğiniz yere aşağıdaki HTML kodları ekleyin. Butonları yayınların altında görüntülemek istiyorsanız, HTML kodları </footer> kodunun bir satır üzerine ekleyin.
<div class='ampshare'>
<div class='tw'>
<amp-social-share height='20' type='twitter' width='20'/>
</div>
<div class='fb'>
<amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/>
</div>
<div class='gp'>
<amp-social-share height='25' type='gplus' width='25'/>
</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='wa'>
<amp-social-share data-share-endpoint='whatsapp://send' data-param-text='Bu yayını inceleyin: <?php echo wp_kses_data( $this->get( 'post_title' ) ); ?> - <?php echo get_permalink(); ?>' height='15' type='whatsapp' width='15'/>
</div>
<div class='ta'>
<amp-social-share height='20' type='tumblr' width='20'/>
</div>
<div class='em'>
<amp-social-share height='25' type='email' width='25'/>
</div>
<div class='sms'>
<amp-social-share height='15' type='sms' width='15'/>
</div>
<div class='clear'></div>
</div>Dosyayı güncelleyin ve yayınlarınızdan birini görüntüleyerek AMP sosyal paylaşım butonlarını kontrol edin.
Bknz: Blogger AMP Sosyal Paylaşım Butonları
Bknz: Blogger Mobil Uyumlu AMP Sosyal Paylaşım Butonları
WordPress blogları için AMP sosyal paylaşım butonları ekleme ile ilgili bilgiler paylaştık, daha fazla bilgi için lütfen yorum formunu kullanın.
0 komentar: