Loading…

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

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

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

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

所要時間目安:8

This session is using  IPv4  is established in

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

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

目次に行く・戻る

メルカリ招待コード:

バイラルメディア風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文字程度変更するだけで大丈夫でした。

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

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

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

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

尾木ママ

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

大和君発見良かった。尾木ママブログに批判殺到みたいだが…。

この1周間北海道の7才の男児の大和君が本日(6月3日)の早朝に無事に発見されました。良かった!! しかし、 この発見される数日前に教育評論家で「ホンマでっかTV」などで有名になった尾木ママこと尾木直樹…

もっと読む

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

RSSフィード画像

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

正式版!?検証中です。RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+

先程の記事にて、試してみたのですがBloggerのRSSフィードには・・・・・・。 やはり、アイキャッチ画像はひょうじされずそのまま「image」となっていました。 がーんガ━━(= ̄□ ̄=)━━ン!…

もっと読む

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

メンテナンス 伝えたいこと 備忘録 時事ネタ

268万台自動車8社、17回リコールデンソー燃料ポンプリコール(フューエルポンプ)

大手自動車部品製造会社のトヨタ系列のデンソーの燃料ポンプにおいてリコール情報があります。 デンソーなので、トヨタ車はもちろんですがその他のメーカーのホンダ(HONDA)などの車種にもデンソー製燃料ポン…

もっと読む

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

WordPress不具合

WordPress 不具合

WordPress4.4ビジュアルエディタで見出しタグ挿入不具合

WordPressにおいて、 ビジュアルエディタとテキストエディタの切り替え時に、 勝手に改行されるなどの不具合はあったということは調べてわかっていました。 ですが、 ちょっとしたプラグインにて対応可…

もっと読む

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

Googleで働きたい7才少女への返信レター

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

Googleで働きたい!と手紙を書いたら、Googleのボスから返事がきた!

なんとも愛らしいというのでしょうか、子供の夢や思いまでをも大切にする素晴らしい社風とでもいうのでしょうか・・・・・。 7才の少女が、「Googleで働きたい!」とGoogleのボスである社長(CEO)…

もっと読む

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

Stinger7

Stinger6 Stinger7 WordPress テーマ

Stinger7がもう公開予定…。Stinger6が公開されたばかりだと思っていたのに…。

 昨年末2015年12月に公開されたばかりのStinger6ですが、 おおよそ2ヶ月弱で、もうStinger7が期間限定で公開されました。現在はダウンロードできないようですが、Stinger…

もっと読む

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

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Total146


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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