部長ナビのページはApple製品のレビューを中心としたブログです。ドラマ仕立ての長期連載も見てね!

SimplicityでFacebookページの「いいね!」ボックスを設置する方法

2390914273_9b1ee4ee61_z

こんにちは。部長ナビ(@nabi_1080)です

Facebookページの「いいね!」は、SNS拡散が必要なWordPressにおいて非常に重要な意味を持つと思っております

SimplicityにはデフォルトでFacebookページの「いいね!」のボックスがあるんですけど、カッコいいボックスを設置する方法を「Simplicityバージョン」ということで紹介させていただきたいと思います

1 「single.php」をForkLiftで子テーマに移動!

こんにちは。WordPress初心者の部長ナビ(@nabi_1080)です。日々カスタマイズ頑張っております! さて、Simplicityのカスタマイズについては、色々な記事を書い

↑この記事の通り、ForkLiftを使いまして、親テーマの「single.php」を子テーマに移動します。カスタマイズは子テーマで行いましょう!

2 single.phpに追記

次のコードを追記しますが、

<div class="fb-like" data-href="https://www.facebook.com/nabi1080/"

↑このアドレスはウチのFacebookページなので、このままやると、ウチのいいね!が増えます(笑)。ご自分のFacebookページのアドレスを入れてください。PC、モバイルと2カ所Facebookページのアドレスを入れてください

場所は<section id=”under-entry-body”>の下になります(<>は全角で表示していますが、実際は半角です)

<!-- 記事がよかったらいいね ここから -->
<?php if (is_mobile()) :?>
      <div class="p-shareButton p-asideList p-shareButton-bottom">
        <div class="p-shareButton__cont">
          <div class="p-shareButton__a-cont">
            <div class="p-shareButton__a-cont__img" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
            <div class="p-shareButton__a-cont__btn">
              <p>この記事が気に入ったらいいね!しよう</p>
              <div class="p-shareButton__fb-cont p-shareButton__fb">
                <div class="fb-like" data-href="https://www.facebook.com/nabi1080/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                <span class="p-shareButton__fb-unable"></span>
              </div>
            </div>
          </div>
        </div>
<?php else: ?>
<div style="padding:10px 0px;"></div>

<!-- 記事がよかったらいいねPC -->
            <div class="p-entry__push">
              <div class="p-entry__pushLike">
                <p>この記事が気に入ったら<br>いいね!しよう</p>
                <div class="p-entry__pushButton">
<div class="fb-like" data-href="https://www.facebook.com/nabi1080/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                </div>
                <p class="p-entry__note">最新情報をお届けします</p>
              </div>
              <div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
            </div>
                        
<?php endif; ?>
<!-- 記事がよかったらいいね ここまで -->

このコードを追記すると、当ブログと同じ表示になります

3 style.cssに追記

モバイルの微調整も行いましたので、以下のコードをstyle.cssに追記してください

/*記事がよかったら、いいねスマホ*/
.p-shareButton-bottom {
    padding-bottom: 15px;
    overflow: hidden;
}
.p-shareButton__buttons {
    font-weight: 700;
    color: #fff;
    font-size: 13px;
    text-align: center;
}

.p-shareButton__buttons>li {
    padding-left: 3px;
    padding-right: 4px;
}

.p-shareButton__buttons .c-btn {
    padding: 8px 0;
    border-radius: 2px;
}
.p-shareButton__buttons .c-ico {
    display: block;
    margin: 0;
}
.p-shareButton__fb {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    width: 115px;
}
.p-shareButton__fb-cont {
    position: relative;
    width: 108px;
    margin: 0 auto;
}
.p-shareButton__fb-unable {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
}
.p-shareButton__cont {
    margin: 15px 0 0;
}
.p-shareButton__a-cont {
    background: #2e2e2e;
    display: table;
    width: 100%;
}

.p-shareButton__a-cont__img {
    display: table-cell;
    min-width: 130px;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.p-shareButton__a-cont__btn {
    display: table-cell;
    padding: 10px 12px 30px 12px;
    text-align: center;
}
.p-shareButton__a-cont__btn p {
    font-size: 12px;
    color: #fff;
    font-weight: 700;
    padding: 0px 0 5px;
    line-height: 1.4;
    margin-bottom: 0px;
}

/*記事がよかったら、いいねPC*/
.p-entry__push {
    margin-bottom: 20px;
    display: table;
    table-layout: fix;
    width: 100%;
    background-color: #2b2b2b;
    color: #fff;
}
.p-entry__pushThumb {
    display: table-cell;
    min-width: 240px;
    background-position: center;
background-size:cover;
}
.p-entry__pushLike {
    display: table-cell;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 20px;
}
.p-entry__pushButton {
    margin-top: 15px;
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 20px;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.p-entry__pushButtonLike {
    line-height: 1;
}
.p-entry__note {
    margin-top: 5px;
    font-size: 12px;
    color: #999;
}

4 完成

コレで完成だと思います。ウチと同じようになるはずです

5 デフォルトの「Facebookページ」のボックスを外す

外観→ウィジェットから外すことができます。コレでオーケーですね。

かなり良い感じになると思うので、ぜひ、Simplicityお使いの皆さん、カッコいいFacebookページ「いいね!」ボックス、使ってみてくださいね!

フォロー購読方法について >

関連記事もっと記事を読む >

  1. Home >
  2. Facebook >
  3. Facebookの使い方やTips >