Loading…

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

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文字程度変更するだけで大丈夫でした。

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

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

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

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


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

おすすめの記事一部広告

関連記事

迷惑メールOutlook Express画像

セキュリティ 伝えたいこと 備忘録

scanというタイトルの迷惑メールまたかよっ!!送信元Broderick620@gmail.com

おととい、きのうとウイルス付き迷惑メールに関して記事にしましたが…。 またかよっ！！と言いたくなって…

もっと読む

Chrome右上表示

PC カスタマイズ セキュリティ セキュリティ 伝えたいこと 備忘録 設定

YouTubeチャンネルを登録したらChromeの右上にもチャンネル名が表示された。

つい先日、 WordPressでの記事で、動画ってのせることはできないのだろうか？ なんて考えている…

もっと読む

2匹のネコ

AdSense インターネット 伝えたいこと 備忘録 時事ネタ

広告単価はWordPressとBloggerどっちが高い？とHTTPS化(SSL化）について…。

もう昨今では知る人ぞ知るGoogle AdSenseという広告配信による収益化？でお小遣い稼ぎや本業…

もっと読む

除草剤除草王

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

除草剤使い方とおすすめは除草王かラウンドアップもしくはネコソギ

除草剤の安全な使い方をご存知ですか？除草剤はとても便利ですが、除草剤の効果には続く日数や、ネコソギ取…

もっと読む

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

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

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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



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

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで！！



目次に戻る

コメントを閉じる

comment

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

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