バイラルメディア風、記事下にアイキャッチ画像と並べてＳＮＳボタンを設置する方法
キュレーションサイトやバイラルメディアなどで最近よく見かけていた、なんかクリックされやすそうな雰囲気の記事下ＳＮＳシェアボタン。
どうやって実装するのかな～と思っていたら、ブロガーのまなしばさんが思いっきりドンピシャの記事を書かれていたので、同じように実装させていただきました^^。
＞＞FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】
テンプレや環境などが違うためやや工夫しましたので、その点を含めて私が実装した内容をシェアしますね。
記事下にアイキャッチ画像と並べてＳＮＳボタンを設置したい時の検索キーワード
そもそもこういった記事下にアイキャッチ画像などと並べてＳＮＳシェアボタンを置くデザインを何と呼ぶべきかわからず、検索キーワードに悩み、「キュレーションサイト風 ＳＮＳボタン」「画像とＳＮＳボタン」「フラットデザイン ＳＮＳボタン」などとりあえず思いつくキーワードで探したところ、「バイラルメディア風 ＳＮＳボタン」でまなしばさんの記事にたどり着きました^^。
新し目のデザインって私のようなウェブデザイン素人ではどういったキーワードで探せば良いのかもわからないので困ったもんです。
以下ままはっくさんの記事内のコードと併せてご紹介。（コード記事転載はまなしばさんにＯＫいただいております。）
PHPのコード
まず、SNSボタンを設置したい場所に以下のコードを追加。
私は単一記事の投稿 (single.php)の記事コンテンツ下に表示されるように設置しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!-- 記事がよかったらいいね ここから --> <?php if (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=/^http:/.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=/^http:/.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; ?> <!-- 記事がよかったらいいね ここまで --> |
上記の方法で問題なく表示されるはずなのですが、私はなぜかＰＣ用のfacebookいいねボタンが正常に表示されず。
仕方ないので、10行目の
|
1 |
<div class="fb-like" data-href="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div> |
だけFacebook Developersでいいねボタンだけ作り直して入れ替えると問題なく表示されました。
また、＜?php if (is_mobile()) :?＞でスマホとＰＣの分岐がされていますが、私のブログは作り立てだったので、functions.phpにスマホ分岐関数について追加しておらず・・・。
functions.phpに以下のコードも追加しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//スマホ表示分岐 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']); } |
他のファイルも同様ですが、functions.phpを修正するときは、特にバックアップをバックアップをバックアップをしっかりとってから修正してくださいねT=T。
また、既にfacebookいいねボタンなどを設置している場合は不要かと思いますが、初めてfacebookいいねボタンを設置する場合は以下のコードも必要です。
開始bodyタグの直下に張り付けることが推奨されています。
|
1 2 3 4 5 6 7 8 |
<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> |
CSSのコード
CSSは以下の通り。PC版のCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/*記事がよかったら、いいね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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/*記事がよかったら、いいねスマホ*/ .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 } |
facebookいいねボタンを押すとコメント欄が切れてしまう問題
基本的に上記のcssで問題ないと思うのですが、実装したあと、テストでfacebookいいねボタンを押してみるとコメント欄が切れていることに気づきました。
こんな感じ。
あ～これ前もあったな～と思い、記憶をさかのぼって、手持ちのサイトのコードを見て思い出しました^^。
cssに以下を追記すればＯＫ。
|
1 2 3 |
.fb-like iframe { max-width: none!important; } |
上手にできました^^。
以上、完全に作業日誌ですが、記事下のバイラルメディア風ＳＮＳシェアボタンの実装方法でした！
今日も最後までお読みいただきありがとうございました！
更新情報をお届けします！(=ФωФ=)
最新情報をお届けします
フォローという手もあります！(=ФωФ=)
Follow @necooooooo22
コメント8件
neco | 2015.07.30 13:27
にんぽさんコメントありがとうございます！
実は最初記事に対するいいね！なのかfacebook
ページに対するいいね！なのか分かっておらずビジュアル面のみで気に入って設置しました^^；。
どちらがブログのために良いのかは判断しかねますが、目的をもって設置することがきっと大事なんですね！
FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】 - ままはっく | 2015.08.07 16:26
[…] バイラルメディア風、記事下にアイキャッチ画像と並べてＳＮＳボタンを設置する方法 | スキコトログ […]
みつ | 2015.11.03 7:45
参考にさせて頂いて設置しました
ありがとうございます。
PCでは正常に表示されますが、スマホだと
イイねをタップると表示がきれてしまいます、こちらのページもスマホで見ると切れてしまいますが…
対処方法など有りますでしょう？
みつ | 2015.11.03 7:47
ちなみにに
.fb-like iframe {
max-width: none!important;
}
追記しましたがスマホだと切れてしまいます
neco | 2015.11.16 21:16
コメントありがとうございます。レスが遅くなりすみません！
スマホでの表示確かに切れてしまっていますね^^；。
少し調べてみたのですが、cssで上手く調整する方法をバシッと見つけられていません。
またきれいに表示できる方法発見しましたら記事に追加させていただきますね。
iyon | 2015.11.22 6:01
ちょうど探していた設置法でしたので助かりました。
自分の場合は、ボタンを押すとコメント欄が下記の様になってしまいます。
・コメント欄が見切れる（spのみ）
・コメント欄の下にある文字が透けてみえる
などの不具合が起きてしまいました。対処方法などありましたら記載頂ければ助かります！
snakky | 2016.07.14 12:05
バイラルメディア風ボタンを参考にさせて頂きレスポンシブサイトに設置していたのですが、
ブラウザを小さくしてもはみ出るようになってしまいました。
ちなみに今みているこのページもはみ出ております。
以前は問題なかったと思うのですが、対処方法などありますでしょうか？
にんぽ | 2015.07.30 11:10
バイラルメディアの場合は、この「いいね！」は記事に対するいいね！ではなく、Facebookページに対するいいね！です。記事へのいいね！と思わせてFacebookページにいいね！させて購読者を増やすことを目的としているようですね