「FacebookのThis投稿をWebサイトに載せたいけど、どうやって埋め込むの?」
そんな疑問を持っている人も多いのではないでしょうか。
実は、Facebookの投稿やページ、動画をWebサイトに埋め込むのは、とても簡単なんです。
この記事では、Facebook埋め込みコードの取得方法から、トラブル解決まで、わかりやすく徹底解説します。
Facebook埋め込みとは?
Facebook埋め込みとは、Facebookの投稿、ページ、動画などを、自分のWebサイトやブログに表示させる機能のことです。
例えば:
- 会社のFacebookページをホームページに表示
- 商品レビューの投稿をECサイトに掲載
- イベント告知の動画をブログ記事に埋め込み
こんなことができるんです。
埋め込みのメリット
1. Webサイトが常に最新情報で更新される
埋め込んだFacebook投稿は、元の投稿が更新されると自動的にWebサイト上でも反映されます。手動で更新する必要がないので、メンテナンスが楽になります。
2. ユーザーエンゲージメントが向上する
訪問者は、Webサイトを離れることなく、Facebookコンテンツに「いいね!」やコメントができます。これによって、サイトの滞在時間が伸びます。
3. 信頼性が高まる
Facebookの実際の投稿やレビューを表示することで、ユーザーに社会的証明を提供し、信頼を築くことができます。
4. SEO効果が期待できる
Facebookの新鮮なコンテンツがサイトに表示されることで、検索エンジンの評価が向上する可能性があります。
Facebookで埋め込めるもの
Facebookでは、さまざまなコンテンツを埋め込むことができます。
1. 個別の投稿
Facebookページや個人アカウントの投稿を埋め込めます。テキスト、画像、動画が含まれた投稿でも大丈夫です。
2. Facebookページ全体
企業やブランドのFacebookページを、タイムライン付きで表示できます。
3. 動画
Facebook上にアップロードされた動画を、自分のサイトで再生できるように埋め込めます。
4. Reels(リール)
最近人気のFacebook Reelsも埋め込み可能です。
5. イベント
Facebookイベントの詳細を表示できます。
注意点:
- 個人アカウントのプロフィールページは埋め込めません
- 埋め込めるのは「公開」設定のコンテンツのみです
Facebook投稿の埋め込みコードを取得する方法
それでは、具体的な手順を見ていきましょう。
【PC版】投稿の埋め込みコードを取得
ステップ1: 埋め込みたい投稿を開く
Facebookにログインし、埋め込みたい投稿を表示します。
ステップ2: 「…」メニューをクリック
投稿の右上にある「…」(三点リーダー)をクリックします。
ステップ3: 「埋め込み」を選択
メニューから「埋め込み」をクリックします。
ステップ4: 詳細設定(オプション)
「詳細設定」をクリックすると、Meta for Developersの「埋め込み投稿」ページに移動します。
ここで以下の設定ができます:
- 投稿の幅を調整
- 投稿全文を含めるかどうか
ステップ5: コードを取得
「コードを取得」ボタンをクリックします。
2種類のコードが表示されます:
- JavaScript SDK – 高機能で推奨
- IFrame – シンプルで簡単
初心者の方は、IFrameを選ぶと簡単です。
ステップ6: コードをコピー
表示されたコードをコピーします。
ステップ7: Webサイトに貼り付け
コピーしたコードを、Webサイトの表示させたい場所に貼り付けます。
重要: ビジュアルモードではなく、HTMLモード(テキストモード)で貼り付けてください。
【スマホ版】投稿の埋め込みコード取得
スマホからも埋め込みコードを取得できますが、PC版の方が操作しやすいため、できればPCからの取得をおすすめします。
スマホの場合:
- ブラウザ版Facebookにアクセス(アプリではなく)
- 投稿の「…」をタップ
- 「埋め込み」を選択
- 以降はPC版と同じ手順
Facebookページの埋め込みコードを取得する方法
Facebookページ全体を埋め込む場合は、専用のツールを使います。
ステップ1: ページプラグインにアクセス
Facebookの公式「ページプラグイン」ページにアクセスします。
URL: https://developers.facebook.com/docs/plugins/page-plugin/
左サイドメニューから「ページプラグイン」をクリックします。
ステップ2: FacebookページのURLを入力
「FacebookページのURL」欄に、埋め込みたいページのURLを入力します。
例: https://www.facebook.com/YourPageName
ステップ3: 設定をカスタマイズ
以下の項目を設定できます:
幅
- 最小180px、最大500px
- レスポンシブ対応にしたい場合は、「Plugin Containerの幅に合わせる」にチェック
高さ
- 表示する高さを指定(ピクセル単位)
タブ
- timeline(タイムライン)
- events(イベント)
- messages(メッセージ)
複数選択する場合は、カンマで区切って入力します。
オプション
- 小さいヘッダーを使用: ヘッダーを小さく表示
- カバー写真を非表示: カバー画像を表示しない
- 友達の顔を表示: 友達のプロフィール写真を表示
ステップ4: プレビューで確認
設定を変更すると、下部にプレビューが表示されます。実際の見た目を確認しながら調整しましょう。
ステップ5: コードを取得
「コードを取得」ボタンをクリックします。
2つのコードが表示されます:
JavaScript SDK(推奨)
- ステップ2のコード:
<body>タグの直後に配置 - ステップ3のコード: 実際に表示したい場所に配置
IFrame(簡単)
- 1つのコードを表示したい場所に貼り付けるだけ
ステップ6: Webサイトに貼り付け
取得したコードをWebサイトのHTMLに貼り付けます。
動画の埋め込みコードを取得する方法
Facebook動画の埋め込みも簡単です。
ステップ1: 動画を表示
埋め込みたい動画の投稿を開きます。
ステップ2: 「…」メニューから「埋め込み」を選択
投稿の場合と同じように、右上の「…」から「埋め込み」を選びます。
ステップ3: 詳細設定
「詳細設定」で、以下を調整できます:
- 動画の幅
- 投稿全文を含めるかどうか
ステップ4: コードを取得してWebサイトに貼り付け
「コードを取得」をクリックして、表示されたコードをコピーし、Webサイトに貼り付けます。
注意点:
- 公開されている動画のみ埋め込み可能
- 動画の公開範囲が後から変更されると、埋め込んだ動画が表示されなくなります
WordPress・Wix・Jimdo等への埋め込み方法
主要なWebサイト構築ツールでの埋め込み方を紹介します。
WordPressの場合
方法1: ブロックエディタ(Gutenberg)
- 投稿または固定ページの編集画面を開く
- 「+」ボタンをクリックして、「カスタムHTML」ブロックを追加
- 取得した埋め込みコードを貼り付け
- 保存して完了
方法2: クラシックエディタ
- 「テキスト」タブ(HTMLタブ)に切り替え
- 埋め込みコードを貼り付け
- 保存して完了
方法3: プラグインを使う
- Smash Balloon Social Post Feed: Facebook投稿を簡単に埋め込めるWordPress専用プラグイン
- VK FB Page Plugin: Lightning Proテーマなら標準搭載
Wixの場合
- エディタでページを開く
- 「追加」→「埋め込み」→「カスタム埋め込み」を選択
- 「Webサイトアドレス(URL)を追加」欄に、取得したHTMLコードを貼り付け
- サイズを調整して完了
Jimdoの場合
- 編集モードで、埋め込みたい位置をクリック
- 「コンテンツを追加」→「その他のコンテンツ&アドオン」→「ウィジェット/HTML」を選択
- 埋め込みコードを貼り付け
- 保存して完了
ペライチの場合
- 埋め込みたいブロックを選択
- 「SNSプラグイン」ブロックを挿入
- Facebookから取得したコードを貼り付け
- 保存して完了
Shopify・BASEの場合
商品ページやブログページのHTML編集欄に、埋め込みコードを直接貼り付けます。
JavaScript SDKとIFrameの違い
埋め込みコードには2種類ありますが、どちらを使うべきでしょうか?
JavaScript SDK
メリット:
- 高機能で柔軟性が高い
- 読み込み速度が速い
- レスポンシブ対応しやすい
- カスタマイズの自由度が高い
デメリット:
- 2つのコードを別々の場所に貼る必要がある
- 少し複雑
推奨される場合:
- 長期的に運用するサイト
- デザインをカスタマイズしたい場合
IFrame
メリット:
- 1つのコードを貼るだけで簡単
- 初心者でも使いやすい
デメリット:
- カスタマイズの自由度が低い
- 読み込みが少し遅い場合がある
- レスポンシブ対応に工夫が必要
推奨される場合:
- とにかく簡単に埋め込みたい
- 一時的な表示
結論: 迷ったら、まずはIFrameで試してみましょう。慣れてきたら、JavaScript SDKに切り替えるのがおすすめです。
埋め込みコードが表示されない場合の対処法
「埋め込みコードを貼り付けたのに表示されない!」というトラブルはよくあります。
1. URLが間違っている
確認方法:
- FacebookページのURLが正しいかチェック
- 埋め込みたい投稿のURLを再度確認
解決策:
- 正しいURLをコピーし直す
- プレビュー画面で表示を確認してから、コードを取得
2. 公開範囲が制限されている
埋め込めるのは「公開」設定のコンテンツのみです。
確認方法:
- 投稿やページの公開設定を確認
- 「友達のみ」や「一部公開」になっていないか
解決策:
- 公開範囲を「公開」に変更
- Facebookページの場合、以下も確認:
- 国別制限がかかっていないか
- 年齢制限がかかっていないか
- ビジター投稿が有効になっているか
3. ビジュアルモードで貼り付けている
WordPressなどでは、ビジュアルモードで貼り付けるとHTMLコードが文字として表示されてしまいます。
解決策:
- HTMLモード(テキストモード)に切り替えて貼り付け
- WordPressなら「カスタムHTML」ブロックを使用
4. ブラウザのキャッシュが残っている
古いデータが残っていると、正しく表示されないことがあります。
解決策:
- ブラウザのキャッシュを削除
- シークレットモード(プライベートブラウジング)で確認
5. 幅の設定が大きすぎる
iframeタグの幅を500px以上に設定すると、デザイン崩れやスマホ表示での不具合が起こる場合があります。
解決策:
- 幅を500px以下に設定
- 「Plugin Containerの幅に合わせる」にチェックを入れてレスポンシブ対応
6. JavaScriptやCSSの競合
他のスクリプトやスタイルシートと競合して、表示されない場合があります。
解決策:
- ブラウザの拡張機能(広告ブロッカーなど)を一時的にオフ
- テーマやプラグインの干渉を疑い、1つずつ無効化して原因を特定
7. 個人アカウントを埋め込もうとしている
個人アカウントのプロフィールページは埋め込めません。
解決策:
- Facebookページを作成してそちらを埋め込む
- 個別の投稿なら埋め込み可能(公開設定の場合)
8. Facebookにログインしていない
埋め込みコード取得時にログインしていないと、うまく表示されないことがあります。
解決策:
- Facebookにログインしてから埋め込みコードを取得
- 可能なら、そのページの管理者権限があるアカウントでログイン
レスポンシブ対応(スマホ対応)にする方法
埋め込んだFacebookコンテンツをスマホでも見やすくする方法を紹介します。
ページプラグインの場合
「Plugin Containerの幅に合わせる」にチェックを入れるだけで、自動的にレスポンシブ対応になります。
手動でレスポンシブ対応する場合
IFrameコードを使っている場合、以下のCSSを追加すると、レスポンシブ対応になります:
.fb-container {
position: relative;
width: 100%;
max-width: 500px;
overflow: hidden;
}
.fb-container iframe {
width: 100% !important;
}HTMLコードを以下のように囲みます:
<div class="fb-container">
<!-- ここに埋め込みコードを貼り付け -->
</div>デザインをカスタマイズする方法
埋め込んだFacebookコンテンツのデザインは、ある程度カスタマイズできます。
背景色を変える
CSSで背景色を指定できます:
.fb-post {
background-color: #f0f0f0;
padding: 10px;
}枠線をつける
.fb-post {
border: 2px solid #4267B2;
border-radius: 8px;
}センタリングする
Facebookの埋め込みコードは、自動でセンタリングされません。
<div style="text-align: center;">
<!-- 埋め込みコード -->
</div>または、CSSで:
.fb-container {
margin: 0 auto;
max-width: 500px;
}よくある質問
埋め込みに料金はかかる?
いいえ、Facebookの埋め込み機能は完全に無料です。
埋め込んだ投稿は自動で更新される?
はい、元の投稿が編集されると、埋め込んだ内容も自動的に更新されます。
ただし、投稿が削除されたり、公開範囲が変更されたりすると、埋め込みも表示されなくなります。
動画は自動再生される?
環境によります。
- PCブラウザ: ミュート状態なら自動再生されることが多い
- スマホ: ほとんどのブラウザで自動再生は制限されている
自動再生を制御したい場合は、JavaScript SDKを使って設定できます。
埋め込んだコンテンツへの「いいね!」はカウントされる?
はい、Webサイト上で「いいね!」やコメントをしても、元のFacebook投稿に反映されます。
埋め込みコードを変更したら、全ページを更新する必要がある?
いいえ、埋め込みコードは外部から読み込まれるため、元の投稿を変更すれば、すべてのページで自動的に反映されます。
ただし、埋め込みの設定自体(幅や高さなど)を変更した場合は、各ページのコードを更新する必要があります。
どのブラウザで動作する?
主要なブラウザ(Chrome、Firefox、Safari、Edge)すべてで動作します。
ただし、古いブラウザ(Internet Explorer 11以前など)では、正しく表示されない場合があります。
Facebookページと個人アカウントの違いは?
- Facebookページ: 企業やブランド用で、誰でも作成可能。埋め込みに最適。
- 個人アカウント: 個人用で、プロフィールページ全体は埋め込めない。個別の公開投稿は埋め込み可能。
ビジネス目的なら、Facebookページを作成するのがおすすめです。
モバイルアプリからでも埋め込みコードを取得できる?
Facebookモバイルアプリからは、埋め込みコードを取得できません。
スマホからコードを取得したい場合は、ブラウザ版Facebook(SafariやChromeで開く)を使ってください。
まとめ
Facebook埋め込みコードの取得と使い方をまとめると:
投稿の埋め込み:
- 投稿の「…」→「埋め込み」を選択
- コードを取得してWebサイトに貼り付け
Facebookページの埋め込み:
- ページプラグインにアクセス
- ページURLを入力して設定
- コードを取得してWebサイトに貼り付け
重要なポイント:
- 埋め込めるのは「公開」設定のコンテンツのみ
- HTMLモード(テキストモード)で貼り付ける
- IFrameは簡単、JavaScript SDKは高機能
- レスポンシブ対応を忘れずに
トラブル時は:
- 公開範囲を確認
- URLが正しいか確認
- キャッシュをクリア
- ビジュアルモードではなくHTMLモードで貼り付け
Facebookの埋め込み機能を活用すれば、Webサイトに動的なコンテンツを簡単に追加できます。
新鮮な情報をリアルタイムで表示し、訪問者とのエンゲージメントを高めることができるので、ぜひ試してみてください!
コメント