投稿のみを表示したいのか、Facebookページ全体を設置したいのかで、方法が少し違います。
Facebookページを作る方法は↓こちら↓に書いています。
(見本)
1つの投稿をはてなブログ記事内に貼り付けたい
- Facebookの投稿の右上三点アイコン「・・・」をクリック。
- 埋め込みをクリック。
- サイズを調整。(初期設定の500だと、画面からはみ出ることがあります)
- 「コードを取得」をクリック。
- IFrameを選択し、コードをコピー。
- ブログ記事を「HTML編集」にし、表示したい場所にコードを貼り付け。
上記はピクセル幅350にしてみました。
Facebookのタイムラインを貼り付けたい
Facebookページの投稿一覧をブログに表示します。以下、4~8番の説明は参考程度に。
- ページプラグイン(https://developers.facebook.com/docs/plugins/page-plugin)にアクセス
- 「FacebookページのURL」に貼り付けたいFacebookページのURLを入力。(ログインしなくても、アドレスさえわかれば良いみたいです。え、誰のでも貼れちゃう…)
- 「タブ」は「timeline」とします。
- サイズを指定したい場合は「幅」「高さ」を入力。空欄でも可。
- 右下の「plugin containerの幅に合わせる」にチェックを入れると、表示画面に合わせて調整してくれます。
- 「スモールヘッダーを使用」にチェックすると、ヘッダー(名前表示の辺り)の高さが低くなります。
- 「カバー写真を非表示にする」にチェックすると、ヘッダーの画像が非表示になります。
- 「友達の顔を表示する」にチェックすると、いいね&フォローした人のアイコンが表示されます。プライバシー的にはチェックをはずして非表示が良いかも。
- 「コードを取得」ボタンをクリック
- IFrameを選択し、コードをコピー。
- 設置したい場所にコードを貼り付け。
HTML用の場所なら、記事内でもサイドバーでも設置できます。
上記は、「高さ300」「スモールヘッダーを使用」「カバー写真を非表示にする」で貼り付けました。
CSSを設定しないといけない、と書いてあるサイトもあったのですが、はてなブログの場合は、IFrameのコード1種のみで表示できて簡単でした。