FacebookのいいねボタンをWordPressに設置する方法です。

いいねボタンのコード取得

いいねボタン（WEB用）- 開発者ツール
サイトのTOPページなど一先ずURLを入力して、「コード取得」を実行。

上記URLの部分を get_permalink() に変更すればOK。

サンプル

子テーマのコンテンツの下などに挿入

<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 = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box3">
<?php
    if(has_post_thumbnail()){
        echo the_post_thumbnail(array(512,512));
    }else{
        echo '<img src="' , get_site_icon_url(), '">';
    }
?>
<div class="fb-like" data-href="<?php echo get_permalink() ?>" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
</div>

CSS

.fb-like-box3 {
    text-align: center;
    border:1px solid #ccc;
    height: 220px;
    overflow: hidden;
    display: table;
    width: 100%;
}
.fb-like-box3 img {
    height: 240px;
    margin-top: -80px;
    width: 100%;
    object-fit: cover;
}
.fb-like-box3 .fb-like { display: table-row; }
.fb-like-box3 .fb-like:after { content:' よろしくお願いします。'; font-size: 14px; }

サンプルはアイキャッチなども含めてBOX風に。もっといいCSSの書き方がある気もしますが、、、。

とりあえず、コピペで使えると思います。

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

宮崎県都城市出身。東京都葛飾区在住。現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ