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 」に出会い、どっぷりハマっています(^_^)。

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

現在、取締役兼二児のパパ。イクメン目指して、公私ともに慌ただしくしています（笑）

お問い合わせ