WordPressに「この記事が気に入ったらいいね！しよう」を設置する方法

WordPressブログの記事下に、「この記事が気に入ったらいいね！しよう」みたいな形でFacebookいいね！ボタンやTwitterフォローボタンを表示するボックスが設置されているのをよく見かけますよね。

SNSでの拡散を狙うバイラルメディアでは、もはや必須とも言える機能かもしれません。

この記事が気に入ったらいいねというプラグインを使えば簡単に設置できますが、せっかく自作してみたので、今回はそのメモです。

今回作成した「この記事が気に入ったらいいね！しよう」ボックスの仕様をまとめると以下のような感じです。

ボックスの背景にはその記事のサムネイル画像を表示
サムネイルがなければ代替画像を表示
FBページのいいね！ボタンとTwitterアカウントのフォローボタンを設置
各SNSで取得できるコードをそのまま貼り付ければ使えるように
レスポンシブ設計(480pxと768pxでスタイル切替)

WordPressに「この記事が気に入ったらいいね！しよう」を設置する方法

テーマ内の設置したい箇所に下記のソースを追記します。

PHP

<div class="follow">
<div class="thumb" style="background-image:url(<?php
  $image_id = get_post_thumbnail_id();
  $image_url = wp_get_attachment_image_src($image_id, true);
?>
<?php if ( has_post_thumbnail() ): ?>
  <?php echo $image_url[0]; ?>
<?php else: ?>
  <?php bloginfo('template_url'); ?>/images/no_image.png
<?php endif; ?>);"></div>
<div class="layer">
<div class="follow_inner">
<ul class="follow_btns">
<li>
<!-- ここにFacebookいいね！ボタンのコード -->
</li>
<li>
<!-- ここにTwitterフォローボタンのコード -->
</li>
</ul><!-- .follow_btns -->
<div class="msg">
<p>この記事を気に入ったら<br />いいね！&amp;フォローしよう<span>最新情報をお届けします</span></p>
</div><!-- .msg -->
</div><!-- .follow_inner -->
</div>
</div><!-- .follow -->

上記ソースのスタイルを指定するCSSはこんな感じ。
ブレイクポイントはお好みで調整してください。

CSS

/* この記事が気に入ったらいいね！しよう
===============================================*/

.follow {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.follow .thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  background-size: cover;
}

.follow .layer {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.9) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.9) 60%,rgba(0,0,0,0.9) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.75) 30%,rgba(0,0,0,0.9) 60%,rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#e6000000',GradientType=0 );
}

.follow .follow_inner {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.follow .follow_inner ul {
  width: 100%;
  text-align: center;
}

.follow .follow_inner ul li {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.2em;
}

.follow .follow_inner .msg {
  color: #fff;
  text-align: center;
  line-height: 1.5;
  font-weight: bold;
}

.follow .follow_inner .msg span {
  display: block;
  text-align: center;
  font-weight: normal;
}

@media (min-width: 769px) {

  .follow {
    margin-bottom: 20px;
  }

  .follow .follow_inner ul {
    margin-bottom: 20px;
  }

  .follow .follow_inner .msg {
    font-size: 150%;
  }

  .follow .follow_inner .msg span {
    font-size: 58.33%;
    margin-top: 10px;
  }

}

@media (min-width: 481px) and (max-width: 768px) {

  .follow .follow_inner ul {
    margin-bottom: 10px;
  }

  .follow .follow_inner .msg {
    font-size: 131.25%;
  }

  .follow .follow_inner .msg span {
    font-size: 66.66%;
    margin-top: 6px;
  }

}

@media (max-width: 480px) {

  .follow {
    margin-bottom: 20px;
  }

  .follow .follow_inner ul {
    margin-bottom: 0;
  }

  .follow .follow_inner .msg {
    font-size: 100%;
  }

  .follow .follow_inner .msg span {
    font-size: 75%;
    margin-top: 6px;
  }

}