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用のスクリプトコード。
 
 
2. SNSボタンを表示するショートコードの作成
 
テキストエディターで記述したAMP用の <amp-social-share> タグが、ビジュアルエディターに切り替えると消えてしまう。
→ この対策として、「ショートコード」にした。
 
ショートコードのファイル名を「amp-sns.php」とした。
 
SNSボタンを表示する、ショートコード用 php。
 
※:Facebookには、アプリIDが必要。
 
 
3. SNSボタンを表示したい箇所に、ショートコードを記述
 
広告を表示させたい箇所に、次のショートコードを記述する。
 
SNSボタン表示、ショートコード。
 
 
4. 表示結果
 
実装は、「ブログ村用のボタン」+「アドセンス用のSNSボタン」+「通常用のSNSボタン」+「アドセンス広告」を纏めて表示するショートコードにした。
 
AMP画面への、通常のアドセンスコードでの表示結果。
AMP画面への、通常のアドセンスコードでの表示
 
AMP画面への、AMPアドセンスコードでの表示結果。
AMP画面への、AMPアドセンスコードでの表示
 
 
課題。
通常ページかAMPページかを判断し、AMPページであれば通常用のSNSボタンを表示しないように、条件分岐を組み込む必要がある。 
 
 
以上。
(2018.08.24)
 
             

スポンサー リンク
 

コメントを残す

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

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