HOME → 3 WordPress → 04 運用とトラブル → 

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

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

 

スポンサー リンク

 

 
 
0. 従来の通常画面
 
軽量なソーシャルボタンを自作し、ショートコードで任意の場所に表示できるようにしていた。
軽量なソーシャルボタンを自作
 
 
1. amp-social-shareスクリプトタグをAMPページのheadタグ内に入れる
 
WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する。
WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する
 
右側の「テーマファイル」に表示される「amp」を展開する。
右側の「テーマファイル」に表示される「amp」を展開する
 
「html-start.php」のソースコードの </head> タグの上に、amp-social-share用の専用ライブラリを読み込むスクリプトコードを貼り付ける。
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>
 
※:Facebookには、アプリIDが必要。
 
 
3. SNSボタンを表示したい箇所に、ショートコードを記述
 
広告を表示させたい箇所に、次のショートコードを記述する。
 
SNSボタンを表示する、ショートコード。
SNSボタンを表示する、ショートコード
 
 
4. 表示結果
 
実装は、「ブログ村用のボタン」+「アドセンス用のSNSボタン」+「通常用のSNSボタン」+「アドセンス広告」を纏めて表示するショートコードにした。
 
AMP画面への、通常のアドセンスコードでの表示結果。
AMP画面への、通常のアドセンスコードでの表示
 
AMP画面への、AMPアドセンスコードでの表示結果。
AMP画面への、AMPアドセンスコードでの表示
 
 
課題。
通常ページかAMPページかを判断し、AMPページであれば通常用のSNSボタンを表示しないように、条件分岐を組み込む必要がある。 
 
 
参考:
 
以上。
(2018.08.24)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください