Blogger AMP Sosyal Paylaşım Butonları

Blogger AMP Sosyal Paylaşım Butonları - Bir önceki yazımızda Whatsapp, Line ve BBM gibi blog için önemli sosyal paylaşım butonları paylaşmıştık. Bu yazımızda AMP blog temalarında kullanılabilecek AMP duyarlı sosyal paylaşım butonlarını paylaşacağız.

AMP duyarlı sosyal paylaşım butonları eklentisinde Facebook, Google+, Twitter, Pinterest, LinkedIn, Tumblr, WhatsApp, SMS ve e-posta butonları yer almakta.

Blogger AMP Sosyal Paylaşım Butonları Nasıl Eklenir?

AMP duyarlı sosyal paylaşım butonlarını eklemek için, aşağıdaki adımları takip edin.

1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın. Açılan sayfada CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki js amp-social-share kodunu </head> kodunun bir satır üzerine ekleyin.

<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>

2- Aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

/* Social Share */
.amp-share-this{position:relative;margin:20px 0;padding:0;font-size:0}
.amp-share-this .tw,.amp-share-this .gp,.amp-share-this .pi,.amp-share-this .fb,.amp-share-this .li,.amp-share-this .wa,.amp-share-this .ta,.amp-share-this .sms,.amp-share-this .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left}
.amp-share-this amp-social-share{vertical-align:middle}
.amp-share-this .tw{background-color: #55acee;}
.amp-share-this .gp{background-color: #dc4e41;}
.amp-share-this .fb{background-color: #3b5998;}
.amp-share-this .pi{background-color: #bd081c;}
.amp-share-this .li{background-color: #0077b5;}
.amp-share-this .wa{background-color: #25d366;}
.amp-share-this .ta{background-color: #3c5a77;}
.amp-share-this .sms{background-color: #ca2b63;}
.amp-share-this .em{background-color: #000;}

3- Blogunuzun şablon editör sayfasında aşağıdaki kodu bulun.

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

Bulduğunuz kodun kapanış kodundan hemen sonra aşağıdaki kodları ekleyin.

<b:includable id='share-tool' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='amp-share-this'>
<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>

4- AMP sosyal paylaşım butonlarını görüntülemek için, bir önceki yazımızda olduğu gibi blogunuzun sayfalarında görünecek şekilde ekleyin.

Bknz: Whatsapp, Line ve BBM Sosyal Paylaşım Butonları

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='share-tool'/>
</b:if>

Blogunuzun şablon editör sayfasını kaydedin ve blogunuzun sayfalarını kontrol edin.

Bu yazımızda blog sitelerine AMP duyarlı sosyal paylaşım butonlarının nasıl eklendiği hakkında bilgiler paylaştık. Bu yayın ile ilgili soru ve görüşleriniz için yorum bırakabilirsiniz.