最近の人気記事

Sorry. No data so far.

ご予約など、お店についてはこちらから

かっこいい『いいね!ボタン』をサイトにつけてみませんか???【Facebook】

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

  

(最近スマホを変えたため、友人視点の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

多少はご容赦ください。

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

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

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



ご予約、ご質問はお気軽にLINEへ。
画像をクリックで簡単に追加できます。


Add Friend






SNS・SHERE

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

最新情報をお届けします

Twitterで新井 誠をフォローしよう!

Instagram

関連記事

最近の記事

ページ上部へ戻る