こんちゃす、たけ氏でっす！
話題の『AMP』
通常のアドセンスが表示されなくなるので、そこは以前対応しました
『AMPってなんぞや？』っていう方、まだAMP対応してない！っていう方は↓の記事を参考にしてみてください
[blc url="http://30cm.xyz/ampad/"]
そんなAMPですが、問題点がまたひとつ
『サイトデザインが変わるのでシェアボタンが表示されない』
ぼくのような弱小ブロガーにこれまた痛い…！
なので今回はシェアボタンでも重要な
- 『Twitter（ツイートボタン）』
- 『はてなブックマーク（ブクマボタン）』
- 『facebook（シェアボタン）』
- 『LINE（LINEで送るボタン）』
の４つを実装してみました！
やり方を簡単にまとめましたので以下からドウゾ～～
※カスタマイズは自己責任でお願い致します、
不利益なことがおきても筆者は責任を負えません
シェアボタンの画像を準備する
今回は『Twitter』『はてブ』『facebook』『LINE』のシェアボタンを設置するので、それぞれのボタン画像を用意します
簡単に自作してみました
（Twitterだけでかい…ｗ）
ダウンロードして使っていただいて大丈夫です！
（直リンクはやめてね）
他の画像でも何でもいいので、アップロードして画像のURLを取得します
AMP用IMGタグを確認する
AMPページで画像を表示するには通常のimgタグとは違い、『<amp-img>』という専用のタグを使います
<amp-img
src="画像URL"
width="60"
height="50"
layout="fixed">
</amp-img>
画像URLはそれぞれアップロードした画像のURLを入れ込みます
width,heightもご自身の用意した画像に合わせて指定してください
（ぼくが作った画像を使う場合W60/H50でOK！）
layout="fixed"というのは『指定したサイズで表示する』という意味ですのでそのままでOK
このタグはシェアボタンのみでなく、応用すればブログのバナーなども表示できますので覚えておくといいかも！
実際に追記する
今回のシェアボタンは前回追加した記事下アドセンスの上に表示させようと思います
管理ページのサイドバーから、プラグイン→インストール済みプラグインにアクセス
AMPプラグインの『編集』を押します
すると『amp/amp.php の編集 (停止中)』と言うページに移動しますので
右の一覧から『amp/templates/single.php』を探してクリックします
『amp/templates/single.php の編集 (停止中)』と言うページに移動されればOKです
このphpコードがAMPページのコードです
AMPアドセンスの記事を参考にコードを追記している場合は『<!-- AMPアドセンス -->』の上、追記しておらず素の状態の場合は『</article>』タグの上にAMPシェアボタンコードを追記します。
</footer>
<!-- シェアボタン設置 -->
<div align="center">
シェアする<br/><!-- ツイートボタン -->
<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title();?> - <?php bloginfo( $show ); ?>&related=jin30cm">
<amp-img
src="Twitterボタンの画像URL"
width="60"
height="50"
alt="ツイートする"
layout="fixed">
</amp-img></a><!-- はてブボタン -->
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
<amp-img
src="はてブボタンの画像URL"
width="60"
height="50"
alt="はてなブックマークする"
layout="fixed">
</amp-img></a><!-- facebookボタン -->
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php the_permalink(); ?>&t=<?php the_title(); ?>">
<amp-img
src="facebookボタンの画像URL"
width="60"
height="50"
alt="facebookでシェアする"
layout="fixed">
</amp-img></a><!-- LINEボタン -->
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0A<?php the_permalink(); ?>">
<amp-img
src="LINEボタンの画像URL"
width="60"
height="50"
alt="LINEで送る"
layout="fixed">
</amp-img></a>
</div><!-- AMPアドセンス -->
（略）
</amp-ad></article>
灰太字部分は元々のコードです
灰色部分は以前AMPアドセンスを追記した場合のみあるコードです（通常はありません）
赤字部分はそれぞれご自身の環境に合わせて変更してください
茶色部分がWordperss標準搭載の関数で、記事タイトルやURLを取得するコードです
これで、記事下にシェアボタンを設置することができました！
AMPページにシェアボタン設置完了〜！ pic.twitter.com/0vIfxPVKqH
— たけ氏 (@jin30cm) 2016年11月22日
応用すれば同じように記事上に設置することも可能ですので色々試してみてください！
おわりに
はてなブログはAMPページ下部にTwitter・Facebook・はてブボタンが設置されてるみたいですが、LINEは含まれてないのでWordpressの特権ですね～！
今回は『Twitter』『はてブ』『facebook』『LINE』のシェアボタンを設置しましたが、Wordpressなら応用すれば他のシェアボタンも設置できますっ
はてな民のみなさん、この機にぜひWPへ来ませんか…フッフッフ
以上っ！たけ氏でした！
