AMPで記事下に「この記事が気に入ったらいいね!」を表示するSimplicityカスタマイズ

AMPとFacebook Like

当ブログのAMP対応カスタマイズ記事の第3弾です。

よく「この記事が気に入ったらいいね!」というパーツが記事下に出ているのを見かけますね。

これ、実は結構クリックされるんです。特にFacebookページに「いいね!」をいただきやすくなり、SNS上でのリーチを高めるのには効果的です。

しかしWordPressでこのようなパーツを手軽に表示できるVA Social Buzzこの記事が気に入ったらいいねは、残念ながらAMPページではひしゃげてしまいます。

また当ブログで使っているSimplicityの場合、AMP化するとフォロー系ボタンが出なくなるのが課題でした。

ならAMP対応したパーツを自分で作ってしまえ・・・というのが今回の趣旨です。

何がどうなるのか

AMP対応した記事ページにおいて、記事下に「この記事が気に入ったらいいね!」を表示します。

仕上がりイメージはこちら。各箇所の文言は自由に設定可能です。AMPで表示した「この記事が気に入ったらいいね!」

カスタマイズの方法

カスタマイズは3ステップで終わります。

AMP用のFacebook Likeスクリプト

1つ目が、AMPに対応したFacebook Likeスクリプトです。

AMP Projectの公式ドキュメントから取得できます。

参考 amp-facebook-like – AMP

これを親テーマのsingle-amp.phpのheadタグの最後にコピペします。

</head>で検索すると挿入箇所が見つけやすいです。

</style>
<!-- ここにコピペ -->
<script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>
</head>

HTML(PHP)

2つ目はHTML本体(PHP)です。

下記コードを、親テーマのsingle-amp.phpの記事下部分(the_content( get_theme_text_read_more() );の直下)にコピペします。

パーツ内の文言を変えたい場合は、該当部分の日本語を修正してください。

FacebookページのURLとTwitterのスクリーン名を忘れずに入れてください。

<div class="amp-fb-like">
 <div class="amp-fb-like-msg">この記事が気に入ったら<br/>いいね!</div>
 <amp-facebook-like width=90 height=30
  layout="fixed"
  data-layout="button_count"
  data-href="自分のFacebookページのURL">
 </amp-facebook-like>
</div>
<div class="amp_share">
 <div class="amp_share_button amp_share_button-fb">
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php urlencode(the_permalink()); ?>"><span class="amp_share_button_text">シェアする</span></a>
 </div>
 <div class="amp_share_button amp_share_button-tw">
  <a href="https://twitter.com/share?url=<?php urlencode(the_permalink()); ?>&amp;text=<?php urlencode(the_title()); ?>"><span class="amp_share_button_text">ツイートする</span></a>
 </div>
</div>
<div class="amp-tw-follow">
 <div class="amp-tw-follow-msg">Twitterを</div>
 <a class="amp-tw-follow-button" href="https://twitter.com/intent/follow?screen_name=自分のTwitter名">フォローする</a>
</div>
編集前のバックアップ取得をお忘れなく!

CSS

最後にCSSです。

子テーマのamp.cssに下記コードを追加します。

好き画像のURL部分は、ブログのヘッダー画像のURLなどを使うとよいかと思います。

.amp-fb-like {
 text-align:center;
 background-image: url(好きな画像のURL);
 color: white;
 background-size: cover;
 padding: .75em;
 margin: .75em 0;
}
.amp-fb-like::before{
 background-color: rgba(0,0,0,0.5);
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 content: ' ';
}
.amp-tw-follow-button {
 background-color: #1b95e0;
 padding: 0.2em 1.5em;
 color: white;
 text-decoration: none;
 border-radius: 5px/5px;
}
.amp-tw-follow {
 background-color: #eee;
 color: #707070;
 padding: .75em;
 text-align: center;
}
.amp_share {
 margin-bottom: .75em;
}
.amp_share:after {
 content: " ";
 clear: both;
 display: table;
}
.amp_share_button {
 float: left;
 width: calc(50% - 7px);
 text-align:center;
}
.amp_share_button a {
 border-radius: 5px;
 color: #fff;
 display: block;
 padding: .75em 0;
 text-decoration: none;
}
.amp_share_button-fb {
 padding-left: 0;
 padding-right: 7px;
}
.amp_share_button-tw {
 padding-left: 7px;
 padding-right: 0;
}
.amp_share_button-fb a{
 background-color: #3b55a0;
}
.amp_share_button-tw a {
 background-color: #1b95e0;
}
スポンサーリンク

注意点など

  • 親テーマのファイルを編集しますので、テーマをバージョンアップすると編集部分が上書きされます。編集内容は別途保存ください
  • 「この記事が気に入ったらいいね!」の背景の暗さを調整したい場合、.amp-fb-like::beforebackground-color:rgba(0,0,0,0.5);の赤字部分の数字を変えてください
  • カスタマイズ後はAMPエラーが出ないかチェックをお願いします
    参考 AMP テスト – Google Search Console
スポンサーリンク

まとめ:「いいね!」を諦めない

以上、AMP化した記事ページでも「この記事が気に入ったらいいね!」を表示するカスタマイズでした。

Simplicity標準のAMPページではフォロー系のボタンが出ず、AMPページ経由でフォローいただくことが難しいのが課題でした。

とはいえ、PVの8割を占める検索経由の読者さんをAMPだからって逃すのはもったいないですよね。

AMP経由でもFacebookページやTwitterをフォローしてほしいな、と思っている方はぜひ参考になさってください。

その他のAMP系カスタマイズはこちらをどうぞ。

AMP化した記事内にAdSenseを自動的に挟み込むSimplicityカスタマイズ
AMP対応した記事ページにAMP用AdSense広告ユニットを自動的に挟み込むカスタマイズの方法です。
AdSense関連コンテンツユニットをAMP化したページに設置する方法
回遊率にも収益にも大きく貢献するAdSenseの関連コンテンツユニット。AMP対応したページに設置するには、広告コードを少しだけ改変すればOKです。

この記事が役に立ったら
いいね!お願いします

ブログで言えない話はTwitterにて
スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアやコメントお待ちしてます

おすすめ記事

こんな記事も読まれています

スポンサーリンク
スポンサーリンク