最新のSeedProdニュース

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

WordPressにFacebook動画を埋め込む方法(4つの方法、無料・有料) 

執筆者: 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。
    
レビュー担当者: レビュアーアバター ターナー ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同創設者です。彼は20年以上のビジネスおよび開発経験を持ち、彼のプラグインは2500万回以上ダウンロードされています。

要約:WordPressにFacebook動画を埋め込む方法

Facebook動画をWordPressサイトに掲載する実際的な方法は4つあります。最適な方法は、無料、デザイン重視、自動更新、プラグイン不要のいずれを求めているかによって異なります。

  1. SeedProdメソッド:SeedProdビルダーのページにFacebook動画埋め込みブロックをドロップして、デザインを完全に制御します。
  2. フィードプラグインメソッド:Facebookフィードプラグインを使用して、自動更新される多数の動画やライブストリームを表示します。
  3. 手動iframeメソッド:カスタムHTMLブロックにFacebookの埋め込みコードを貼り付けて、プラグインなしで1つの動画を掲載します。
  4. ネイティブ埋め込みブロック:まずWordPressの無料埋め込みブロックを試してください。表示されない場合は、iframeをフォールバックとして使用します。
  5. ニーズで選ぶ:1つの動画ならネイティブまたは手動、デザイン重視ならSeedProd、自動更新ギャラリーならフィードプラグイン。

Facebookで好評な動画があり、それを自分のサイトにも掲載したいと考えているとします。レイアウトが崩れたり、ページ速度が低下したりしないか心配になります。

良いニュースは、WordPressにFacebook動画を無料または有料の4つの方法で埋め込めることです。このガイドでは、それぞれの方法を詳しく説明するので、あなたの動画、サイト、予算に合った方法を選ぶことができます。

適切な方法の選び方

それぞれの方法は異なる問題を解決するため、最も速く選ぶ方法は、あなたが何を達成しようとしているかに合わせることです。

方法最適な対象プラグインが必要ですか?
ネイティブ埋め込みブロック簡単な動画1つ、無料、プラグインなしいいえ
SeedProdページと動画の外観を完全に制御はい(SeedProd)
Facebookフィードプラグイン自動更新される多数の動画フィードはい(Smash Balloon)
手動iframeコード動画1つ、プラグインなし、基本的なスタイル設定いいえ

WordPressにFacebook動画を埋め込むことはできますか?

はい、WordPressにFacebook動画を埋め込むことができます。埋め込みが訪問者に対して機能するには、動画が公開されている必要があります。

最も簡単な方法は、組み込みの動画プレーヤーを備えたWordPressプラグインを使用することです。このガイドの後半では、この目的に最適なWordPressプラグインを2つ紹介し、さらに無料のプラグインなしオプションも紹介します。

SeedProdを使用してWordPressにFacebook動画を埋め込む方法

SeedProdを使用すると、コードに触れることなく、Facebook動画を1つページにドロップし、その外観を正確に制御できます。これは、Facebook動画埋め込みブロックが組み込まれたドラッグ&ドロップWordPressウェブサイトビルダーです。

私は自分のサイトでSeedProdを使用しているため、動画を適切なページデザイン内に配置したい場合は、この方法を選択します。構築中に埋め込みがライブで機能するのを確認できるため、推測作業が大幅に省けます。

SeedProd ドラッグ&ドロップ WordPress ウェブサイトビルダー

ステップ1. SeedProdのインストールと有効化

まず、WordPressサイトにSeedProdプラグインをインストールして有効化します。

このチュートリアルではSeedProdを使用しています。なぜなら、Facebook動画埋め込みブロックは、フィードやライブストリームもカバーするAdvanced Blocksパネルにあるからです。

ヘルプが必要な場合は、SeedProdのドキュメントにあるステップバイステップのインストールガイドに従ってください。

ステップ2.ランディングページまたはテーマテンプレートを選択

SeedProd を有効化したら、デザインの基盤として使用するテンプレートを選択する必要があります。SeedProd には、どちらも Facebook 動画埋め込みをサポートする 2 つのオプションがあります。

  • テーマビルダー: 完全な WordPress ウェブサイトキットから始め、すべてのページとテンプレートをカスタマイズします。
  • ランディングページビルダー: 既存の WordPress テーマと連携する単一のページを作成します。

このガイドでは、ランディングページビルダーを使用します。これは、ページに Facebook 動画を追加する最も簡単な方法だからです。WordPress のダッシュボードから、SeedProd » ランディングページ に移動し、新しいランディングページを追加 をクリックします。

SeedProdで新しいランディングページを追加する

ステップ 3. SeedProd ビルダーでテンプレートをカスタマイズする

次に、ページの目的に合ったテンプレートを選択します。SeedProd には、完全にカスタマイズ可能な数十個のプロフェッショナルにデザインされたテンプレートがあるので、希望するレイアウトに近いものを選択してください。

ランディングページテンプレート

選択すると、テンプレートが SeedProd のドラッグ&ドロップビルダーで開きます。右側にページのライブプレビューが表示され、左側にコンテンツブロックと設定のパネルが表示されます。

プレビュー内の見出しや画像などの任意の要素をクリックして、テキスト、色、フォント、スペーシングを変更します。これらの簡単な編集は、Facebook動画の埋め込みを追加する前にブランドに合わせるのに役立ちます。

ページの見出しをカスタマイズする

ステップ 4. WordPress で Facebook 動画埋め込みブロックを追加する

Facebook動画を埋め込む時間です。SeedProdビルダーで、左側の「高度なブロック」パネルを開き、「Facebook動画埋め込み」ブロックを動画を表示したい場所にドラッグします。

SeedProd Facebook埋め込みブロック

ブロックをクリックして設定を開きます。「動画リンク」フィールドにFacebook動画のURLを貼り付けると、ライブプレビューがすぐに表示されます。

より良い視聴体験のために、自動再生、フルスクリーン、キャプションなどのオプションを有効にできます。

Facebook動画埋め込み設定

このブロックは、単一の動画、ライブストリーム、動画プレイリストなど、あらゆる種類のFacebookコンテンツをサポートしているため、ページに合うものを埋め込むことができます。

ステップ 5. Facebook 動画ページを公開する

デザインに満足したら、SeedProd ビルダーのモバイルプレビューアイコンをクリックして、Facebook 動画ページがスマートフォンやタブレットで素晴らしく見えることを確認します。

SeedProd モバイルプレビュー

フォントサイズやスペーシングなどを調整する必要がある場合は、モバイルビューを個別に編集できます。これにより、埋め込まれた動画がすべてのデバイスでスムーズに読み込まれ、再生されることが保証されます。

モバイルプレビューページ設定

すべて準備ができたら、公開 をクリックします。

Facebook動画埋め込みでランディングページを公開

Facebook 動画ページが公開され、訪問者は WordPress サイトから直接動画を視聴、いいね、共有できるようになりました。

Facebook動画埋め込み最終ランディングページ
Facebook動画埋め込みWordPressランディングページの例

あなたも作成しませんか?

Facebook動画を、見た目が良いページにドロップしてください

SeedProdのドラッグ&ドロップビルダーを使用すると、動画を配置し、その周りのページをスタイル設定し、公開前にライブで動作を確認できます。コードは不要です。

ページを構築したい

動画フィードプラグインを使用して WordPress に Facebook 動画を埋め込む方法

複数のFacebook動画や完全な動画フィードをWordPressサイトに表示したい場合は、プラグインが最善の選択肢です。Smash Balloonの「カスタムFacebookフィードプロ」は、最新のFacebook動画、プレイリスト、ライブストリームを自動的に取得するため、最良の選択肢です。

このプラグインを使用すると、WordPressサイトのどこにでもFacebook動画を埋め込むことができ、Facebookに新しいコンテンツを投稿するたびにフィードが自動的に更新されます。これはWordPressエコシステムでよく知っているツールであり、詳細を知りたい場合は、私の完全な「Smash Balloonレビュー」を読むことができます。

Smash Balloon 最適ソーシャルメディアフィードプラグイン

ステップ1. カスタムFacebookフィードProプラグインのインストールと有効化

開始するには、Smash BalloonのカスタムFacebookフィードプロプラグインをインストールしてアクティブ化します。WordPressダッシュボードから「プラグイン » 新規追加」に移動し、プラグインのzipファイルをアップロードして、「今すぐインストール」、次に「有効化」をクリックします。

次に、Facebookフィード » 設定に移動し、Smash Balloonライセンスキーを入力します。キーはSmash Balloonアカウントエリアで見つけることができます。

WordPress設定でSmash Balloonライセンスキーを入力

ステップ2. FacebookアカウントをWordPressに接続する

次に、プラグインが動画を取得できるようにFacebookアカウントを接続する必要があります。WordPressダッシュボードからFacebookフィード » すべてのフィードに移動し、新規追加をクリックします。

Smash Balloonで新しいFacebookフィードを追加

次の画面で、動画フィードタイプを選択し、次へをクリックします。次に、Facebookページまたはグループのどちらを接続したいかを選択します。

Smash Balloonで動画フィードタイプを選択

新規追加をクリックし、Facebookアカウントにログインして、要求された権限を付与します。これにより、プラグインはWordPressサイトに埋め込むための動画、プレイリスト、ライブストリームにアクセスできるようになります。

動画フィードのFacebookページソースを選択

ステップ3. Facebook動画フィードのレイアウトを作成する

Facebookアカウントが接続されると、Smash Balloonから動画フィードのレイアウトを設定するように求められます。まず、リンクしたばかりのFacebookページまたはグループを選択し、次へをクリックします。

Facebook動画フィードのテーマを選択

次に、フィードテーマとレイアウトスタイルを選択します。グリッド、カルーセル、マソンリー、または全幅動画フィードから選択できます。各オプションは完全にレスポンシブであり、任意のWordPressテーマで動作します。

Smash Balloonで全動画またはプレイリストを表示するか選択

特定のプレイリストから動画を表示したい場合は、続行する前にプレイリストのURLを貼り付けることができます。それ以外の場合は、フィードに選択したFacebookページまたはグループのすべての動画が含まれます。

ステップ4. Facebook動画をカスタマイズする

フィードレイアウトが設定されたら、サイトでのFacebook動画の外観をカスタマイズできます。フィードの横にある鉛筆アイコンをクリックして、Smash Balloonフィードエディターを開きます。

Smash BalloonでFacebook動画フィードを編集

左側のパネルで、テンプレート、テーマ、配色、レイアウトの間隔を調整できます。その下では、ブランドに合わせてヘッダー、投稿の詳細、いいねボックス、ライトボックス設定などの要素を微調整できます。

Facebook動画フィードのカスタマイズオプション

変更はプレビューに即座に反映されるため、サイトに完全に一致するまでフィードを微調整できます。満足したら、保存をクリックして設定を保持します。

Smash BalloonでFacebook動画ライトボックスなどの設定を調整

ステップ5. WordPressにFacebook動画を埋め込む

フィードの準備ができたら、WordPressサイトのどこにでも埋め込むことができます。Smash Balloonフィードエディターで、右上隅にある埋め込みボタンをクリックします。

Facebook動画をWordPressに追加するには、埋め込みボタンをクリックしてください

3つのオプションが表示されます。ページに追加、ウィジェットエリアに追加、またはショートコードを使用します。サイトに最適な方法を選択してください。

Facebook動画フィードの埋め込み方法を選択してください

フィードをページに埋め込むことを選択した場合は、リストからページを選択して「追加」をクリックできます。次に、WordPressブロックエディターを開き、カスタムFacebookフィードブロックを追加して、フィードをプレビューします。

FacebookフィードをWordPressページに追加する

サイドバーやフッターにフィードを追加することもできます。「外観 » ウィジェット」に移動し、カスタムFacebookフィードブロックをウィジェットエリアに追加して、「保存」をクリックします。

WordPressサイドバーウィジェットにFacebook動画を埋め込む

Facebookの動画フィードが公開されました。訪問者はWordPressサイトから直接動画を視聴、いいね、共有できます。

WordPressにFacebook動画を手動で埋め込む方法(プラグイン不要)

WordPressで単一のFacebook動画のみを埋め込む必要がある場合は、Facebookに組み込まれているiframe埋め込みコードを使用できます。この方法ではプラグインは必要ありませんが、カスタマイズオプションは少なく、新しい動画を公開しても更新されません。

注意点として、生のFacebook iframeは固定幅であり、自動的にレスポンシブではありません。モバイルレイアウトが重要な場合は、レスポンシブコンテナで囲むか、上記のSeedProdまたはプラグインの方法を使用してください。

ブログ記事やページで、一度きりの動画に最適です。同じ貼り付け方法は、標準動画だけでなく、Facebookリールにも機能します。

ステップ1. Facebook動画の埋め込みコードを取得する

まず、埋め込みたいFacebook動画を開きます。動画の下にある共有ボタンをクリックし、メニューから埋め込みオプションを選択します。

共有をクリックし、埋め込みを選択してFacebook動画の埋め込みコードを取得する

Facebookがiframeコードを生成します。コードを取得をクリックしてクリップボードにコピーします。これは、次のステップでWordPressの投稿またはページに貼り付けるコードです。

Facebook動画のiframe埋め込みコードをコピーする

ステップ2. WordPressに埋め込みコードを貼り付ける

次に、Facebook動画を表示したいWordPressの投稿またはページを開きます。ブロックエディターで、動画を配置したい場所にカスタムHTMLブロックを追加します。

WordPressエディタにカスタムHTMLブロックを追加する

Facebookからコピーしたiframe埋め込みコードをHTMLブロックに貼り付けます。次に、プレビュータブをクリックして、動画がどのように表示されるかを確認します。

WordPressで埋め込まれたFacebook動画をプレビューする

表示に満足したら、公開または更新をクリックして、動画をサイトで公開します。

手動で埋め込まれたFacebook動画を含むWordPressページを公開する

ネイティブWordPress埋め込みブロックでFacebook動画を埋め込む方法(無料)

最も安価な方法は、WordPressに既に組み込まれている無料の埋め込みブロックです。プラグインもコードも不要です。投稿やページに動画を1つだけ追加したい場合は、まずこれを試す価値があります。

ブロックエディターで埋め込みブロックを追加し、公開されているFacebook動画のURLを1行に貼り付けてEnterキーを押します。WordPressは、そのリンクを自動的にプレーヤーに変換しようとします。

WordPressの埋め込みURLブロックを使用して投稿にFacebook動画を埋め込む

正直なところ、1つだけ注意点があります。WordPressはFacebook oEmbedを確実にホワイトリストに登録していないため、自動埋め込みが正しく表示されないことがよくあります。その場合は、上記の手動の方法によるカスタムHTML iframeがフォールバックとなります。

これがフィードプラグインとの本当の違いです。ネイティブブロックは一度に1つのリンクを処理し、スタイリングの制御はありませんが、Smash Balloonのようなプラグインは、自己更新されるデザインされたフィードを構築します。単一の埋め込みにより多くの制御が必要な場合は、WordPressに動画を埋め込む方法ガイドで、より広範なブロックオプションについても説明しています。

WordPressにFacebook動画を埋め込むことに関するFAQ

URLを貼り付けるだけでWordPressにFacebook動画を埋め込めますか?

時々。WordPressにはネイティブの埋め込みブロックがあるため、公開されているFacebook動画のURLを1行に貼り付けると、自動的にプレーヤーに変換される場合があります。ただし、Facebook oEmbedは確実にホワイトリストに登録されていないため、リンクがプレーンテキストのままの場合は、代わりにカスタムHTML iframeメソッドを使用してください。

埋め込みコードを貼り付けたのにFacebook動画が表示されないのはなぜですか?

最も一般的な原因はプライバシーです。動画とそれが属するページの両方が公開されている必要があります。ログイン中に表示されていても、訪問者には表示されません。

最も簡単なテストは、Facebookからログアウトした状態でプライベートウィンドウでページを開くことです。そこで動画が空白の場合は、公開設定にしてから再試行してください。また、エンゲージメントが直帰率を下げる可能性があるのはこのためです。実際に再生される動画は、人々をページに留めるからです。

WordPressにFacebookリールを埋め込むにはどうすればよいですか?

Facebookリールは、標準の動画と同じ方法で埋め込めます。リールのURLをSeedProd Facebook Video Embedブロックに貼り付けるか、リールの共有メニューからiframeコードを取得してカスタムHTMLブロックにドロップします。埋め込みを機能させるには、リールが公開されている必要があります。

Facebook動画を今日から埋め込みましょう

Facebookで好評だった動画を、レイアウトを壊したりページを遅くしたりすることなく、自分のサイトに掲載できるようになりました。無料のネイティブブロック、SeedProd、フィードプラグイン、または手動のiframeのいずれであっても、最適な方法を選択してください。

その他、役立つ可能性のあるチュートリアルはこちらです。

お読みいただきありがとうございます!ご意見をお聞かせいただければ幸いですので、ビジネスを成長させるための役立つアドバイスやコンテンツについては、お気軽にYouTubeXFacebookで会話にご参加ください。

著者アバター
ステイシー・コリン コンテンツマーケティングスペシャリスト
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]
ChatGPTまたはClaudeとチャットして、このWordPressサイトを運営しましょう。無料プラグインです。 無料で試す