Wordpressカスタマイズ

AMPページに『シェアボタン』を設置する方法!【Twitter/はてブ/facebook/LINE】

投稿日:2016年11月22日 更新日:

シェアする

スポンサーリンク

こんちゃす、たけ氏でっす!

話題の『AMP』

通常のアドセンスが表示されなくなるので、そこは以前対応しました
『AMPってなんぞや?』っていう方、まだAMP対応してない!っていう方は↓の記事を参考にしてみてください

[blc url="http://30cm.xyz/ampad/"]

 

そんなAMPですが、問題点がまたひとつ

『サイトデザインが変わるのでシェアボタンが表示されない』

ぼくのような弱小ブロガーにこれまた痛い…!

 

なので今回はシェアボタンでも重要な

  • 『Twitter(ツイートボタン)』
  • 『はてなブックマーク(ブクマボタン)』
  • 『facebook(シェアボタン)』
  • 『LINE(LINEで送るボタン)』

の4つを実装してみました!

 

やり方を簡単にまとめましたので以下からドウゾ~~

※カスタマイズは自己責任でお願い致します、
不利益なことがおきても筆者は責任を負えません

 

シェアボタンの画像を準備する

今回は『Twitter』『はてブ』『facebook』『LINE』のシェアボタンを設置するので、それぞれのボタン画像を用意します

share-twitter
share-hatebu
share-facebook
share-line

簡単に自作してみました
(Twitterだけでかい…w)

ダウンロードして使っていただいて大丈夫です!
(直リンクはやめてね)

他の画像でも何でもいいので、アップロードして画像の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-1

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ページ下部にTwitter・Facebook・はてブボタンが設置されてるみたいですが、LINEは含まれてないのでWordpressの特権ですね~!

今回は『Twitter』『はてブ』『facebook』『LINE』のシェアボタンを設置しましたが、Wordpressなら応用すれば他のシェアボタンも設置できますっ

はてな民のみなさん、この機にぜひWPへ来ませんか…フッフッフ

 

以上っ!たけ氏でした!

この記事をシェアする!

おすすめ記事

1

こんちゃす、たけ氏でっす! 『メジャーな漫画はもう読んだ、次はちょっとマイナー漫画だ!』という方におすすめの、超面白い漫画を紹介します! マイナーの基準が難しいですけど メジャーでない なんか読んでる ...

2

こんちゃす、たけ氏でっす!   何度も繰り返して読んだり、本棚から引っ張り出して読み返しちゃう漫画ってありますよね! 今回はぼくが何度も読んだ漫画を紹介してみますっ ルールは 2回以上読み返 ...

3

こんちゃす、たけ氏でっす! 知り合いに必ず1人はいる『たけし』 かく言うぼくもたけしです そんなぼくがある日『アニメに出てくるたけしってどれだけ居るんだろう』と思い立ったのが地獄の始まり。まさかこんな ...

-Wordpressカスタマイズ

Copyright© 人生あと30cm! , 2024 AllRights Reserved Powered by AFFINGER4.