Loading…

Stinger6 Stinger7 WordPress カスタマイズ テーマ 伝えたいこと 備忘録

バイラルメディア風SNSボタン

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

本日の人気記事BEST10

所要時間目安：約8分


Stinger6 Stinger7 WordPress カスタマイズ テーマ 伝えたいこと 備忘録

バイラルメディア風SNSボタン

バイラルメディア風SNSボタン

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

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

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

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

 

よく読まれている人気記事一覧

人気記事

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とでは若干記載方法が異なります。）

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

<!-- 記事がよかったらいいね　ここから -->
 <?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は自分の好みで弄ってみてください。
（私も若干すでに弄ってますポリポリ (・・*)ゞ）

 

スポンサーリンク

とっても参考になったお世話になったサイトです。

FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】
そんなFacebookページのいいねやTwitterをフォローしてもらうためのオリジナルSNSボタンの設置方法を紹介します。バイラルメディア風で、Facebookページの方は記事ごとにアイキャッチ画像を掲載するというものです。
ままはっく

というか、
ほぼこちらの「ままはっく」さんのコードをコピー・アンド・ペーストで多くのテーマの方々はバイラルメディア風のSNSボタンが設置できるのではないでしょうか。

Stinger6以降（Stinger7も）は、
上記した部分を3文字程度変更するだけで大丈夫でした。

本当にありがとうございました。

本当にみんなスゴいなぁ…。
私もいつになったら多くの人の為になれるようなことが書けるようになるのだろう…。

早くこうしてお世話になったサイト様などを参考にさせて頂いて自分で何か作成していけるようになりたいです！！
そしたら、
何か残せたような気になれますよね…。


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

「Stinger6, Stinger7, WordPress, カスタマイズ, テーマ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


関連記事

帯状疱疹治療薬バルトレックス錠

伝えたいこと 備忘録 治療

帯状疱疹の症状と特効薬治療と塗り薬痛みにはリリカで対処方法

昨今、寒くなってきました。 そうなってくると一番メジャーな病気としてはインフルエンザ（ノロウイルスも）ですが、他にも意外と帯状疱疹（ヘルペス）も多くなってきてしまいます。 なぜかは寒くなった為に抵抗力…

もっと読む

インフィード広告アドセンス

東京オリンピックエンブレムロゴ4候補

伝えたいこと 備忘録 時事ネタ

東京オリンピック開催日まであと何日?リオ五輪の開催日までと共に

（アイキャッチ画像出典元毎日新聞：https://mainichi.jp/graphs/20160408/hpj/00m/050/004000g/3） 以前、全日本男子バレーボールの世界最終予選大会に…

もっと読む

インフィード広告アドセンス

いまさら聞けない横文字

伝えたいこと 備忘録 時事ネタ

いまさら人に聞けない横文字の意味ランキング

ここ数年で、多くの政治家や起業家さんたちそして、はたまたマスメディアにおいてもカッコイイ横文字（カタカナ英語）をよく聞いたり目にしたりすることが多くなっていると思います。 そんな中で、 私的に勝手にい…

もっと読む

インフィード広告アドセンス

インターネットの回線速度スピード測定

インターネット 伝えたいこと 光コラボ 無線LANルーター

インターネットのスピードが遅い時回線速度を簡単に速くする方法

これまでインターネット回線を光にしてから、インターネットの接続速度（インターネットの回線速度）をほとんど意識しない日が多くなりました。しかし、無線LANルーターにての接続がうまく接続されない時やなんと…

もっと読む

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-Stinger6, Stinger7, WordPress, カスタマイズ, テーマ, 伝えたいこと, 備忘録
-,



この記事が良かったら
いいね！お願いします(#^.^#)

せきららの
最新情報をお届けします

言えないことはTwitterで！！



目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

HDDが壊れそうか否か健康状態確認 CrystalDiscinfoでHDDが壊れそうかどうか確認方法と対処方法

車のエアコンが臭い時のおすすめの対処方法はフィルター交換 光触媒エアコンフィルター