Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressにFacebookの状態投稿を埋め込む方法

Facebookの状態は、重要な更新や一刻を争う情報をオーディエンスに共有する簡単な方法です。

WPBeginnerでは、ソーシャルメディア・プラットフォームの重要性を理解しており、コンテンツを宣伝し、最新ニュースを共有し、より多くの訪問者を引き付けるために、ソーシャルメディア・プラットフォームを使用しています。

WordPressにFacebookのタイムラインを埋め込むことで、さらに多くのエンゲージメントを獲得し、Facebookページやグループの近況を知らせ、より多くのフォロワーを獲得できることがわかりました。

この投稿では、WordPressにFacebookのステータス投稿を簡単に埋め込む方法を紹介します。

How to embed Facebook status posts in WordPress

なぜWordPressにFacebookの状態を埋め込むのか?

マーケティングリサーチの統計によると、Facebookは世界で最も人気のあるソーシャルメディアプラットフォームであり、29億人の月間アクティブユーザーを抱えています。そのため、Facebookは新しいオーディエンスとつながり、すでにあなたのブランドを知っている人々とエンゲージするのに最適な場所となっています。

Facebookは、一刻を争う情報をリアルタイムで共有するのにも最適だ。このように、FOMOを利用して切迫感を演出することができる。

例えば、訪問者がWordPressでプレゼントに応募したり、フラッシュセールを利用するのに時間がないというステータスを投稿するかもしれません。

しかし、WordPressサイトにアクセスしただけでは、あなたのFacebookの状態を見ることはできません。WordPressにFacebookのステータス投稿を埋め込むことで、あなたのソーシャルメディアページを宣伝し、より多くの人にFacebookをフォローしてもらうことができます。

ということで、WordPressにFacebookのステータス投稿を埋め込む方法を見てみよう。

WordPressにFacebook状態プラグインを追加する

WordPressにFacebookステータスのフィードを埋め込む最も簡単な方法は、無料のSmash Balloon Social Post Feedを使用することです。

このプラグインを使うと、Facebookページやグループからテキストやリンクを表示することができます。

A Facebook post timeline, embedded on a WordPress website.

新しいステータスを投稿すると、自動的にサイトに表示されます。これは、あなたのサイトを常に新鮮で面白く保つのに最適です。

このガイドでは、Smash Balloonの無料版を使用します。予算に関係なくFacebookの状態を埋め込むことができるからです。

注:さまざまな種類のコンテンツを埋め込むことができるプレミアムSmash Balloon Facebook Feedプラグインもあります。例えば、WordPressにFacebookの動画を埋め込み、サイト上のライトボックスポップアップに画像や動画を表示することができます。

まず最初にSmash Balloon Social Post Feedプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。

その後、Smash BalloonをあなたのFacebookページまたはグループに接続する必要があります。ここで、「新規追加」をクリックします。

How to create a custom Facebook feed

Smash Balloon Proでは、WordPressにFacebookのアルバムを埋め込んだり、Facebookカレンダーを追加したり、ソーシャルメディアのタイムラインをすべて表示したりすることができます。

ただし、無料版ではFacebookの状態を埋め込むことしかできないので、「タイムライン」をクリックし、「次へ」を選択する。

The free Smash Balloon WordPress plugin

ここで、Facebookの状態を取得するページまたはグループを選択します。

まずは「新規追加」をクリック。

Adding a Facebook page or group to your WordPress website

次の画面で、FacebookグループまたはFacebookページのフィードを埋め込むかどうかを選択します。

その後、「Facebookに接続」をクリックする。

How to connect a Facebook page or group to a WordPress website

Facebookアカウントにログインし、状態更新を取得したいページやグループを選択するポップアップが開きます。

そうしたらすぐに『次へ』をクリックする。

Giving Smash Balloon access to your Facebook posts

Facebookは、Smash Balloonがアクセスできるすべての情報と、Smash Balloonが実行できるアクションを表示する。

Smash BalloonのFacebookアカウントへのアクセスを制限するには、いずれかのスイッチをクリックして「はい」から「いいえ」にします。ただし、WordPressブログやサイトに埋め込むコンテンツに影響が出る場合がありますので、ご注意ください。

そう考えると、すべてのスイッチを有効化したままにしておくのがいいだろう。

Connecting Facebook and WordPress using a free plugin

Facebookの権限設定に満足したら、「完了」をクリックする。

しばらくすると、WordPressサイトをFacebookに接続したことを確認するメッセージが表示されます。完了したら、「OK」ボタンをクリックしてください。

Connecting Smash Balloon and Facebook successfully

Smash Balloonは自動的にWordPressダッシュボードに戻ります。

WordPressにFacebookの状態投稿を埋め込む方法

追加したFacebookグループまたはページのポップアップが表示されます。

使いたいソーシャルメディアアカウントの横にあるラジオボタンを選択し、「追加」をクリックするだけです。

Selecting a page or group as your Facebook source

誤ってポップアップを閉じてしまっても心配はいりません。タブを更新するだけでポップアップを再度開くことができます。

その後、Smash Balloonは自動的にFacebookのフィード ” すべてのフィードのページに戻ります。先ほどと同じように、「新規追加」ボタンをクリックして、「タイムライン」を選択し、「次へ」ボタンをクリックします。

ここで、あなたのFacebookページまたはグループを選択し、「次へ」をクリックする。

Embedding Facebook status posts in WordPress

Smash Balloonは、選択したFacebookページまたはグループからソーシャルメディアフィードを作成します。

これは良いスタートですが、Smash Balloonには埋め込みタイムラインをカスタマイズするための設定がたくさんあります。

Facebookの埋め込みステータス投稿をカスタマイズする方法

タイムラインを微調整するには、WordPressダッシュボードのFacebook Feed ” All Feedsページにアクセスしてください。

ここで、先ほど作成したタイムラインフィードを見つけて、その横にある「編集」ボタンをクリックします。

Customizing the Facebook status timeline feed

Smash Balloonフィードエディターが開き、WordPressにFacebookのタイムラインのプレビューが表示されます。

左側には、Timelineをあなたのサイトでどのように見せるかカスタマイズする為の設定がすべて表示されています。これらの設定のほとんどは説明不要ですが、主なエリアをすべて簡単に説明します。

Customizing Facebook status posts in WordPress

手始めに、「フィードレイアウト」をクリックすることで、ステータスの表示方法を変更することができる。

この画面では、リストレイアウトとメイソンリーレイアウトを切り替えたり、フィードの高さを変更することができます。変更を加えると、プレビューが自動的に更新されるので、様々な設定を試して、あなたのサイトに最適な設定を確認することができます。

Smash Balloon's Feed Layout settings

デスクトップコンピューター、タブレット、スマートフォンでは、右上のボタンでフィードの状態をプレビューできます。

モバイル端末は通常画面が小さく、処理能力も低いため、フィードの見栄えに満足できない場合は、タブレットやスマートフォンではステータスの表示を少なくするのが賢明だ。

Testing your Facebook post status on mobile devices

この変更を行うには、「投稿数」セクションの「モバイル」フィールドに別の数字を入力するだけです。

さまざまなレイアウトを試すことで、すべての端末で見栄えのするFacebook状態フィードを作成できます。

How to create a responsive social media layout for mobile

初期設定では、Smash Balloonフィードは、スマートフォンやタブレットでは、デスクトップコンピューターよりも少ないカラムで表示されます。これにより、あなたのFacebookの状態が小さな画面でも快適に表示されます。

WordPressサイトのモバイル版をテストした結果、スマートフォンやタブレットではカラムを少なく表示した方がいいかもしれません。

これを行うには、「カラム」の数字を変更するだけです。

Adding and removing columns in a Facebook status feed

フィードの見た目に満足したら、「カスタマイズ」リンクをクリックします。

これでSmash Balloonエディターのメイン画面に戻り、次の設定画面である「配色」を探せるようになります。

Changing the color scheme in your Facebook status feed

初期設定では、Smash BalloonはWordPressテーマから引き継いだ配色を使用しますが、「ライト」または「ダーク」に切り替えることもできます。

また、「カスタム」を選択し、WordPressの文字色を変更したり、背景色を変更するなどのコントロールを使って、独自の配色を作成することもできます。

Creating a custom color scheme using Smash Balloon

初期設定では、Smash Balloonはフィードにヘッダーを追加します。ヘッダーには、あなたのFacebookのプロフィール写真とグループ名またはページ名が表示されます。

このセクションをカスタマイズするには、左側のメニューから「ヘッダー」をクリックします。

Changing the Facebook custom feed header

ここでは、ヘッダーサイズの変更、Facebookのプロフィール写真の非表示、背景色の変更などができます。

ヘッダーを完全に削除したい場合は、「有効化」トグルをクリックしてオフにします。

Adding a header to the Facebook status feed

次に、左側のメニューから「投稿スタイル」を選択することで、フィード内の個々の投稿の見栄えを変更することができます。

その後、再度「投稿スタイル」をクリックし、カスタマイズ設定を開きます。

Customizing a Facebook status feed with Smash Balloon

この画面では、レギュラーレイアウトとボックスレイアウトを選ぶことができる。

Boxed “を選択した場合、各Facebook投稿に色付きの背景を作成することができます。また、ボックスシャドウを追加したり、枠線の半径を変更することもできます。

Adding colored box backgrounds to your embedded Facebook post statuses

レギュラー」を選択した場合、ソーシャルメディア投稿を区切る線の太さと色を変更することができます。

以下の画像では、Facebookの状態フィードに太い線を追加している。

Adding borders to a Smash Balloon Facebook feed

また、メイン設定画面に戻れば、各状態の各パーツをカスタマイズすることもできる。

もう一度、「投稿スタイル」を選択しますが、今度は代わりに「個別要素の編集」を選択します。

Customizing the posts inside a Facebook status feed

投稿日、投稿者、イベントタイトルなど、Smash Balloonが各投稿に含めるさまざまなコンテンツがすべて一覧表示されます。

フィードからコンテンツを削除するには、クリックしてそのボックスのチェックを外すだけです。

How to remove content from a live Facebook feed

また、各コンテンツをクリックすることで、各コンテンツの見え方を設定することもできる。

例えば、以下の画像では、投稿者のテキストのサイズと色を変更する設定が見られます。

Customizing how the post author is displayed in WordPress

初期設定では、Smash BalloonのフィードにFacebookの「いいね!」ボタンは表示されません。

このボタンは、訪問者がFacebookであなたをフォローしやすくするので、「いいね!ボックス」設定を選択して、あなたの状態フィードに追加するとよいでしょう。

Adding a like button to the Facebook status feed

その後、『有効化』ボタンを青くなるようにクリックするだけです。

設定を使って、リンクボックスの外観や、ボックス内に含まれるコンテンツの種類(Facebookのカバー写真やフォロワーの総数など)を変更できるようになりました。また、カスタムの行動喚起を追加することもできます。

Adding a like button to an embedded Facebook status page

Smash Balloon Premiumにアップグレードすると、さらにさまざまな設定が可能になります。WordPressにFacebookの動画を埋め込むことができるライトボックス機能などがあります。また、「Load More」ボタンを追加することで、訪問者がFacebookのイベントカレンダー、アルバム、写真、その他のコンテンツ全体をスクロールできるようになります。

Smash Balloonの無料版を使用しているので、「保存」をクリックして変更を保存します。

次のステップは、WordPressサイトにFacebookの状態フィードを追加することです。

WordPressにFacebookの状態投稿を埋め込む方法

ブロック、ウィジェット、ショートコードを使用して、WordPressにFacebookの状態フィードを追加できます。

Smash Balloonを使って複数のフィードを作成した場合、ブロックやウィジェットを使ってフィードを追加する場合は、フィードの埋め込みコードを知っておく必要があります。

この情報を得るには、Facebook Feed “ All Feedsに 行き、’Shortcode’の下にあるテキストをコピーするだけです。

以下の画像では、custom-facebook-feed feed=1を使用する必要があります。

Adding Facebook statuses to WordPress using shortcode

WordPressのページや投稿にFacebookステータスを埋め込みたい場合は、コンテンツエディターの「カスタムFacebookフィード」ブロックを使用することをお勧めします。

ステータスフィードを埋め込みたいページや投稿を開くだけです。次に、「+」アイコンをクリックして新規ブロックを追加し、「カスタムFacebookフィード」と入力し始める。

適切なブロックが表示されたら、クリックして投稿またはページに追加します。

Adding a Facebook timeline to your website using a WordPress block

初期設定では、Smash Balloonのフィードがブロックに表示されます。別のフィードを使用したい場合は、右側のメニューにある「ショートコードの設定」をクリックしてください。

このボックスにcustom-facebook-feed feed=1のコードを追加します。その後、「変更を適用」をクリックしてください。

Adding a Facebook status to your website using shortcode

このブロックには、あなたのFacebookページやグループの状態更新がすべて表示されます。フィードをライブにするには、ページを公開するか更新するだけです。

もう一つのオプションは、サイドバーなどのウィジェット対応エリアにフィードを追加することです。これにより、訪問者はサイト全体であなたのFacebookの最新更新を見ることができます。

WordPressダッシュボードの外観 ” ウィジェットに移動し、青い「+」ボタンをクリックするだけです。

The Smash Balloon Custom Facebook Feed widget

検索バーに「Custom Facebook Feed」と入力して、適切なウィジェットを見つけよう。

Facebookの状態更新を表示したいエリアにドラッグしてください。初期設定では、Smash Balloonで作成したフィードが表示されます。

Adding a social media widget to your WordPress website

代わりに別のフィードを表示するには、「ショートコード設定」ボックスにフィードのコードをタイプし、「変更を適用」をクリックします。

更新」ボタンをクリックして、ウィジェットをライブにすることができます。

Adding a Facebook status update to WordPress using a widget

詳しくは、ウィジェットの追加と使用方法のステップバイステップガイドをご覧ください。

最後に、ショートコードを使用して、あなたのステータスを任意のページ、投稿日、またはウィジェット対応エリアに埋め込むことができます。ショートコードを取得するには、Facebook Feed “ All Feedsに行き、’Shortcode’カラムの値をコピーするだけです。

このコードをサイトに追加することができます。詳しくは、WordPressでショートコードを追加する方法の詳細ガイドをご覧ください。

おまけ:WordPressにツイートやInstagram投稿を埋め込む

WordPressにFacebookステータスの投稿を埋め込むなら、Smash Balloon Social Post Feedがおすすめです。

しかし、多くのサイトでは、YouTubeチャンネル、Twitterプロフィール、Instagramアカウントなど、複数のソーシャルメディアアカウントを持っています。各プラットフォーム用にユニークなコンテンツを作成するのであれば、WordPressサイトでこのコンテンツを表示することは理にかなっています。

Smash Balloon Social Photo Feedプラグイン(無料)を使えば、WordPressにInstagramを簡単に埋め込むことができる。

The Smash Balloon Instagram feed editor

投稿やページ、ウィジェット対応エリアに実際のツイートを埋め込みたい場合は、無料のSmash Balloon Custom Twitter Feedsプラグインをご利用ください。

このプラグインを使えば、様々なTwitterハッシュタグ、アカウント、タイムラインを表示するカスタムフィードを作成することができます。

A Twitter feed, embedded on a WordPress blog or page

この投稿が、WordPressにFacebookのステータス投稿を埋め込む方法を学ぶのにお役に立てば幸いです。また、Buffer を使って WordPress の投稿をソーシャルメディア用にスケジュールする方法や、ブログを成長させるのに最適な WordPress Facebook プラグインについてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

16件のコメント返信を残す

  1. Greg Shaw

    Hi, I know this an old post but I went to try the official Facebook plugin you referenced in this post and it says “This plugin was closed on April 5, 2018 and is no longer available for download. Reason: Licensing/Trademark Violation.”

    Do you know of a plugin that will still do this?

    • WPBeginner Support

      We do not have one we would recommend at the moment.

      管理者

  2. Afizan

    Hello Sir

    I would like to ask, is it possible to embed a facebook post complete with the comments. Not just the comment numbers.

    Thanks

  3. Traviis

    Are there any benefits (SEO, etc.) to embedding a Facebook or Twitter timeline manually vs using a plugin?

  4. Tom

    This is old information and needs updating, there are issues with this plugin as to whether Facebook recognise it.

    WARNING – Read WP support forum posts before considering download

  5. Sheila

    One hour later and can’t get posts to embed – so annoying

  6. Tanay Talesra

    I am not able to embed photos. Tried both these methods.

  7. Lindsay

    will this plugin let you embed photos or events? I am only able to embed posts.

  8. Sean

    I just wish Facebook didn’t force their horrible styling on everything

  9. Jim Davis

    Is there a way to automatically embed all of your Facebook timeline posts?

    • Mario H

      I’d really love to know that, too!
      A plugin, which automatically creates new blogposts that contain the embedded facebook post…

      • Bojan

        Yeah, this would be useful…

        • danstep

          Yeah, then the site owner wouldn’t have to go into wp and muck things up

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。