現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

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

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

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

所要時間目安:8

This session is using  IPv4  is established in

この記事は2016年4月9日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年4月4日 (金曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. アイドリングストップシステム異常警告灯表示対処方法 2PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  2. フリー素材モデル茜さや

    つまらない…。人生とは?人間とは?生きるとは?健康とは?病気とは? 1PV

    つまらない…。そんなふうに思ったり考えたりしてしまうことは誰にでもあると思います。そんな中どうやって生きていけばよいのか。どうやって対応していけばよいのか。様々なことを考えさせられます。それが人生なの…

    もっと読む

  3. 参議院議員選挙自民党広告

    そうだ!選挙に行こう!!今回は18才以上の選挙権初の参院選です。 1PV

    (アイキャッチ画像は今回の参議院議員選挙のインターネット広告のスクリーンショットです。) いよいよ、明日7月10日は参議院議員選挙の投票日です。 投票日でもあり開票日でもあります。(投開票日) (今更…

    もっと読む

  1. アイドリングストップシステム異常警告灯表示対処方法 28PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  2. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 26PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  3. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 23PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  1. アイドリングストップシステム異常警告灯表示対処方法 16PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に(自動的に)アイド…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 13PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 10PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

今日は2025年4月4日です。

メルカリ招待コード:

バイラルメディア風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ボタン設置ページにて、
作りなおしてやってみるとうまく表示されるようです。

参考サイト)

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

 

そして最後に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ボタンの設置方法を紹介します。バイラルメディア風で、Facebookページの方は記事ごとにアイキャッチ画像を掲載するというものです。

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

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

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

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

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

Windows10サポート終了まで

【AmazonタイムセールSALE車&バイク】!


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展:Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

あなたにおすすめな関連記事

光触媒エアコンフィルター

メンテナンス 備忘録

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

そろそろ、春日和になってきました。そこで、 これから暑くなる夏やジメジメする梅雨時にはエアコンは必須になると思います。特に車においては外で走ったり外に駐車されている為に、 室内のエアコンより臭いの原因…

もっと読む

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

アイキャッチ画像自動設定

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

アイキャッチ画像を設定し忘れないように自動で設定する方法

WordPressやFC2ブログなどで、アイキャッチ画像を設定しなければならないのは意外と手間ですよね。 以前に、アイキャッチ画像を設定し忘れた時にランダムに表示させる方法を記事として紹介しました。 …

もっと読む

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

Windows10ポップアップ通知

PC Windows10 カスタマイズ 伝えたいこと 備忘録

Windows10無償アップグレード期間過ぎてもWindows10にアップグレードする方法

Windows10の無償アップグレード期間が残すところ約1ヶ月となりました。そこで、Windows7やWindows8.1を今のところまだ使用したい。 けれど、今後のことを考えるとWindows10へ…

もっと読む

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

BRAUN電気シェーバーシリーズ9とラムダッシュ

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

電気シェーバーおすすめのBraunシリーズ9替刃F/C90意外と…。

男性の髭って、あると痛いですよね。 でも、ちょっと濃い目の髭だとなかなか電気シェーバーだと剃り残しや剃り切れないことって多いと思われます。 私の旦那は、ちょっと濃い目の髭になっております。 そんな旦那…

もっと読む

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

WordPress

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

サイドバーのウィジェットにタイトルを表示させずに追加する方法

テーマにもよりますが、サイドバーにデフォルト(はじめから)で追加されている状態のウィジェットがあると思います。 もちろん、サイドバーにウィジェット追加用に多くのテーマは作られていると思います。 ですが…

もっと読む

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

鼻毛

伝えたいこと 備忘録 治療

鼻毛脱毛と処理におすすめなワックスGOSSO ゴッソ (ブラジリアンワックス鼻毛脱毛セット)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━◆◇◆セルフ鼻毛脱毛なら【KING's NOSE WAX】◆◇◆ 一瞬で飛び出た鼻毛とサヨナラ! 人と話すと必ず目に入る重要部分だからこそ…

もっと読む

あなたが訪問してから

0 秒経過 🎉

Stinger6, Stinger7, WordPress, カスタマイズ, テーマ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

Total371


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.