AMP にサムネイル画像付きの SNS フォローボタンを設置

サムネイル画像付きSNSフォローボタンをAMPページに設置するカスタマイズ

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

サイトにとって、フォロワー獲得は非常に重要。

AMP ページからも、しっかりとフォロワーを獲得しなければなりません。

Simplicity の AMP ページでフォロワーを獲得するために、サムネイル画像付きの SNS フォローボタンエリアを設置されてはいかがでしょうか。

今回のカスタマイズを行うと、 Facebookページ「いいね!」ボタン、 Twitter ・ Google Plus ・ Feedly ・ Push7 のフォローボタンを表示できます。

カスタマイズ後の完成図

Google Plus ・ Feedly ・ Push7 のフォローボタンが不要な場合には、簡単に外せます。

また、通常ページにも、同様の SNS フォローボタンエリアを設置可能です。

カスタマイズ方法は、「プラグインなしでサムネイル画像付きの SNS フォローボタンを設置」でご紹介しています。

SNS の URL を設定

まず Facebookページ ・ Twitter ・ Google Plus ・ Feedly ・ Push7 の URL を、予め Simplicity テーマで設定します。

まだ設定されていない場合には、 WordPress 管理画面 → 外観 → カスタマイズ → SNS よりご設定ください。

Push7 ボタンは、 APPNO を設定していない場合には出力されません。

Facebookページ「いいね!」ボタンの AMP 対応

AMP では、原則 javaScript が使用できません。

そのため、 Facebookページ「いいね!」ボタンを AMP ページで表示させるために、 amp-facebook-like スクリプトを使う必要があります。

まず FTP ソフトなどを使い、親テーマの amp-header.php を子テーマフォルダ直下にコピペをします。

次に、子テーマに設置した amp-header.php を開き、下記のコードを探します。

echo '<link rel="stylesheet" href="https://max'.'cdn.boot'.'strapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">'.PHP_EOL;

上記のコードの上の行に、下記のコードを追加します。

echo '<script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>'.PHP_EOL;

これで AMP ページに、 Facebookページ「いいね!」ボタンを設置できます。

ただし、amp-facebook-like スクリプトは現在英語しか対応しておらず、 Facebookページ「いいね!」のボタンが「 Like 」で表示されます。

アイキャッチ画像取得用のテンプレートを作成

取得するアイキャッチ画像を簡単に AMP に対応させるために、専用のテンプレートを作成します。

FTPソフトを使い、子テーマフォルダ直下に 1 つファイルを作成。

作成したファイルの名前は self-made-amp-sns-follow-area-thum.php とし、下記のコードを追加します。

<?php
if( has_post_thumbnail() && is_eye_catch_visible() ) 
    the_post_thumbnail( array( 400, 400 ) );
?>

AMP に対応したテンプレートを作成

次に SNS フォローボタンエリア本体のテンプレートを作成します。

子テーマフォルダ直下に 1 つファイルを作成し、ファイル名は self-made-amp-sns-follow-area.php とします。

作成した self-made-amp-sns-follow-area.php に、下記のコードを追加します。

<?php // FacebookページのURLを設定
$facebook_page_url = 'https://www.facebook.com/' . get_facebook_follow_id(); ?>

<div class="self-sns-area">
    <!-- facebook -->
    <div class="fb-thumb">
    <?php get_template_part_amp( 'self-made-amp-sns-follow-area-thum' ); // アイキャッチ画像挿入 ?>
        <div class="fbt-in">
            <div class="fbti-text">Facebookページに<span>いいね!をしよう</span></div>
            <div class="fbti-btn">
                <div class="like-btn"><amp-facebook-like width=88 height=48 layout="fixed" data-layout="button" data-href="<?php echo $facebook_page_url; ?>" data-size="large"></amp-facebook-like></div>
            </div>
        </div>
    </div>
    <div class="tw-gp-box">
        <div class="tgb-text">最新ニュース情報を<span>チェックしよう!</span></div>
        <!-- twitter -->
        <div class="tgb-tw">
            <a href="//twitter.com/<?php echo esc_html( get_twitter_follow_id() ); ?>" title="Twitterをフォローします" rel="nofollow"><span class="fa fa-twitter" aria-hidden="true"></span>フォローする</a>
        </div>
        <!-- google-plus -->
        <div class="tgb-gp">
            <a href="//plus.google.com/<?php echo esc_html( get_google_plus_follow_id() ); ?>" title="Google+をフォローします" rel="nofollow publisher"><span class="fa fa-google-plus" aria-hidden="true"></span>フォロー</a>
        </div>
        <!-- google-plusここまで -->
    </div>
</div>
<!-- feedly -->
<div class="self-feedly">
    <a href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="Feedlyに追加します" class="sefe-link" rel="nofollow"><span class="sefe-text">Feedlyに追加</span></a>
</div>
<!-- push7 -->
<?php $push7 = fetch_push7_info();
if( get_push7_follow_app_no() && $push7 ) : // Push7フォローボタンを表示するか ?>
<div class="self-push7">
    <a href='https://<?php echo $push7->domain; ?>' title="Push7で更新情報を購読します" class="sepu-link" rel="nofollow"><span class="sepu-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

アイキャッチ画像の AMP 対応は、 Simplicity に丸投げしています。

Facebookページ「 Like 」ボタンは、AMP 用の <amp-facebook-like> タグを使用。

<amp-facebook-like width=88 height=48 layout="fixed" data-layout="button" data-href="<?php echo $facebook_page_url; ?>" data-size="large"></amp-facebook-like>

AMP エラーを出さないために、上記部分の変更はご注意ください。

Google Plus を使わない場合

Google Plus が不要な方は、上記のコードの中から下記のコードを探し削除します。

<!-- google-plus -->
<div class="tgb-gp">
    <a href="//plus.google.com/<?php echo esc_html( get_google_plus_follow_id() ); ?>" title="Google+をフォローします" rel="nofollow publisher"><span class="fa fa-google-plus" aria-hidden="true"></span>フォロー</a>
</div>
<!-- google-plusここまで -->

Feedly を使わない場合

Feedly が不要な方は、下記のコードを探し削除します。

<!-- feedly -->
<div class="self-feedly">
    <a href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="Feedlyに追加します" class="sefe-link" rel="nofollow"><span class="sefe-text">Feedlyに追加</span></a>
</div>

Push7 を使わない場合

Push7 が不要な方は、下記のコードを探し削除します。

<!-- push7 -->
<?php $push7 = fetch_push7_info();
if( get_push7_follow_app_no() && $push7 ): // Push7フォローボタンを表示するか ?>
<div class="self-push7">
    <a href='https://<?php echo $push7->domain; ?>' title="Push7で更新情報を購読します" class="sepu-link" rel="nofollow"><span class="sepu-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

SNS フォローボタンエリアを設置

作成した self-made-amp-sns-follow-area.php を AMP に設置します。

親テーマの amp-content.php を子テーマフォルダ直下にコピペをし、子テーマに設置した amp-content.php を開きます。

そして、下記のコードを探します。

<?php //AMP用のSNSシェアボタン
get_template_part('sns-amp'); ?>

上記コードの下の行に下記のコードを追加します。

<?php // SNSフォローエリア
get_template_part( 'self-made-amp-sns-follow-area' ); ?>

これで AMP ページの SNS シェアボタンの下に、 SNS フォローボタンエリアを設置できます。

CSS でスタイルする

あとはCSS でスタイルを整えて終わりです。

Feedly ボタンと Push7 ボタンの CSS は、 Facebook・Twitter・Google Plus の CSS とは分けて記載しています。

Facebook・Twitter・Google Plus を表示する場合の CSS

Facebook のいいねボタン、 Twitter と Google Plus のフォローボタンを表示する場合には、下記の CSS を子テーマの amp.css に追加します。

.self-sns-area {
  display: flex;
  margin-bottom: 8px;
}

.fb-thumb,
.tw-gp-box {
  height: 168px;
  flex: 0 1 50%;
  max-width: 50%;
}

.fb-thumb {
  background: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, .7);
  position: relative;
}

.fb-thumb > amp-img {
  height: 168px;
  opacity: .7;
}

.fb-thumb img {
  object-fit: cover;
}

.fbt-in {
  position: absolute;
  top: 18.5px;
  width: 100%;
}

.fbti-text,
.tgb-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;  
  text-align: center;
}

.fbti-text > span,
.tgb-text > span {
  display: block;
}

.fbti-btn {
  margin-top: 12.5px;
  text-align: center;
}

.like-btn {
  height: 28px;
  margin: auto;
  width: 63px;
}

.tw-gp-box {
  background: #111;
}

.tgb-text {
  margin: 18.5px 0 10.5px;
}

.tgb-tw {
  background: #1b95e0;
  border-radius: 4px;
  height: 28px;
  line-height: 26px;
  margin: 0 auto;
  width: 119px;
}

.tgb-tw:active,
.tgb-tw:focus,
.tgb-tw:hover {
  background: #0c7abf;
}

.tgb-tw > a {
  color: #fff;
  display: block;
  font-size: 13px;
  padding: 1px 10px 1px 9px;
  text-decoration: none;
}

.tgb-tw .fa {
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.tgb-gp {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .17);
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  height: 24px;
  line-height: 23px;
  margin: 16px auto 0;
  transition: .218s;
  width: 122px;
}

.tgb-gp:active {
  background: #e5e5e5;
  border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: inset 0 1px 0 #ddd;
}

.tgb-gp > a {
  color: #262626;
  display: block;
  padding-left: 47px;
  position: relative;
  text-decoration: none;
}

.tgb-gp .fa {
  bottom: 4px;
  color: #db4437;
  font-size: 13px;
  left: 2px;
  position: absolute;
}

Facebook・Twitter を表示する場合の CSS

Google Plus のフォローボタンを表示せず、 Facebook のいいねボタンと Twitter のフォローボタンを表示する場合には、下記の CSS を子テーマの amp.css に追加します。

.self-sns-area {
  display: flex;
  margin-bottom: 8px;
}

.fb-thumb,
.tw-gp-box {
  height: 168px;
  flex: 0 1 50%;
  max-width: 50%;
}

.fb-thumb {
  background: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%) rgba(0, 0, 0, .7);
  position: relative;
}

.fb-thumb > amp-img {
  height: 168px;
  opacity: .7;
}

.fb-thumb img {
  object-fit: cover;
}

.fbt-in {
  position: absolute;
  top: 26.5px;
  width: 100%;
}

.fbti-text,
.tgb-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;  
  text-align: center;
}

.fbti-text > span,
.tgb-text > span {
  display: block;
}

.fbti-btn {
  margin-top: 12.5px;
  text-align: center;
}

.like-btn {
  height: 28px;
  margin: auto;
  width: 63px;
}

.tw-gp-box {
  background: #111;
}

.tgb-text {
  margin: 26.5px 0 12.5px;
}

.tgb-tw {
  background: #1b95e0;
  border-radius: 4px;
  height: 28px;
  line-height: 26px;
  margin: 0 auto;
  width: 119px;
}

.tgb-tw:active,
.tgb-tw:focus,
.tgb-tw:hover {
  background: #0c7abf;
}

.tgb-tw > a {
  color: #fff;
  display: block;
  font-size: 13px;
  padding: 1px 10px 1px 9px;
  text-decoration: none;
}

.tgb-tw .fa {
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

Feedly ボタン・Push7 ボタンを表示する場合の CSS

Feedly ボタン・Push7 ボタンを表示する場合には、下記の CSS を子テーマの amp.css に追加します。

どちらか一方しか表示しない場合でも、同じ CSS です。

@font-face {
  font-family: icomoon;
  src: url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.ttf?hd9e6o') format('truetype'),
       url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.woff?hd9e6o') format('woff'),
       url('サイトのURL/wp-content/themes/simplicity2/webfonts/icomoon/fonts/icomoon.svg?hd9e6o#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.sefe-link,
.sepu-link {
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  display: block;
  height: 48px;
  line-height: 48px;
  margin-bottom: 8px;
  text-align: center;
  text-decoration: none;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.sefe-link {
  background: #6CC655;
}

.sepu-link {
  background: #efad00;
}

.sefe-link:hover,
.sepu-link:hover {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, .2);
  transform: translateY(-1px);
}

.sefe-text,
.sepu-text {
  color: #fff;
  font-size: 17px;
}

.sefe-text:before,
.sepu-text:before {
  display: inline-block;
  font: normal normal normal 26px/1 icomoon;
  margin-right: 8px;
  position: relative;
  top: 4px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.sefe-text:before {
  content: '\e92e';
  font-size: 29px;
}

.sepu-text:before {
  content: '\e90e';
}

「 Simplicity の AMP ページでシェアボタンに SNS アイコンを表示する」でご紹介している方法で、アイコンを表示しています。

@font-face {} で指定している 3ヶ所のサイトのURL の部分には、ご自身のサイト URL を https または http よりご指定ください。

すでに amp.css に @font-face で Simplicity の Icomoon を指定している場合には、 @font-face {} の部分はすべて削除します。


AMP ページは、ただ単にサイトを閲覧するだけのページではありません。

サイト訪問者が、 SNS をフォローするなどの行動を起こせるページです。

amp-facebook-like スクリプトがせっかく用意されているため、 AMP ページを充実させてはいかがでしょうか。