はんこキャプターやぁのん

好きなものを堂々と好きでいたい。私の興味を綴るブログ。

はてなブログにFacebookページを貼り付ける方法

記事名と
URLをコピー

はてなブログFacebookを貼り付ける方法です。

投稿のみを表示したいのか、Facebookページ全体を設置したいのかで、方法が少し違います。

Facebookページを作る方法は↓こちら↓に書いています。

yaanon.hatenablog.com

f:id:yaanon:20210105230410j:plain(見本)

1つの投稿をはてなブログ記事内に貼り付けたい

  1. Facebookの投稿の右上三点アイコン「・・・」をクリック。
  2. 埋め込みをクリック。
  3. サイズを調整。(初期設定の500だと、画面からはみ出ることがあります)
  4. コードを取得」をクリック。
  5. IFrameを選択し、コードをコピー。
  6. ブログ記事を「HTML編集」にし、表示したい場所にコードを貼り付け。

上記はピクセル幅350にしてみました。

Facebookのタイムラインを貼り付けたい

Facebookページの投稿一覧をブログに表示します。以下、4~8番の説明は参考程度に。

  1. ページプラグインhttps://developers.facebook.com/docs/plugins/page-plugin)にアクセス
  2. FacebookページのURL」に貼り付けたいFacebookページのURLを入力。(ログインしなくても、アドレスさえわかれば良いみたいです。え、誰のでも貼れちゃう…
  3. 「タブ」は「timeline」とします。
  4. サイズを指定したい場合は「幅」「高さ」を入力。空欄でも可。
  5. 右下の「plugin containerの幅に合わせる」にチェックを入れると、表示画面に合わせて調整してくれます。
  6. 「スモールヘッダーを使用」にチェックすると、ヘッダー(名前表示の辺り)の高さが低くなります。
  7. 「カバー写真を非表示にする」にチェックすると、ヘッダーの画像が非表示になります。
  8. 「友達の顔を表示する」にチェックすると、いいね&フォローした人のアイコンが表示されます。プライバシー的にはチェックをはずして非表示が良いかも。
  9. コードを取得」ボタンをクリック
  10. IFrameを選択し、コードをコピー。
  11. 設置したい場所にコードを貼り付け。

HTML用の場所なら、記事内でもサイドバーでも設置できます。

上記は、「高さ300」「スモールヘッダーを使用」「カバー写真を非表示にする」で貼り付けました。

CSSを設定しないといけない、と書いてあるサイトもあったのですが、はてなブログの場合は、IFrameのコード1種のみで表示できて簡単でした。

参考記事

Facebook(フェイスブック)の投稿をWebサイトに埋め込む方法|ferret

【例あり】FacebookページをWEBサイトに埋め込む方法を紹介! | Aprico

  ↓各ジャンルの他ブログが読めます↓
にほんブログ村 その他趣味ブログへ にほんブログ村 コレクションブログ スタンプ・風景印へ にほんブログ村 鉄道ブログ 鉄道ぶらり旅へ にほんブログ村 その他趣味ブログ その他珍しい趣味へ