ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、
上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。
これまでは、とくに気にしなかったのですが…。
アクセス数UPや記事を拡散していただくのに効果的なので設置方法を備忘録として残しておきたいと思います。
Stinger5以前の場合はスマホの分岐コードは、
<?php if (is_mobile()) :?>という形でis_mobileでしたが、
Loading…
車メンテナンス・カスタマイズ・点検・修理、WordPressカスタマイズ、PC設定、車、時事ネタ、情勢、日々の出来事など津々浦々に綴っていきます。
Stinger6 Stinger7 WordPress カスタマイズ テーマ 伝えたいこと 備忘録
所要時間目安:約8分
この記事は2016年4月9日のものです。現在は状況が異なる可能性がありますのでご注意ください。
Stinger6 Stinger7 WordPress カスタマイズ テーマ 伝えたいこと 備忘録
+本日の人気記事TOP10+
ここのところ、よくブログサイトや大手企業のニュースサイトなどの記事の下に、
上記の画像のようなバイラルメディア風のSNSボタンが設置されているのをよく見かけると思います。
これまでは、とくに気にしなかったのですが…。
アクセス数UPや記事を拡散していただくのに効果的なので設置方法を備忘録として残しておきたいと思います。
Stinger5以前の場合はスマホの分岐コードは、
<?php if (is_mobile()) :?>という形でis_mobileでしたが、
+これまでによく読まれている記事一覧クリックでOPEN+
st_is_mobileとなっています。
(あとでそのコードを記載します。)
なので、
若干コードを変更します。
まずは、PHPです。
Facebookでいいね!!ボタンを設置させている方は以下のコードは必要ありません。
<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&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
これで、
とりあえずはFacebookのアプリのタグが使えるようになります。
(ここで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に変更します。
それだけでOKです。
もし、
is_mobileのままで記載しバイラルメディア風のSNSボタンを設置させたいという場合は、
(または、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']);
}
また、上記を記述してFacebookのいいね!がうまく表示されない場合は以下のFacebookボタン設置ページにて、
作りなおしてやってみるとうまく表示されるようです。
参考サイト)
/*記事がよかったら、いいねスマホ*/
.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*/
.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は自分の好みで弄ってみてください。
(私も若干すでに弄ってますポリポリ (・・*)ゞ)
というか、
ほぼこちらの「ままはっく」さんのコードをコピー・アンド・ペーストで多くのテーマの方々はバイラルメディア風のSNSボタンが設置できるのではないでしょうか。
本当にありがとうございました。
本当にみんなスゴいなぁ…。
私もいつになったら多くの人の為になれるようなことが書けるようになるのだろう…。
早くこうしてお世話になったサイト様などを参考にさせて頂いて自分で何か作成していけるようになりたいです!!
そしたら、
何か残せたような気になれますよね…。
今は、多くの人が無料アプリのLINEを使用している方々が多いと思います。私も、スマホは持っていなかったのですが、持った途端に無料通信アプリのLINEをインストールしてしまいました。そしたら…
インフィード広告アドセンス
インターネット セキュリティ 伝えたいこと 備忘録 光コラボ 時事ネタ
現在のインターネット光ファイバー通信速度は各社によって異なります。1Gbpsだったり10Gbpsだったりプランにもよりますが最大通信速度として謳われているのは10Gbpsです。しかも、10Gbpsとい…
インフィード広告アドセンス
今年になりもう10月も中旬です。2016年もあっという間に終わりそうですね…。残すところ2ヶ月半程度です。誰に書こうか、どうやって書こうか。なんて挨拶分カイたら良いのか。などなどちょっとだけ悩む季節・…
インフィード広告アドセンス
健康とは何か? それ相応の年齢になったり、医療従事者であればそんなことに考えをはせることもあることがあると思います。
インフィード広告アドセンス
今はもう…。原発と言うと、 東日本大震災の時の甚大な日本に及ぼした天災による被害のひとつであるということを思い浮かべる方も多いかと思われます。特に福島第一原子力発電所の1号機・2号機・3号機・4号機の…
インフィード広告アドセンス
Multiplex 広告
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
2024-05-04
車両代や登録費用はもちろん、税金や保険、車検、メンテナンス代、修理代、消耗品などが全て月々の支払い料金に含まれている。 \詳細チェック・申込はここから ...
2024-05-03
Gクラスのカスタム&メンテナンスを得意としているオフィス ケイ ... カー ... スタンダード SAレス車 4WD 5MT 届出済未使用車 SAレス車 ...
2024-05-03
そんな悪夢の事態に対応すべく手動の開閉機構が付いているって知ってた? Category 自動車コラム. Tags サンルーフ メンテナンス 故障 · サンルーフに開け ...
アドセンス336pxPC閲覧記事下表示1つ目コード
よろしかったらシェアよろしくお願いします。
-Stinger6, Stinger7, WordPress, カスタマイズ, テーマ, 伝えたいこと, 備忘録
-SNSボタン, バイラルメディア
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
This site is protected by reCAPTCHA and the GooglePrivacy PolicyandTerms of Serviceapply.
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
comment