Amp for WordPressでSNSシェアボタンを設置する方法【コピペ】

Amp for WordPressでSNSシェアボタンを設置する方法【コピペ】

どうも、だいち(@spountant)です。

Amp for WordPress」プラグインを使ったとき、AMP表示時にSNSシェアボタンは実装されていない。

AMPでも通常時と変わらない仕様にするために、このページではAMPページにSNSシェアボタンを設置する方法を紹介していく。

 

ワードプレスのテーマからAMPを変更できるようにセットアップする

まずはFileZillaというFTPサーバーをいじれるソフトを使って、ワードプレスのテーマに新しいAMPのphpを追加しよう。

この設定を先に終わらせておくことで、後々AMPのデザインを変更する際にとてもラクになる。

小難しいかもしれないが、以下の記事で図解付きで解説したので、一度この通りにやってみてほしい。

関連記事:FileZillaでWordPressのテーマにAMPのphpを実装する手順【図解】

 

AMP表示のとき、記事直下にSNSシェアボタンを設置する

上記の設定が完了したら、「テーマの編集」→「amp」→「html-start.php」のhead内(20行目あたり)に以下のコードを追加する。

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

そしてSNSシェアボタンを設置したい場所に以下のコードを追加する。自分は記事の直下に設置したかったので、「amp」→「single.php」の30行目あたりに記述した。

<!-- SNSシェアボタン -->		
	<amp-social-share type="twitter"></amp-social-share>
	<amp-social-share type="facebook"data-param-app_id="906093976231973"></amp-social-share>
	<amp-social-share type="line"></amp-social-share>

上記はTwitter、Facebook、LINEのシェアボタンで、FacebookのみアプリIDが必要となる。その取得方法は以下の記事がわかりやすかった。

参考記事:Facebook アプリID取得方法

 

これ以外にもlinkedin、pinterest、tumblr、whatsappなどのシェアボタンもある。

<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="pinterest" data-param-media="https://ampbyexample.com/img/amp.jpg"></amp-social-share>
<amp-social-share type="tumblr"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>

 

ほかにもAMPのデザインを変更したい場合

これでSNSシェアボタンを設置完了だ。

ほかにも関連記事の表示や、表示色の変更をしたい場合は以下の記事で解説したので、ぜひ参考にしてみてほしい。

関連記事:AMP表示におけるおすすめのデザイン変更・調整まとめ

 

URL :
TRACKBACK URL :