バイラルサイトっぽいFacebookフォローエリアを作成する方法｜WordPressカスタマイズ

//100×100pxのサムネイルを作成
add_image_size('thumb100',100,100,true);

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<?php //フェイスブックページのURLを設定↓
$facebook_page_url = 'https://www.facebook.com/nelog.jp'; ?>
<div class="article-like">
  <div class="article-like-thumb">
    <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
      <?php the_post_thumbnail( 'thumb100', array('class' => 'article-like-entry-thumnail', 'alt' => get_the_title()) ); ?>
    <?php else: // サムネイルを持っていない ?>
      <img src="<?php echo get_template_directory_uri();//get_stylesheet_directory_uri();子テーマに画像を置いた場合 ?>/images/no-image.png" alt="NO IMAGE" class="article-like-entry-thumnail no-image" />
    <?php endif; ?>
  </div>
  <div class="article-like-arrow-box">
    <div class="article-like-arrow-box-in">
      <div class="article-like-button">
        <div class="fb-like fb-like-pc" data-href="<?php echo $facebook_page_url; ?>" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>

        <div class="fb-like fb-like-mobile" data-href="<?php echo $facebook_page_url; ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3&appId=569002053185714";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
      </div>
      <div class="article-like-body">
        この記事をお届けした<br>
        <?php bloginfo('name'); ?>の最新ニュース情報を、<br>
        <span style="color: #F27C8E;font-weight: bold;font-size: 1.1em;">いいね</span>してチェックしよう！
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>

<?php //いいねボタンエリアの呼び出し
get_template_part('facebook-page-like') ?>

/************************************
** Facebookページを「いいね！」するエリアのスタイル
************************************/
div.fb-like-mobile{
  display: none;
}
.article-like{
  height: 100px;
}
.article-like-thumb{
  float: left;
  width: 100px;
}
.article-like-thumb img{
  display: block;
}
.article-like-body{
  margin-right: 140px;
  float: none;
  padding: 10px;
  font-size: 18px;
  line-height: 1.3em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.article-like-body::after{
  content: '\f054';
  position: absolute;
  right: 110px;
  top: 27px;
  color: #ccc;
  font-size: 50px;
  font-family: FontAwesome;
  line-height: 100%;
}
.article-like-button {
  background-color: #f3f3f3;
  width: 100px;
  height: 100px;
  text-align: center;
  float: right;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.article-like-arrow-box {
  float: left;
  position: relative;
  border: 1px solid #bbb;
  margin-left: 12px;
  width: calc(100% - 120px);
  border-radius: 5px;
}
.article-like-arrow-box-in{
  height: 100px;
  overflow: hidden;
}
.article-like-arrow-box:after, .article-like-arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.article-like-arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}
.article-like-arrow-box:before {
  border-color: rgba(221, 221, 221, 0);
  border-right-color: #bbb;
  border-width: 11px;
  margin-top: -11px;
}
.clear{
  clear: both;
}

@media screen and (max-width:639px){
  br{display: none;}
  .article-like-body{
    margin-right: 100px;
    font-size: 1em;
    line-height: 1.2em;
  }
  .article-like-body::after{
    display: none;
  }
}

@media screen and (max-width:440px){
  .article-like-body{
    font-size: 0.8em;
    padding: 5px;
    line-height: 1.1em;
    margin-right: 0;
  }
  .article-like-arrow-box{
    height: 100px;
  }
  .article-like-button{
    float: none;
    width: 100%;
    height: 30px;
    display: block;
  }
  div.fb-like-mobile{
    display: block;
  }
  div.fb-like-pc{
    display: none;
  }
}