AMPカスタマイズ SNSボタン（ソーシャルボタン）を表示する

tacsan

6年前

WordPress Twenty Seventeen
AMPページに
SNSボタン（ソーシャルボタン）を表示する

SNSボタンの表示要領。

①．amp-social-shareスクリプトタグをAMPページのheadタグ内に入れる
　→「html-start.php」のカスタマイズ。
②．SNSボタンを表示するショートコードを作成する
　→ <amp-social-share> タグが、ビジュアルエディターで削除されるため。
③．SNSボタンを表示したい箇所に、ショートコードを記述

以下、AMPページにSNSボタンを表示させた記録。

0. 従来の通常画面

軽量なソーシャルボタンを自作し、ショートコードで任意の場所に表示できるようにしていた。

1. amp-social-shareスクリプトタグをAMPページのheadタグ内に入れる

WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する。

右側の「テーマファイル」に表示される「amp」を展開する。

「html-start.php」のソースコードの </head> タグの上に、amp-social-share用の専用ライブラリを読み込むスクリプトコードを貼り付ける。

amp-social-share用のスクリプトコード。

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

2. SNSボタンを表示するショートコードの作成

テキストエディターで記述したAMP用の <amp-social-share> タグが、ビジュアルエディターに切り替えると消えてしまう。
→　この対策として、「ショートコード」にした。

ショートコードのファイル名を「amp-sns.php」とした。

SNSボタンを表示する、ショートコード用 php。

<?php

?>

<div align="center">
<amp-social-share type="email"></amp-social-share>
&nbsp;<amp-social-share type="facebook" data-param-app_id="xxxxxxxxxxxxxxx"></amp-social-share>
&nbsp;<amp-social-share type="linkedin"></amp-social-share>
&nbsp;<amp-social-share type="pinterest"></amp-social-share>
&nbsp;<amp-social-share type="gplus"></amp-social-share>
&nbsp;<amp-social-share type="tumblr"></amp-social-share>
&nbsp;<amp-social-share type="twitter"></amp-social-share>
&nbsp;<amp-social-share type="whatsapp"></amp-social-share>
</div>