最近友人に聞かれたことがありまして、

  

(最近スマホを変えたため、友人視点のLINE)

これ、何の話かというと。

私のブログの下にあるこれ。

  

こやつですね。

『この記事が気に入ったらいいね！しよう』

のボタンですね。

これがつけたかったみたいで相談を受けました。

で、必要なファイルを送ったところ。。。

『【大公開】僕の記事の「いいね！」が激増した理由。』

http://oikemotoki.com/?p=1598

こういった記事まで書いてくれました。

喜んでくれたのでなにより。

でも、なんかこの投稿のFacebookでのコメント欄を見ていると、なにやら需要がありそうな予感。

「だったらまとめてブログに書けばえーやん」

と思ったので、せっかくなのでファイルを書いておきます。

『FacebookページいいねやTwitterフォロワーが倍増！バイラルメディア風オリジナルSNSボタンの設置方法【WordPress】』

http://mama-hack.com/snsbox

こちらの【ままはっく】さんの記事を参考にさせてもらい、私の記事に合うようにコードをいじらせていただきました。

しかし、こちらの【ままはっく】さんの記事のコードですと、ご自身のFacebookページの「いいね！」のボタンになっていますので、私のような「Facebookページ」を持たない人間にはまるで意味をなさないインテリアのようになってしまいます。

なので私はこのコードを少し変えて、Facebookページではなく、『今読んでいるページ』のFacebookの投稿に「いいね！」がつくように改変しました。(そしてその数がわかるように)

まずこれを表示させたいのは、『単一記事の投稿』(single.php)の部分です。

なので、「テーマの編集」からそちらに入っていただき、自分が置きたい場所に

1. <?php if (is_mobile()) :?>
2.       <div class=”p-shareButton p-asideList p-shareButton-bottom”>
3.         <div class=”p-shareButton__cont”>
4.           <div class=”p-shareButton__a-cont”>
5.             <div class=”p-shareButton__a-cont__img” style=”background-image: url(‘<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>’)”></div>
6.             <div class=”p-shareButton__a-cont__btn”>
7.               <p>この記事が気に入ったらいいね！しよう</p>
8.               <div class=”p-shareButton__fb-cont p-shareButton__fb”>
9.                 <div class=”fb-like” data-href=”<?php echo “http://” . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’]; ?>” data-layout=”box_count” data-action=”like” data-show-faces=”false” data-share=”false”></div>
10.                 <span class=”p-shareButton__fb-unable”></span>
11.               </div>
12.             </div>
13.           </div>
14.         </div>
15.       </div>
16. <?php else: ?>
17. <div style=”padding:10px 0px;”></div>
18.  <!– PC –>
19.             <div class=”p-entry__push”>
20.               <div class=”p-entry__pushThumb” style=”background-image: url(‘<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>’)”></div>
21.               <div class=”p-entry__pushLike”>
22.                 <p>この記事が気に入ったら<br>いいね！しよう</p>
23.                 <div class=”p-entry__pushButton”>
24. <div class=”fb-like” data-href=”<?php echo “http://” . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’]; ?>” data-layout=”box_count” data-action=”like” data-show-faces=”false” data-share=”false”></div>
25.                 </div>
26.                 <p class=”p-entry__note”></p>
27.               </div>
28.             </div>
29. <?php endif; ?>

こちらのコードを入れてください。

そうしましたら、後はCSSにて表示を整えるだけです。

CSSは、PCとスマホのところに各々配置してください。

【CSS(スマホ)】

1. .p-shareButton-bottom {
2.     padding-bottom: 15px;
3.     overflow: hidden
4. }
5. .p-shareButton__buttons {
6.     font-weight: 700;
7.     color: #fff;
8.     font-size: 13px;
9.     text-align: center
10. }
11. .p-shareButton__buttons>li {
12.     padding-left: 3px;
13.     padding-right: 4px
14. }
15. .p-shareButton__buttons .c-btn {
16.     padding: 8px 0;
17.     border-radius: 2px
18. }
19. .p-shareButton__buttons .c-ico {
20.     display: block;
21.     margin: auto auto 5px
22. }
23. .p-shareButton__fb {
24.     -webkit-transform: scale(1.2);
25.     -ms-transform: scale(1.2);
26.     transform: scale(1.2);
27.     width: 115px
28. }
29. .p-shareButton__fb-cont {
30.     position: relative;
31.     width: 108px;
32.     margin: 0 auto
33. }
34. .p-shareButton__fb-unable {
35.     position: absolute;
36.     top: 0;
37.     left: 0;
38.     width: 20px;
39.     height: 20px
40. }
41. .p-shareButton__cont {
42.     margin: 15px 0 0
43. }
44. .p-shareButton__a-cont {
45.     background: #2e2e2e;
46.     display: table;
47.     width: 100%
48. }
49. .p-shareButton__a-cont__img {
50.     display: table-cell;
51.     min-width: 150px;
52.     -webkit-background-size: cover;
53.     background-size: cover;
54.     background-repeat: no-repeat;
55.     background-position: center
56. }
57. .p-shareButton__a-cont__btn {
58.     display: table-cell;
59.     padding: 12px;
60.     text-align: center
61. }
62. .p-shareButton__a-cont__btn p {
63.     font-size: 12px;
64.     color: #fff;
65.     font-weight: 700;
66.     padding: 5px 0 15px;
67.     line-height: 1.4;
68.     margin-bottom: 0px;
69. }

 

【CSS(PC)】

1. .p-entry__push {
2.     margin-bottom: 20px;
3.     display: table;
4.     table-layout: fix;
5.     width: 100%;
6.     background-color: #2b2b2b;
7.     color: #fff;
8. }
9. .p-entry__pushThumb {
10.     display: table-cell;
11.     min-width: 240px;
12.     background-position: center;
13. background-size:cover;
14. }
15. .p-entry__pushLike {
16.     display: table-cell;
17.     padding: 20px;
18.     text-align: center;
19.     vertical-align: middle;
20.     line-height: 1.4;
21.     font-size: 20px;
22. }
23. .p-entry__pushButton {
24.     margin-top: 15px;
25.     display: inline-block;
26.     width: 200px;
27.     height: 40px;
28.     line-height: 40px;
29.     -webkit-transform: scale(1.2);
30.     -ms-transform: scale(1.2);
31.     transform: scale(1.2);
32. }
33. .p-entry__pushButtonLike {
34.     line-height: 1
35. }
36. .p-entry__note {
37.     margin-top: 15px;
38.     font-size: 12px;
39.     color: #999;
40. }
41.  
42.  

といった感じで置いていただければ、

  

こんな感じのが出来上がると思います。

あとは好みで配置やCSSをいじってみてください。

と、慣れないiPhoneにて書かせていただきましたw

CSSなど、いらない部分もあると思いますが、私は本業が美容師です！！w

多少はご容赦ください。

少しでも喜んで使ってくれる人がいれば嬉しい限りです。

是非是非お試しください。

わからないことなどあれば、お気軽にご相談を〜。

画像をクリックで簡単に追加できます。