1. TOP
  2. 超簡単!ワードプレスのサイドバーにFacebookの「いいね!」ボタンとタイムラインを埋め込む方法

超簡単!ワードプレスのサイドバーにFacebookの「いいね!」ボタンとタイムラインを埋め込む方法


以下の写真の赤枠のように、ワードプレスのサイドバーにFacebookのタイムライン(=PagePlugin)を表示させたいと思いませんか?

likeboxが表示されている様子

一見、難しそうに思うかもしれませんが、

この図のようにあなたのワードプレスのサイドバーにタイムラインを表示させるために必要なことは、たったの2ステップです。

この記事では2ステップに分けてサイドバーのカスタマイズ方法をお伝えしていきます。

関連:これだけやっておけば大丈夫!ワードプレスとFacebookを連携させる方法

ページプラグインからコードを取得する

まずはタイムラインをサイドバーに貼り付けるためのコードを取得します。

Facebookページタイムラインの表示スタイルの決定

以下のリンクより、FacebookDevelopersを開いてください。

FacebookDevelopers

すると、以下のような画面に切り替わります。

ページプラグイン

この画面になりましたら、あなたがサイドバーに表示したいFacebookページのURLを以下の部分に入力してください。

pagepluginの入力項目

「タブ」欄にはtimelineと記載します。

また、「幅」「高さ」の欄は任意で記載してください。(どのくらいにしたらいいかが分からない場合は適当に記載してください。変更は効きます。)

ここまで終わると以下のようにプレビュー画面が表示されます。

likeboxプレビュー

次に以下の表示オプションも確認してみましょう。

この部分は自分好みのデザインを選んでみてください。

表示オプション

「スモールヘッダーを使用」にチェックを入れた場合は以下のようになります。

「スモールヘッダーを使用」にチェックを入れた場合

「カバー写真を非表示にする」にチェックを入れた場合は以下のようになります。

「カバー写真を非表示にする」にチェックを入れた場合

「plugin containerの幅に合わせる」にチェックを入れると、PC/スマホレスポンシブになります。

この部分はチェックを入れておくと良いでしょう。

次に「友達の顔を表示する」にチェックを入れた場合です。

「友達の顔を表示する」にチェックを入れた場合

コードの取得

自分好みのスタイルが出来上がったら、コードを取得していきます。

「コードを取得」をクリックします。

保存を押す様子

次に取得したコードのステップ2、3の部分をコピーします。

取得するコード

これでコードの取得を完了です。

サイドバーにコードを貼り付ける

コードの取得が完了したら、コードをサイドバーに貼り付けていく作業になります。

サイドバーのデザイン機能である「ウィジェット」の使い方がわからない方は以下の記事を参考にしてください。

ワードプレスのサイドバーの編集方法

まずは、コードを貼り付ける部分の説明になります。

「外観」「ウィジェット」からウィジェット管理画面を開いてください。

サイドバーに「テキスト」ウィジェットを追加し、開きます。

テキスト貼り付け部分

テキストの部分にステップ2と3を続けて並べたコードを貼り付けて完了です。

コードを貼り付けた部分

実際にトップページを確認してみて、OKであれば完了となります。

確認画面

サイズが合っていないときは?

もしも、タイムラインの幅や高さが合っていないときは、一度コード取得の画面に戻り、以下の「幅」「高さ」の部分を書き換えて微調整してみてください。

pagepluginの入力項目

まとめ

以上で「サイドバーにFacebookのタイムラインを表示する方法」の解説を終わります。

外部の機能を使うことになるのでですが、以前に比べてかなり簡単にタイムラインを配置できるようになりました。

この機能を活用してあなたのブログのファンを増やしていってくださいね!

以下の記事ではサイドバーに少し高度な装飾を施すための方法をお伝えしています。ぜひご覧ください。

サイドバーを自由自在にデザインする方法

サイドバーに人気記事を表示させる方法


このサイトでは、情報の専門性・信ぴょう性に配慮しています。そのため、中央省庁のデータやGoogle公式資料、市場分析データ、書籍などの信用できるデータを参照するよう、心がけております。ポリシーについて

無料E-BOOK|0から始めるワードプレスマーケティング実践ガイド

0から始めるワードプレスマーケティング
このE-BOOKは次のようなノウハウをお伝えしています。

  •  ・ワードプレスブログを立ち上げてから、実際にビジネスに繋げる方法
  •  ・ブログを使った集客方法の全体像
  •  ・ブログやメルマガなど、様々なツールをより効果的に使いこなす方法

以下のボタンからダウンロードしてください。

ダウンロードする

関連記事

  • ワードプレスのナビゲーションメニューを設定・編集する方法

  • ワードプレスで自動投稿(予約投稿)する方法!Facebookにもついでに自動シェア!

  • ワードプレスのカテゴリー設定の方法

  • ワードプレスのテーマをインストールする2つの方法

  • ワードプレスからFacebookやTwitterへブログ記事を自動投稿する方法

  • ワードプレスの固定ページをトップページに設定する方法+注意点