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

スポンサードリンク

ワードプレスのサイドバーに「Facebookのタイムライン」を表示させることはとても簡単です。

likeboxが表示されている様子

上記の写真のように、タイムラインを埋め込むのにかかる手順は、たったの2ステップです。

それでは、早速Facebookのタイムラインの埋め込み方法を見ていきましょう!

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

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

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

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

FacebookDevelopers

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

ページプラグイン

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

pagepluginの入力項目

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

タブ timelineと記載する
幅・高さ 任意で記載する
ちょうど良いサイズが分からない場合は適当に記載してください。
後からでも変更可能です。

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

Page pluginプレビュー

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

表示オプション

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

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

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

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

「plugin containerの幅に合わせる」にチェックを入れた場合
PC/スマホでサイズを自動調整してくれます。
この部分はチェックを入れておくと良いでしょう!

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

コードの取得

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

保存を押す様子

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

取得するコード

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

スポンサードリンク

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

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

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

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

テキスト貼り付け部分

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

コードを貼り付けた部分

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

スポンサードリンク

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

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

pagepluginの入力項目

いかがでしたか?

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

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

スポンサードリンク