WordPressのサイドバーに「Facebookのタイムライン」を表示させることはとても簡単です。
上記の写真のように、タイムラインを埋め込むのにかかる手順は、たったの2ステップです。
それでは、早速Facebookのタイムラインの埋め込み方法を見ていきましょう！
ページプラグインからコードを取得する
まずはタイムラインをサイドバーに貼り付けるためのコードを取得します。
Facebookページタイムラインの表示スタイルの決定
以下のリンクより、「FacebookDevelopers」を開いてください。
すると、以下の画面に切り替わります。
この画面になりましたら、あなたがサイドバーに表示したいFacebookページのURLを、以下の部分に入力してください。
ほかの項目の設定方法は以下の通りです。
| タブ | timelineと記載する |
|---|---|
| 幅・高さ | 任意で記載する ちょうど良いサイズが分からない場合は適当に記載してください。 後からでも変更可能です。 |
ここまで終わると、以下のようにプレビュー画面が表示されます。
次に以下の表示オプションも確認してみましょう。
この部分は自分好みのデザインを選んでみてください。
「スモールヘッダーを使用」にチェックを入れた場合
「カバー写真を非表示にする」にチェックを入れた場合
「plugin containerの幅に合わせる」にチェックを入れた場合
PC/スマホでサイズを自動調整してくれます。
この部分はチェックを入れておくと良いでしょう！
「友達の顔を表示する」にチェックを入れた場合
コードの取得
自分好みのスタイルが出来上がったら、コードを取得していきます。
「コードを取得」をクリックします。
次に取得したコードの「ステップ2、3」の部分をコピーします。
これでコードの取得を完了です。
サイドバーにコードを貼り付ける
コードの取得が完了したら、コードをサイドバーに貼り付けていく作業になります。
サイドバーのデザイン機能である「ウィジェット」の使い方がわからない方は以下の記事を参考にしてくださいね。
それではまずは、コードを貼り付ける部分の説明になります。
「外観」→「ウィジェット」からウィジェット管理画面を開いてください。
サイドバーに「テキスト」ウィジェットを追加し、開きます。
テキストの部分に「ステップ2と3」のコードを続けて貼り付けて完了です。
実際にトップページを確認してみて、表示されていれば完了となります。
サイズが合っていないときは？
もしも、タイムラインの幅や高さが合っていないときは、一度コード取得の画面に戻り、以下の「幅」「高さ」の部分を書き換えて微調整してみてください。
いかがでしたか？
Facebookのタイムラインの埋め込みは、外部の機能を使うことになるのですが、以前に比べてかなり簡単にタイムラインを配置できるようになりました。
この機能を活用してあなたのブログのファンを増やしていってくださいね！
また、以下の記事ではサイドバーに少し高度な装飾を施すための方法をお伝えしています。
ぜひ、お読みください！
