バズ部

  • icon株式会社ルーシー
  • 東京都港区新橋5-10-5 PMO新橋II 8階
  • 記事を探す
    • まず見て頂きたいページ
      • バズ部式マーケティングの進め方
      • コンテンツマーケティング101
      • SEO初心者向けマニュアル
      • バズ部メンバーの知見集
      • WordPress初心者向けガイド
    • 記事
      • 全ての記事を見る
      • SEO
        • SEOの基礎
        • SEO内部対策
        • コンテンツSEO
        • サーチコンソール
        • 高度なSEO
      • コンテンツマーケティング
        • 1.コンテンツマーケティングとは?
        • 2.コンテンツマーケティングをやるべきなのか
        • 3.あなたのブランドストーリーは何か?
        • 4.コンテンツマーケティング設計が全てだ
        • 5.必ず必要な社内体制と体制づくり
        • 6.まずは、小さな一歩を大切にしよう
        • 7.コンテンツ制作のコツを知ろう
        • 8.多くの人が陥る失敗を知っておこう
        • 9.顧客が「まだ気づいていないこと」に気づけるか
        • 10.素早く着実にコンバージョンにつなげよう
        • 11.正しく効果測定して成果を引き上げよう
        • 12.精度を上げてもっともっと成果を飛躍させよう
      • オウンドメディア
      • WordPress
        • wordpressウィジェット
        • wordpressテーマ
        • wordpressプラグイン
        • wordpressの基本操作
        • wordpressの導入と準備
        • wordpressの設定方法
        • ブログマーケティング
      • ソーシャルメディア
        • Facebook
      • ランディングページ
        • キャッチコピー
        • コピーライティング
      • メルマガ
      • EC
      • インタビュー
      • アーカイブ
    • 監修者/ライター一覧
      • 松澤 大輔
      • 木村 竜児
      • 野口 陽司
  • サービス一覧
    • サービスページ
      • コンテンツマーケティング立ち上げ&運用支援
      • SEO記事制作代行
      • キーワード設計代行
      • WEBサイト制作
      • 研修サービス
      • bazubu-shiki
      • ライティングツール「Pencii」
    • 資料請求
      • コンテンツマーケティング立ち上げ&運用支援サービス資料
      • SEO記事制作代行サービス資料
      • キーワード設計代行サービス資料
      • バズ部紹介資料
  • 支援実績
  • お役立ち資料
    • お役立ち資料一覧
      • 広告費を1/10にして売上を倍増させる全手法
      • バズ部が運営する月間20万PV超サイト11の生データ集
      • 良質なコンテンツを作成するための20のコツ
      • 最高のオウンドメディア支援会社を選ぶために行うべき7つの質問
      • バズ部紹介資料
      • バズ部公式メールマガジン
  • セミナー
  • 運営者情報

ご相談・お問い合わせ

© Copyright 2022 バズ部. All rights reserved.

ユーザーに届ける価値を徹底的に追求する
マーケティングを提供します

© Copyright 2022 バズ部. All rights reserved.

icon icon

icon
  • icon
  • icon
  • icon

05/22木8:00〜9:00

【5/22開催】バズ部の記事制作代行 商品説明会

  • オンライン
    1. バズ部 /
    2. WordPress /
    3. wordpressの設定方法 /
    4. WordPress に Facebook の LikeBox を設置する方法
  • 最終更新日 2021.03.08

WordPress に Facebook の LikeBox を設置する方法

コンテンツマーケティングを行う上で、より多くのファンを獲得することは非常に重要だ。なぜなら、ファンの数が多くなればなるほど、コンテンツがシェアされて、より多くの人に届けられる可能性が高くなるからだ。

そして、ファンの獲得のために、まずやっていおきたいのが、Facebook の LikeBox をサイトに設置することだ。

そこで、ここでは、例として WordPress に LikeBox を設置する方法をご紹介する。

注:LikeBoxがサービス終了します
LikeBox が2015年6月23日でサービス終了しました。代わり利用できる PagePlugin という新しいサービスは、ここでの解説内容よりもっと簡単でシンプルとなっています。以下はあくまで参考までにとどめてください。

また、私たちバズ部は12年で400社以上のメディア支援を行い、

  • 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア
  • 8ヶ月で月間140万PVを実現したアプリメディア

など大きな成果を挙げ続けている。

各サイトの成功要因をインタビューしているので、
あなたのサイトに役立てて欲しい
⇒25サイトの成功事例インタビューはこちら

ebook
ebook

目次

  • 1.Facebook Developers でコードを取得
    • 1−1.所定項目の入力
    • 1−2.コードの取得
  • 2.WordPress に Likebox を設置
  • 3.まとめ

1.Facebook Developers でコードを取得

LikeBox を設置するには、まず、Facebook Developers にアクセスしよう。

facebook-likebox-0

サイトは英語だが、操作は簡単なので安心して欲しい。

1−1.所定項目の入力

まずは下図の所定の入力項目にそれぞれ入力しよう。

facebook-likebox-1

入力項目は次の通りだ。

  • Facebook Page URL:自分の Facebook ページの URL を入力
  • Width : LikeBox の横幅を数字で入力
  • Height:LikeBox の高さを数字で入力
  • Color Scheme:light か dark の2種類から選択

次に任意のチェックボックスにチェックをいれよう。

  • Show Friend’s Faces:Facebook ページにいいねを押しているファンの顔写真の表示
  • Show Posts:Facebook ページのタイムラインの表示
  • Show Header:ヘッダーの表示
  • Show Border:ボーターの表示

これらに変更を加えるたびに、変更後の LikeBox が下のプレビュー欄に表示されるので、確認しながら設定しよう。

その後 ” Get Code ” をクリックしたら、コードを取得することができる。

1−2.コードの取得

” Get Code ” をクリックすると、以下のようにコードが表示される。

facebook-likebox-7

まず注目して欲しいのが、コードには3つの種類があるということだ。まずは、それぞれのコードの違いを理解しておこう。

1−2−1.LikeBox の3種類のコード

コードには、

  • HTML5:最新の HTML 言語
  • XFBML:Facebook が独自に開発した言語
  • IFRAME:Inline Frame という昔からある技術

の3つのバージョンがある。

結論から言うと、HTML5 を使うことをおススメする。

理由は、ソース的にもっとも軽く表示が早いからだ。XFBML も表示が早いが、これはプログラミングに精通している人でなければ使いこなせないので、技術者の方以外は気にする必要がない。

IFRAME は Inline Frame と言って、自分のサイト上に、他のサイトのページを表示させる技術のことだ。他サイトからデータを引っ張ってくることになるので、どうしても表示速度が遅くなる。

以上のことから、ここでは HTML5 をメインに解説していく。

1−2−2.コードの取得方法

まず、左側のHTML5 が選択されていることを確認しよう。

facebook-likebox-2

HTML5 版では、2つのコードが表示される。

上段のコードは、スクリプトというプログラミング言語だ。細かく理解しておく必要はないが、サイトの <body> タグ内に設置しておかなければいけない。下段のコードは上段のスクリプトコードを読み込んで、LikeBox を表示させるためのコードだ。

つまり、サイト内に設置した上段のスクリプトコードを、下段のコードが読み込んで LikeBox が表示されるという形になる。

この2つのコードを、メモ帳などにコピー & ペーストしておこう。

facebook-likebox-8

注:HTML5 で表示されない場合
今では WordPress のほとんどのテンプレートが HTML5 で作られている。しかし稀に HTML5 以前のコードで作られているテンプレートがある。その場合、LikeBox が表示されない可能性がある。その時は IFRAME 版を選択するようにしよう。ちなみに IFRAME 版ではスクリプトコードは不要なのでコピーするコードは1つだけになる。

成功したオウンドメディアの要因を学ぶ

  • Article Image 1Article Image 1

    累計106億円の売上を叩き出した不動産会社のコンテンツマーケティング事例

    1

  • Article Image 2Article Image 2

    わずか8ヶ月で月間140万PVを実現したアプリ企業メディア成功事例

    2

  • Article Image 3Article Image 3

    問い合わせが月4,400件以上!自社メディアで驚異的なCV数を生み出した弁護士事務所

    3


2.WordPress に Likebox を設置

次に、WordPress に Likebox を設置してみよう。

ここでは例としてサイドバーに表示させてみよう。やることは、先ほどの2つのコードをテキストウィジェットに貼付けるだけだ。もし、上で解説したスクリプトコード(上段のコード)を、既にサイト内のどこかに設定している場合は、LikeBox の表示コード(下段のコード)だけを貼付ければ良い。

注:ウィジェットの設定方法
ウィジェットに関して分からないことがあれば、『 WordPress ウィジェットの追加と編集方法』で、ウィジェットの追加・編集・並び替え・停止・削除の方法を全て解説しているので確認しよう。

facebook-likebox-3

貼付けたら、右下の「保存」をクリックしてからサイトを確認しよう。

もし表示を調整したければ、ウィジェット設定画面でコードを直接編集すると早い。

編集可能な部分は、下の太字で表示した6つだ。

<div class=”fb-like-box” data-href=”https://www.facebook.com/bazubu” data-width=”240″ data-height=”420″ data-colorscheme=”light” data-show-faces=”true” data-header=”false” data-stream=”false” data-show-border=”false”></div>

data-width とdata height は数字を変更すると、それぞれ横幅と高さを調整できる。他の4つに関しては、 ” true ” にすると有効に、” false ” にすると無効になる。

これは実際にいじってみると理解が早いだろう。

最後の「保存」をおして確認すると、WordPress のサイドバーに Likebox が表示されるようになっているはずだ。

facebook-likebox-9


3.まとめ

Facebook の LikeBox の設置方法に関しては以上だ。

もちろん、LikeBox は、サイドバー以外の場所にも自由に設置することができる。

おススメは、サイドバーと記事下の2カ所だ。しかし、普通のテンプレートの場合、ウィジェットでサイドバーを編集することはできるが、ウィジェットで記事下を編集することはできない。そのため、新たに PHP と呼ばれるファイルを追加して、その PHP ファイルの中に、LikeBox のコードを入力する必要がある。

新たなPHPの設置は、かなり技術的な内容になるので、ここでは、そこまでは踏み込まないが、おいおい解説記事を用意したいと考えている。

何はともあれ、多くの人に「いいね!」を押してもらえるように、良質なコンテンツを作ることに全力で挑もう。

またサイドバーの設定に関しては、あわせて以下の3つのページも参考にしておこう。

・WordPressのサイドバーにTwitterのフォローボタンを設置する方法
・WordPressのサイドバーにRSS購読ボタンを設置する方法

カテゴリー wordpressの設定方法

記事をシェアする

  • B!

無料eBook:バズ部式マーケティング
広告費を1/10にして売上を倍増させる全手法

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード

未読

参考にしていただきたい事例

liskulのtopページ

リスティング広告

1年でプッシュ型営業からプル型へ!毎月約200件の問い合わせを獲得するデジタルマーケティングブログ

  • SOLDOUT
  • ソウルドアウト株式会社様

学校 コンテンツマーケティング

学校・教育

1年半で億単位の貢献を果たすまでに成長した学校法人のコンテンツマーケティング事例

  • 神田外語学院
  • 神田外語学院 様
アバター
  • 著者 : バズ部編集部

ユーザーに届ける価値を徹底的に追及するのがバズ部式マーケティング。
バズ部では、ユーザー主義を貫きながら、なおかつ数字にこだわり結果を出してきた手法やノウハウを惜しみなく提供していきます。

  • 会社概要
  • 採用情報
  • セミナー
  • サービス紹介
  • 記事一覧

icon

株式会社ルーシー東京都港区新橋5-10-5 PMO新橋II 8階

ABOUT US

  • 運営者情報
  • セミナー
  • 採用情報
  • お問い合わせ
  • プライバシーポリシー
  • 特定商取引法に基づく表記
  • 紹介メディア

© Copyright 2025 バズ部. All rights reserved.