バイラルメディア風記事下デザインSNSボックス設置方法

2017/01/12 2017/01/13

よく見かける記事下のアイキャッチ画像と、SNSボタンを合わせたバイラルメディア風ボックスタイプのデザイン。素敵だなぁ、導入したいなぁと調べてたら「ままはっく」のまなしばさんが紹介されていたので、自分用に少し変えて導入してみました。

これでいいねを押される確立も上がるようですが、デザイン的にも素敵です。

1 デザインイメージ
2 デザインコード

デザインイメージ

FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】

こちらが参考にさせて頂いたまなしばさんの記事です。

実はこの記事を見つけてから、何度も挑戦していたのですがうまくいかず、やっと出来たので今回忘備録として書いておきます。

まなしばさんのデザインはFacebookボタンとTwitter二つですが、デザインを少し小さくしたかったので、私はTwitter部分を消し、少しサイズを小さくしました。

こんな感じにしました。

デザインコード

本家のサイトには全て書かれていますのでそちらを参考にされる方がいい方はそちらを確認ください。こちらでは、Twitter部分は省いていきます。

私はFacebookいいねボタン設置HTMLコードは省きます。

HTMLコード

入れたい場所に記述します。私は本文終わったあと、アドセンス広告前に挿入したのでsingle.phpに入れました。

子テーマの編集が分からない方はこちら

WPカスタマイズは必ず子テーマで！作成方法全手順【図解】

　今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。 WordPressで子テ

2016-12-21 21:09

<!-- 記事がよかったらいいね　ここから -->
<?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="ここにFacebookページのURLを入れる" 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>
</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="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
<p class="p-entry__note">最新情報をお届けします</p>
</div> 
</div>
<?php endif; ?>
<!-- 記事がよかったらいいね　ここまで -->

<?php if (is_mobile()) :?>

<p>この記事が気に入ったらいいね！しよう</p>

</div>

<?php else: ?>

<p>この記事が気に入ったら<br>いいね！しよう</p>

</div>

<p class="p-entry__note">最新情報をお届けします</p>

</div>

<?php endif; ?>

10行目、２５行目のハイライトした部分で

「ここにFacebookページを入れる」というところに自分のFBページURLを入れて下さい。

コードを確認頂ければ分かると思いますが、モバイル端末とPCで出し分けしています。出し分けの定義をしていない場合は、まなしばさんのページにモバイル端末分岐させるコードも載っていますのでそちらをご確認ください。

表示される文字を変更したい場合はPタグ内の日本語部分を書き換えるだけでOKです。

Facebookいいねボタン構成ツール

私の場合URLを入れただけではうまくボタンが表示されなかったのでこちらページでボタンを作り直しました。

いいね！ボタン構成ツールをクリックします。

自分のFBページURLを入力します。
レイアウト、アクションタイプ、ボタンサイズを好みに合わせて変更（ここではButton、Smallに設定しました）
友達の顔を表示するのチェックを外す
コードを取得をクリック

Javascript SDKかIFrameコードをコピーし、先ほどのHTMLコード１０行目２５行目ハイライト部分をすべて入れ替えます。私はJavascriptでうまくいかなかったのでiFrameをいれました。

HTMLコードだけでプレビューしてみて、いいねボタンと、文字がしっかり表示されていれば次にCSSでデザインを構築していきます。

CSSコード

モバイル端末での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: auto auto 5px;
}
.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: 12px;
text-align: center;
}
.p-shareButton__a-cont__btn p {
font-size: 12px;
color: #fff;
font-weight: 700;
padding: 5px 0 15px;
line-height: 1.4;
margin-bottom: 0px;
}
/*記事がよかったら、いいねモバイルここまで*/

/*記事がよかったら、いいねモバイル*/

.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: auto auto 5px;

}

.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: 12px;

text-align: center;

}

.p-shareButton__a-cont__btn p {

font-size: 12px;

color: #fff;

font-weight: 700;

padding: 5px 0 15px;

line-height: 1.4;

margin-bottom: 0px;

}

/*記事がよかったら、いいねモバイルここまで*/

PCのCSS

/*記事がよかったら、いいね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: 20px;
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: 40px;
-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: 12px;
color: #999;
}
/*記事がよかったら、いいねPCここまで*/