プラグインなしでサムネイル画像付きの SNS フォローボタンを設置

サムネイル画像付きSNSフォローボタン

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所SNS
カスタマイズ方法PHP ・ CSS
テンプレート変更なし
コピペの可否100% 可能

Simplicity には、オリジナルウィジェットの Facebookページ「いいね!」があります。

このウィジェットは非常にいいね!

サムネイルがあるため、すごく目立ちます。

また、数ある SNS ボタンのタイプの中で、断トツのクリック率を誇るオリジナルのボタンが表示されます。

でも… Twitter のフォローボタンがないのが不満。

ということで、 IRORIO を真似して SNS フォローボタンエリアを自作しました。ついでに Google Plus と Feedly 、 Push7 もつけてみた。

自作のSNSフォローボタンエリア

Facebookページ「いいね!」ボタンはオリジナルのものですが、 Twitter と Google Plus はオリジナルに似せた自作ボタンです。

また、Google Plus や Feedly 、 Push7 が不要な場合は、簡単に外せます。

この SNS フォローボタンエリアを、 Simplicity に設置するカスタマイズをご紹介します。

SNS の URL を登録する

各 SNS の URL は、テーマ側で設定する URL を使用します。

WordPress 管理画面 → 外観 → カスタマイズ → SNS から、使用するご自身の SNS の URL を予め登録しておきます。

Push7 については、 APPNO を登録していないと出力すらされません。

テンプレートファイルを作成する

次に SNS フォローボタンエリア専用のテンプレートファイルを作成します。

FTP ソフトを使い simplicity2-child の直下に 1つファイルを作成し、ファイル名を self-made-sns-follow-area.php とします。

作成した self-made-sns-follow-area.php に、下記のコードをコピペ。

<?php //FacebookページのURLを設定
$facebook_page_url = 'https://www.facebook.com/' . get_facebook_follow_id(); ?>

<?php //Facebookスクリプトを利用する
global $g_facebook_sdk;
$g_facebook_sdk = true; ?>

<div class="self-sns-area">
    <!-- facebook -->
    <div class="fb-thumb" style="background: linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%), url(<?php $thumbnail_id = get_post_thumbnail_id(); $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , array( 400, 400 ) ); echo $thumbnail_img[0]; ?>) #333 center top /cover">
        <div class="fbt-in">
            <div class="fbti-text">Facebookページに<span>いいね!をしよう</span></div>
            <div class="fbti-btn">
                <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>
            </div>
        </div>
    </div>
    <div class="tw-gp-box">
        <div class="tgb-text">最新ニュース情報を<span>チェックしよう!</span></div>
        <!-- twitter -->
        <div class="tgb-tw">
            <a href="//twitter.com/<?php echo esc_html( get_twitter_follow_id() ); ?>" title="<?php _e( 'Twitterをフォローします', 'simplicity2' ) ?>" rel="nofollow"><span class="fa fa-twitter" aria-hidden="true"></span>フォローする</a>
        </div>
        <!-- google-plus -->
        <div class="tgb-gp">
            <a href="//plus.google.com/<?php echo esc_html( get_google_plus_follow_id() ); ?>" title="<?php _e( 'Google+をフォローします', 'simplicity2' ) ?>" rel="nofollow publisher"><span class="fa fa-google-plus" aria-hidden="true"></span>フォロー</a>
        </div>
        <!-- google-plusここまで -->
    </div>
</div>
<!-- feedly -->
<div class="self-feedly">
    <a href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="<?php _e( 'Feedlyに追加します', 'simplicity2' ) ?>" class="sefe-link" rel="nofollow"><span class="sefe-text">Feedlyに追加</span></a>
</div>
<!-- push7 -->
<?php $push7 = fetch_push7_info();
if ( get_push7_follow_app_no() && $push7 )://Push7フォローボタンを表示するか ?>
<div class="self-push7">
    <a href='https://<?php echo $push7->domain; ?>' title="<?php _e( 'Push7で更新情報を購読します', 'simplicity2' ) ?>" class="sepu-link" rel="nofollow"><span class="sepu-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

アイキャッチ画像の取得は、「WordPress アイキャッチ画像の表示とカスタマイズ方法」を参考にしました。

Google Plus が不要な場合

Google Plus を使わない場合には、上記のコードの中から下記のコードを削除します。

<!-- google-plus -->
<div class="tgb-gp">
    <a href="//plus.google.com/<?php echo esc_html( get_google_plus_follow_id() ); ?>" title="<?php _e( 'Google+をフォローします', 'simplicity2' ) ?>" rel="nofollow publisher"><span class="fa fa-google-plus" aria-hidden="true"></span>フォロー</a>
</div>
<!-- google-plusここまで -->

Feedly が不要な場合

Feedly を使わない場合には、下記のコードを削除します。

<!-- feedly -->
<div class="self-feedly">
    <a href="//feedly.com/i/subscription/feed/<?php bloginfo( 'rss2_url' ); ?>" title="<?php _e( 'Feedlyに追加します', 'simplicity2' ) ?>" class="sefe-link" rel="nofollow"><span class="sefe-text">Feedlyに追加</span></a>
</div>

Push7 が不要な場合

Push7 を使わない場合には、下記のコードを削除します。

<!-- push7 -->
<?php $push7 = fetch_push7_info();
if ( get_push7_follow_app_no() && $push7 )://Push7フォローボタンを表示するか ?>
<div class="self-push7">
    <a href='https://<?php echo $push7->domain; ?>' title="<?php _e( 'Push7で更新情報を購読します', 'simplicity2' ) ?>" class="sepu-link" rel="nofollow"><span class="sepu-text">Push通知を受け取る</span></a>
</div>
<?php endif; ?>

サイトに合わせてアレンジする

コードの中には、アイキャッチ画像取得のための下記のコードがあります。

<div class="fb-thumb" style="background: linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%), url(<?php $thumbnail_id = get_post_thumbnail_id(); $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , array( 400, 400 ) ); echo $thumbnail_img[0]; ?>) #333 center top /cover">

このうち linear-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%) で、取得したアイキャッチ画像にグラデーションをつけています。

このグラデーションを linear-gradient(rgba(140,27,171,.8) 0%, rgba(247,97,161,.3) 100%) にしてみると…。

アイキャッチ画像のグラデーションを変更した例

Spotify のようなカラフルなグラデーションになりました。

また、アイキャッチ画像を取得できない場合に備えて、 #333 の背景色を指定しています。

この背景色は、サイトカラーやアクセントカラーに変更するといいかもしれません。

ただし、白文字の「Facebookページにいいね!をしよう」が、はっきりと見える背景色でなければなりません。

ウィジェットで呼び出し

作成した self-made-sns-follow-area.php を、ウィジェットで呼び出します。

しかし、WordPress のウィジェットは、 PHP コードが動きません。

そこで「 WordPress でプラグイン使わずにウィジェットで PHP コード動かす」で紹介されている、ショートコードを使う方法を用います。

子テーマの functions.php に、紹介されているコードを追加します。

'ahoaho' の部分は、 'self-made-sns-follow-area' にご変更ください。

コードを追加後「投稿 SNS ボタン上」または「投稿 SNS ボタン下」のウィジェットエリアに、「カスタム HTML 」ウィジェットを放り込みます。

「カスタム HTML 」ウィジェットに、 [self-made-sns-follow-area] を記述すれば SNS フォローエリアが表示されます。

CSS で見た目を整える

あとは CSS で見た目を調整します。

Feedly ボタンと Push7 ボタンの CSS は、 Facebook・Twitter・Google Plus の CSS とは別に記載しています。

Facebook・Twitter・Google Plus を使用する場合の CSS

Facebook のいいねボタン、 Twitter と Google Plus のフォローボタンを 3つとも使用する場合には、下記の CSS を子テーマの style.css に追加します。

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

.fb-thumb,
.tw-gp-box {
  height: 168px;
  flex: 0 1 50%;
}

.fb-thumb {
  position: relative;
}

.fbt-in {
  position: absolute;
  top: 18.5px;
  width: 100%;
}

.fbti-text,
.tgb-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;  
  text-align: center;
}

.fbti-text>span,
.tgb-text>span {
  display: block;
}

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

.tw-gp-box {
  background: #111;
}

.tgb-text {
  margin: 18.5px 0 10.5px;
}

.tgb-tw {
  background: #1b95e0;
  border-radius: 4px;
  height: 28px;
  line-height: 27px;
  margin: 0 auto;
  width: 119px;  
}

.tgb-tw:active,
.tgb-tw:focus,
.tgb-tw:hover {
  background: #0c7abf;
}

.tgb-tw>a {
  color: #fff;
  display: block;
  font-size: 13px;
  padding: 1px 10px 1px 9px;
  text-decoration: none;
}

.tgb-tw .fa {
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.tgb-gp {
  background: #fff;
  border: 1px solid rgba(0,0,0,.17);
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  height: 24px;
  line-height: 23px;
  margin: 16px auto 0;
  transition: .218s;
  width: 122px;
}

.tgb-gp:active {
  background: #e5e5e5;
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 #ddd;
}

.tgb-gp>a {
  color: #262626;
  display: block;
  padding-left: 47px;
  position: relative;
  text-decoration: none;
}

.tgb-gp .fa {
  bottom: 4px;
  color: #db4437;
  font-size: 13px;
  left: 2px;
  position: absolute;
}

Twitter と Google Plus のフォローボタンは、なるべくオリジナルボタンと同じ見た目になるように指定しています。

Facebook・Twitter を使用する場合の CSS

Google Plus のフォローボタンは使用せず、Facebook のいいねボタンと Twitter のフォローボタンを使用する場合には、下記の CSS を子テーマの style.css に追加します。

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

.fb-thumb,
.tw-gp-box {
  height: 168px;
  flex: 0 1 50%;
}

.fb-thumb {
  position: relative;
}

.fbt-in {
  position: absolute;
  top: 26.5px;
  width: 100%;
}

.fbti-text,
.tgb-text {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 26px;  
  text-align: center;
}

.fbti-text>span,
.tgb-text>span {
  display: block;
}

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

.tw-gp-box {
  background: #111;
}

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

.tgb-tw {
  background: #1b95e0;
  border-radius: 4px;
  height: 28px;
  line-height: 27px;
  margin: 0 auto;
  width: 119px;  
}

.tgb-tw:active,
.tgb-tw:focus,
.tgb-tw:hover {
  background: #0c7abf;
}

.tgb-tw>a {
  color: #fff;
  display: block;
  font-size: 13px;
  padding: 1px 10px 1px 9px;
  text-decoration: none;
}

.tgb-tw .fa {
  font-size: 18px;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

Feedly ボタン・Push7 ボタンを使用する場合の CSS

Feedly ボタン・Push7 ボタンを使用する場合には、下記の CSS を子テーマの style.css に追加します。

どちらか一方しか使用しない場合でも、同じ CSS です。

.sefe-link,
.sepu-link {
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  display: block;
  height: 48px;
  line-height: 48px;
  margin-bottom: 8px;
  text-align: center;
  text-decoration: none;
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.sefe-link {
  background: #6CC655;
}

.sepu-link {
  background: #efad00;
}

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

.sefe-text,
.sepu-text {
  color: #fff;
  font-size: 17px;
  margin-left: 8px;
}

.sefe-text:before,
.sepu-text:before {
  display: inline-block;
  font: normal normal normal 28px/1 'icomoon';
  margin-right: 8px;
  position: relative;
  top: 7px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.sefe-text:before {
  content: "\e92e";
  font-size: 34px;
}

.sepu-text:before {
  content: "\e90e";
}

Simplicity では、テーマ設定から SNS のフォローボタンやシェアボタンを手軽に設置できます。

しかし、ちょっと手を加えることで、フォローボタンが大きく変わります。

「 AMP ページにサムネイル画像付きの SNS フォローボタンを設置」では、 AMP ページにも同様の SNS フォローボタンエリアを設置するカスタマイズをご紹介しています。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする