1. TOP
  2. Wordpress
  3. Wordpress設定・全般
  4. 超簡単!ワードプレスのサイドバーにFacebookのタイムラインを埋め込む方法

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


突然ですが、あなたは以下のように、ワードプレスのサイドバーに「Facebookのタイムライン」を表示させたいと思いませんか?

likeboxが表示されている様子

一見、難しそうに思うかもしれませんが、上記の写真のように、タイムラインを埋め込むのにかかる手順は、たったの2ステップです。

この記事では、2ステップに分けて、Facebookのタイムラインの埋め込み方法をお伝えします。

スポンサードリンク

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

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

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

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

FacebookDevelopers

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

ページプラグイン

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

pagepluginの入力項目

また、ほかの項目の設定方法は以下の通りです。


タブ

timelineと記載する

高さ

任意で記載する
ちょうど良いサイズが分からない場合は適当に記載してください。
あとで、変更が効きます

 


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

likeboxプレビュー

次に以下の表示オプションも確認してみましょう。
この部分は自分好みのデザインを選んでみてください。

表示オプション

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

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

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

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

「plugin containerの幅に合わせる」にチェックを入れた場合

PC/スマホレスポンシブになります。
この部分はチェックを入れておくと良いでしょう。

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

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

コードの取得

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

保存を押す様子

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

取得するコード

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

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

コードの取得が完了したら、コードをサイドバーに貼り付けていく作業になります。
サイドバーのデザイン機能である「ウィジェット」の使い方がわからない方は以下の記事を参考にしてください。

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

まずは、コードを貼り付ける部分の説明になります。
「外観」「ウィジェット」からウィジェット管理画面を開いてください。

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

テキスト貼り付け部分

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

コードを貼り付けた部分

実際にトップページを確認してみて、表示されていれば完了となります。

確認画面

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

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

pagepluginの入力項目

 


いかがでしたか?

Facebookのタイムラインの埋め込みは、外部の機能を使うことになるのですが、以前に比べてかなり簡単にタイムラインを配置できるようになりました。
この機能を活用してあなたのブログのファンを増やしていってくださいね!

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

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

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


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

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

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

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

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

ダウンロードする