Simplicity に画像付き SNS フォローエリアを設置するカスタマイズ

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

<?php
$facebook_page_url = 'https://www.facebook.com/' . get_facebook_follow_id();

// 通常ページで Facebook スクリプトを使用する
if ( ! is_amp() ) {
  global $g_facebook_sdk;
  $g_facebook_sdk = true;
}
?>

<div class="follow-area">
  <div class="fb-box">
    <?php
    if ( is_amp() ) {
      get_template_part_amp( 'self-made-sns-follow-area-thum' );
    } else {
      get_template_part( 'self-made-sns-follow-area-thum' );
    }
    ?>
    <div class="fb-in">
      <p class="fb-text"><span>Facebook ページに</span>いいね！をする</p>
      <div class="fb-btn">
        <?php if ( is_amp() ) : ?>
        <div class="fb-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></div>
        <?php else : ?>
        <div class="fb-like" data-href="<?php echo $facebook_page_url; ?>" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
        <?php endif; ?>
      </div>
    </div>
  </div>
  <div class="twitter-box">
    <p class="twitter-text"><span>最新ニュース情報を</span>チェックしよう！</p>
    <div class="twitter-btn">
      <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><span>フォローする</span></a>
    </div>
  </div>
</div>
<!-- feedly -->
<div class="feedly-btn">
  <a class="feedly-link" href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="Feedlyに追加します" rel="nofollow"><span class="feedly-text">Feedlyに追加</span></a>
</div>
<!-- push7 -->
<?php $push7 = fetch_push7_info();
if ( get_push7_follow_app_no() && $push7 ) : ?>
<div class="push7-btn">
  <a class="push7-link" href='https://<?php echo $push7->domain; ?>' title="Push7で更新情報を購読します" rel="nofollow"><span class="push7-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

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

.fb-box,
.twitter-box {
  height: 168px;
  position: relative;
  width: 50%;
}

.fb-box {
  background: #333;
}

.fb-box:before {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.fb-box img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.fb-box amp-img {
  height: 100%;
}

.fb-in {
  position: absolute;
  top: 26.5px;
  width: 100%;
  z-index: 1;
}

.fb-text,
.twitter-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;
  margin: 0;
  text-align: center;
}

.fb-text > span,
.twitter-text > span {
  display: block;
}

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

.twitter-box {
  background: #111;
}

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

.twitter-btn {
  background: #1b95e0;
  border-radius: 4px;
  display: flex;
  height: 28px;
  justify-content: center;
  line-height: 28px;
  margin: 0 auto;
  width: 119px;
}

.twitter-btn:active,
.twitter-btn:focus,
.twitter-btn:hover {
  background: #0c7abf;
}

.twitter-btn > a {
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

.twitter-btn .fa {
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 1.6px;
}

/* Feedly & Push7 */
.feedly-link,
.push7-link {
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: block;
  height: 48px;
  line-height: 48px;
  margin-bottom: 8px;
  text-align: center;
  text-decoration: none;
  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feedly-link {
  background: #6cc655;
}

.push7-link {
  background: #efad00;
}

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

.feedly-text,
.push7-text {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 17px;
  justify-content: center;
}

.feedly-text::before,
.push7-text::before {
  display: inline-block;
  font: normal normal normal 26px/1 icomoon;
  margin-right: 8px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

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

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