Stinger6、Stinger7でバイラルメディア風ボタン設置方法

ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、
上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。

これまでは、とくに気にしなかったのですが…。

アクセス数UPや記事を拡散していただくのに効果的なので設置方法を備忘録として残しておきたいと思います。

Stinger5以前の場合はスマホの分岐コードは、
＜?php if (is_mobile()) :?＞という形でis_mobileでしたが、

Stinger6移行、Stinger7もモバイルの分岐コードは、
1. まずは未設置の場合は以下のコードを<body>タグの直下に記載します。
そして次に、重要なSNSボタンのPHPコードです。
1. また、下線黄色部分は自分のFacebookページURLやTwitterのURLやTwitterアカウントを適宜記載しなおしてください。
以下の分岐コードをfunction.phpの中に記載します。（または、Stinger以外のテーマなどの場合でスマホの分岐コードが定義されていない場合は必要になります。）
1. あとは、CSSになります。
そして最後にCSSです。
1. まずはスマホ用のCSSです。
2. そして、PC用のCSSです。
とっても参考になったお世話になったサイトです。
1. Stinger6以降（Stinger7も）は、上記した部分を3文字程度変更するだけで大丈夫でした。

目次に戻る

Stinger6移行、Stinger7もモバイルの分岐コードは、

st_is_mobileとなっています。
（あとでそのコードを記載します。）

なので、
若干コードを変更します。

まずは、PHPです。

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&amp;version=v2.0";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>

これで、
とりあえずはFacebookのアプリのタグが使えるようになります。

そして次に、重要なSNSボタンのPHPコードです。

（ここでStinger5までとStinger6以降Stinger7とでは若干記載方法が異なります。）

[ad]

<!-- 記事がよかったらいいね　ここから -->
 <?php if (st_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 class="p-asideFollowUs__twitter">
 <div class="p-asideFollowUs__twitter__cont">
 <p class="p-asideFollowUs__twitter__item">Twitterで〇〇を</p>
 <a href="ここにTwitterアカウントのURLを入れる" class="twitter-follow-button p-asideFollowUs__twitter__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @アカウント名</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.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>
 </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>
 <div class="p-entry__tw-follow">
 <div class="p-entry__tw-follow__cont">
 <p class="p-entry__tw-follow__item">Twitterで〇〇をフォローしよう！</p>
 <a href="ここにTwitterアカウントのURLを入れる" class="twitter-follow-button p-entry__tw-follow__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @ツイッターアカウント名</a>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.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; ?>
 <!-- 記事がよかったらいいね　ここまで -->

というように、
はじめのis_mobileの部分をst_is_mobileに変更します。

また、下線黄色部分は自分のFacebookページURLやTwitterのURLやTwitterアカウントを適宜記載しなおしてください。

それだけでOKです。

もし、
is_mobileのままで記載しバイラルメディア風のSNSボタンを設置させたいという場合は、

以下の分岐コードをfunction.phpの中に記載します。（または、Stinger以外のテーマなどの場合でスマホの分岐コードが定義されていない場合は必要になります。）

参考までに）

//スマホ表示分岐
 function is_mobile(){
 $useragents = array(
 'iPhone', // iPhone
 'iPod', // iPod touch
 'Android.*Mobile', // 1.5+ Android *** Only mobile
 'Windows.*Phone', // *** Windows Phone
 'dream', // Pre 1.5 Android
 'CUPCAKE', // 1.5+ Android
 'blackberry9500', // Storm
 'blackberry9530', // Storm
 'blackberry9520', // Storm v2
 'blackberry9550', // Storm v2
 'blackberry9800', // Torch
 'webOS', // Palm Pre Experimental
 'incognito', // Other iPhone browser
 'webmate' // Other iPhone browser
 );
 $pattern = '/'.implode('|', $useragents).'/i';
 return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
 }

あとは、CSSになります。

また、上記を記述してFacebookのいいね!がうまく表示されない場合は以下のFacebookボタン設置ページにて、
作りなおしてやってみるとうまく表示されるようです。

Like Button for the Web

Like Button - Social Plugins

Like Button for the Web

参考サイト）

バイラルメディア風、記事下にアイキャッチ画像と並べてＳＮＳボタンを設置する方法

キュレーションサイトやバイラルメディアなどで最近よく見かけていた、なんかクリックされやすそうな雰囲気の記事下ＳＮＳシェアボタン。

スキコトログ

そして最後に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-asideFollowUs__twitter {
 border: 2px solid #e6e6e6;
 margin-top: 15px;
 padding: 12px 0;
 }
 .p-asideFollowUs__twitter__cont {
 text-align: center;
 font-size: 13px;
 color: #252525;
 font-weight: 700;
 }
 .p-asideFollowUs__twitter__item {
 display: inline-block;
 vertical-align: middle;
 margin: 0 2px;
 }

そして、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;
 }
 .p-entry__tw-follow {
 margin-bottom: 10px;
 background: #f4f4f4;
 width: 100%;
 padding: 15px 0;
 }
 .p-entry__tw-follow__cont {
 text-align: center;
 font-size: 15px;
 color: #252525;
 }
 .p-entry__tw-follow__item {
 display: inline-block;
 vertical-align: middle;
 margin: 0 15px;
 }

CSSは自分の好みで弄ってみてください。
（私も若干すでに弄ってますポリポリ (・・*)ゞ）