WordPress AMP Sosyal Paylaşım Butonları

5.9.17
WordPress AMP Sosyal Paylaşım Butonları

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.
Bu makale faydalı mı?

Kategori İçerikleri

Blogger
Disqus
Yorum Ekle

Hiç yorum yok