Lognote

ネット集客に強い整体院サイトを制作

sns-follow-button-thumbnail

STINGER8の記事下にサムネ付きでフォロー誘導ボックスを設置する方法

公開日:2016-02-02
最終更新日:

本日は、STINGER8に上の画像のようなFacebookページのいいねボタンとTwitterのフォローボタンを、記事下に設置する方法のご紹介です。

FacebookページとTwitterのフォローSNSボックス

今回はこちらの記事を参考にさせていただきました。

また、こちらの方法を紹介されているまなしば(@manami1030)さんが、WordPressプラグイン化して配布してくださっています。

自力でカスタマイズするのが面倒という方は、「Like me if you like this article」を使ってみてください。

ここからは自力で表示させるカスタマイズになります。

参考記事と違うところは、

  • 背景色をそれぞれのSNS色に変更
  • Facebookのいいね!ボタンをバルーンに変更

の2点です。

その他不必要だったクラスなどは削除しています。

コード設置

Facebookのボタンを設置する前に、フッターのbodyタグ前に下記を追加します。

<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.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

次にsingle.phpを開き、関連記事のすぐ上に下記を記述します。アカウント名やブログ名は置き換えてください。

<!-- 記事がよかったらいいね ここから -->
<?php if (is_mobile()) :?>
<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>この記事が気に入ったら<br />いいね!しよう</p>
      <div class="p-shareButton__fb-cont p-shareButton__fb">
        <div class="fb-like" data-href="(FBページURL)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
      </div>
    </div>
  </div>
</div>
<div class="p-asideFollowUs__twitter">
  <div class="p-asideFollowUs__twitter__cont">
  <p class="p-asideFollowUs__twitter__item">Twitterで(アカウント名)をフォローしよう!</p><br />
  <a href="(TwitterアカウントURL)" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-show-screen-name="false">@(アカウントID)さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  </div>
</div>
<?php else: ?>
<div style="padding:10px 0px;"></div>
 <!-- 記事がよかったらいいねPC -->
<div class="p-entry__push">
  <div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
    <div class="p-entry__pushLike">
      <p>この記事が気に入ったら<br>いいね!しよう</p>
      <div class="p-entry__pushButton">
        <div class="fb-like" data-href="(FBページURL)" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
      </div>
        <p class="p-entry__note">最新情報をお届けします</p>
    </div>
</div>
<div class="p-entry__tw-follow">
  <div class="p-entry__tw-follow__cont">
    <p class="p-entry__tw-follow__item">Twitterで(アカウント名)をフォローしよう!</p><br />
    <a href="(TwitterアカウントURL)" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-size="large" data-show-screen-name="false">@(アカウントID)さんをフォロー</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  </div>
</div>
<?php endif; ?>
 <!-- 記事がよかったらいいね ここまで -->

最後に、子テーマのCSSに下記を追加します。

.p-shareButton__cont {
}
.p-shareButton__a-cont {
    background-color: #3B5998;
    display: table;
    width: 100%;
    table-layout: fix;
}
.p-shareButton__a-cont__img {
    display: table-cell;
    min-width: 130px;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}
.p-shareButton__a-cont__btn {
    display: table-cell;
    padding: 12px;
    text-align: center;
}
.p-shareButton__a-cont__btn p {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    padding: 5px 0;
    line-height: 1.4;
    margin: auto;
}
.p-asideFollowUs__twitter {
    background-color: #55acee;
    margin-top: 15px;
    padding: 12px 0;
}
.p-asideFollowUs__twitter__cont {
    text-align: center;
}
.p-asideFollowUs__twitter__item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    font-size: 16px;
    color: #fff;
}

/*media Queries PC
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.p-entry__push {
    margin: 20px 0;
    display: table;
    table-layout: fix;
    width: 100%;
    background-color: #3B5998;
}
.p-entry__pushThumb {
    display: table-cell;
    min-width: 240px;
    background-position: center;
    background-size: cover;
}
.p-entry__pushLike {
    display: table-cell;
    padding: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.4;
    font-size: 20px;
}
.p-entry__pushLike p {
    color: #fff;
}
.p-entry__pushButton {
    margin: 15px 0;
    display: inline-block;
    width: 200px;
    height: 40px;
    line-height: 1.4;
    -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: 15px;
    font-size: 16px;
    color: #fff;
}
.p-entry__tw-follow {
    margin-bottom: 10px;
    padding: 15px 0;
    background-color: #55acee;
    width: 100%;
}
.p-entry__tw-follow__cont {
    text-align: center;
}
.p-entry__tw-follow__item {
    display: inline-block;
    vertical-align: middle;
    margin: 15px;
    font-size: 16px;
    color: #fff;
}
}

詳しくはまなしば(@manami1030)さんのブログに記載されていますのでそちらをご参照ください。

追記:2017年5月23日

現在は、いいねボタンのみ寝ログのわいひら(@MrYhira)さんが紹介されているものに変更しています。

sns-follow-button-01

それから、背景色を同じにした方がスマートに見えたので合わせました。カラーコードは#f3f3f3です。

以上、「STINGER8の記事下にサムネ付きでフォロー誘導ボックスを設置する方法」という記事をお届けしました。

-STINGER
-

この記事のタイトルとURLをコピーする
STINGER8の記事下にサムネ付きでフォロー誘導ボックスを設置する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-newentry-toppage-hide-thumbnail

STINGER8の「最近のエントリ」をトップページだけ非表示にする方法

STINGER8のトップページには新着記事一覧が表示されています。 そして、サイドバーには「最近のエントリ」と …

stinger-pay-thumbnail

【悲報】WordPressブロガー人気テーマ「STINGER」シリーズが実質有料になる

先日、WordPressの人気テーマ「STINGER」シリーズが、STINGER8の公開とともにSTINGER …

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこ …

affinger4-difficult-thumbnail

AFFINGER4をアフィリエイター以外にオススメできない理由

WordPressの初心者用テーマの走りとして名高い「STINGERシリーズ」。その第一弾としてSTINGER …

page-top-button-link-change-thumbnail

STINGER7の「ページトップへ戻るボタン」が一番上まで戻らなくなったときの修正方法

ヘッダーの横幅をこちらのサイトを参考に画面いっぱいに広げるカスタマイズをしました。  WebCraf …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい