Facebookの状態は、重要な更新や一刻を争う情報をオーディエンスに共有する簡単な方法です。
WPBeginnerでは、ソーシャルメディア・プラットフォームの重要性を理解しており、コンテンツを宣伝し、最新ニュースを共有し、より多くの訪問者を引き付けるために、ソーシャルメディア・プラットフォームを使用しています。
WordPressにFacebookのタイムラインを埋め込むことで、さらに多くのエンゲージメントを獲得し、Facebookページやグループの近況を知らせ、より多くのフォロワーを獲得できることがわかりました。
この投稿では、WordPressにFacebookのステータス投稿を簡単に埋め込む方法を紹介します。
なぜ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ページやグループからテキストやリンクを表示することができます。
新しいステータスを投稿すると、自動的にサイトに表示されます。これは、あなたのサイトを常に新鮮で面白く保つのに最適です。
このガイドでは、Smash Balloonの無料版を使用します。予算に関係なくFacebookの状態を埋め込むことができるからです。
注:さまざまな種類のコンテンツを埋め込むことができるプレミアムSmash Balloon Facebook Feedプラグインもあります。例えば、WordPressにFacebookの動画を埋め込み、サイト上のライトボックスポップアップに画像や動画を表示することができます。
まず最初にSmash Balloon Social Post Feedプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法についての初心者ガイドをご覧ください。
その後、Smash BalloonをあなたのFacebookページまたはグループに接続する必要があります。ここで、「新規追加」をクリックします。
Smash Balloon Proでは、WordPressにFacebookのアルバムを埋め込んだり、Facebookカレンダーを追加したり、ソーシャルメディアのタイムラインをすべて表示したりすることができます。
ただし、無料版ではFacebookの状態を埋め込むことしかできないので、「タイムライン」をクリックし、「次へ」を選択する。
ここで、Facebookの状態を取得するページまたはグループを選択します。
まずは「新規追加」をクリック。
次の画面で、FacebookグループまたはFacebookページのフィードを埋め込むかどうかを選択します。
その後、「Facebookに接続」をクリックする。
Facebookアカウントにログインし、状態更新を取得したいページやグループを選択するポップアップが開きます。
そうしたらすぐに『次へ』をクリックする。
Facebookは、Smash Balloonがアクセスできるすべての情報と、Smash Balloonが実行できるアクションを表示する。
Smash BalloonのFacebookアカウントへのアクセスを制限するには、いずれかのスイッチをクリックして「はい」から「いいえ」にします。ただし、WordPressブログやサイトに埋め込むコンテンツに影響が出る場合がありますので、ご注意ください。
そう考えると、すべてのスイッチを有効化したままにしておくのがいいだろう。
Facebookの権限設定に満足したら、「完了」をクリックする。
しばらくすると、WordPressサイトをFacebookに接続したことを確認するメッセージが表示されます。完了したら、「OK」ボタンをクリックしてください。
Smash Balloonは自動的にWordPressダッシュボードに戻ります。
WordPressにFacebookの状態投稿を埋め込む方法
追加したFacebookグループまたはページのポップアップが表示されます。
使いたいソーシャルメディアアカウントの横にあるラジオボタンを選択し、「追加」をクリックするだけです。
誤ってポップアップを閉じてしまっても心配はいりません。タブを更新するだけでポップアップを再度開くことができます。
その後、Smash Balloonは自動的にFacebookのフィード ” すべてのフィードのページに戻ります。先ほどと同じように、「新規追加」ボタンをクリックして、「タイムライン」を選択し、「次へ」ボタンをクリックします。
ここで、あなたのFacebookページまたはグループを選択し、「次へ」をクリックする。
Smash Balloonは、選択したFacebookページまたはグループからソーシャルメディアフィードを作成します。
これは良いスタートですが、Smash Balloonには埋め込みタイムラインをカスタマイズするための設定がたくさんあります。
Facebookの埋め込みステータス投稿をカスタマイズする方法
タイムラインを微調整するには、WordPressダッシュボードのFacebook Feed ” All Feedsページにアクセスしてください。
ここで、先ほど作成したタイムラインフィードを見つけて、その横にある「編集」ボタンをクリックします。
Smash Balloonフィードエディターが開き、WordPressにFacebookのタイムラインのプレビューが表示されます。
左側には、Timelineをあなたのサイトでどのように見せるかカスタマイズする為の設定がすべて表示されています。これらの設定のほとんどは説明不要ですが、主なエリアをすべて簡単に説明します。
手始めに、「フィードレイアウト」をクリックすることで、ステータスの表示方法を変更することができる。
この画面では、リストレイアウトとメイソンリーレイアウトを切り替えたり、フィードの高さを変更することができます。変更を加えると、プレビューが自動的に更新されるので、様々な設定を試して、あなたのサイトに最適な設定を確認することができます。
デスクトップコンピューター、タブレット、スマートフォンでは、右上のボタンでフィードの状態をプレビューできます。
モバイル端末は通常画面が小さく、処理能力も低いため、フィードの見栄えに満足できない場合は、タブレットやスマートフォンではステータスの表示を少なくするのが賢明だ。
この変更を行うには、「投稿数」セクションの「モバイル」フィールドに別の数字を入力するだけです。
さまざまなレイアウトを試すことで、すべての端末で見栄えのするFacebook状態フィードを作成できます。
初期設定では、Smash Balloonフィードは、スマートフォンやタブレットでは、デスクトップコンピューターよりも少ないカラムで表示されます。これにより、あなたのFacebookの状態が小さな画面でも快適に表示されます。
WordPressサイトのモバイル版をテストした結果、スマートフォンやタブレットではカラムを少なく表示した方がいいかもしれません。
これを行うには、「カラム」の数字を変更するだけです。
フィードの見た目に満足したら、「カスタマイズ」リンクをクリックします。
これでSmash Balloonエディターのメイン画面に戻り、次の設定画面である「配色」を探せるようになります。
初期設定では、Smash BalloonはWordPressテーマから引き継いだ配色を使用しますが、「ライト」または「ダーク」に切り替えることもできます。
また、「カスタム」を選択し、WordPressの文字色を変更したり、背景色を変更するなどのコントロールを使って、独自の配色を作成することもできます。
初期設定では、Smash Balloonはフィードにヘッダーを追加します。ヘッダーには、あなたのFacebookのプロフィール写真とグループ名またはページ名が表示されます。
このセクションをカスタマイズするには、左側のメニューから「ヘッダー」をクリックします。
ここでは、ヘッダーサイズの変更、Facebookのプロフィール写真の非表示、背景色の変更などができます。
ヘッダーを完全に削除したい場合は、「有効化」トグルをクリックしてオフにします。
次に、左側のメニューから「投稿スタイル」を選択することで、フィード内の個々の投稿の見栄えを変更することができます。
その後、再度「投稿スタイル」をクリックし、カスタマイズ設定を開きます。
この画面では、レギュラーレイアウトとボックスレイアウトを選ぶことができる。
Boxed “を選択した場合、各Facebook投稿に色付きの背景を作成することができます。また、ボックスシャドウを追加したり、枠線の半径を変更することもできます。
レギュラー」を選択した場合、ソーシャルメディア投稿を区切る線の太さと色を変更することができます。
以下の画像では、Facebookの状態フィードに太い線を追加している。
また、メイン設定画面に戻れば、各状態の各パーツをカスタマイズすることもできる。
もう一度、「投稿スタイル」を選択しますが、今度は代わりに「個別要素の編集」を選択します。
投稿日、投稿者、イベントタイトルなど、Smash Balloonが各投稿に含めるさまざまなコンテンツがすべて一覧表示されます。
フィードからコンテンツを削除するには、クリックしてそのボックスのチェックを外すだけです。
また、各コンテンツをクリックすることで、各コンテンツの見え方を設定することもできる。
例えば、以下の画像では、投稿者のテキストのサイズと色を変更する設定が見られます。
初期設定では、Smash BalloonのフィードにFacebookの「いいね!」ボタンは表示されません。
このボタンは、訪問者がFacebookであなたをフォローしやすくするので、「いいね!ボックス」設定を選択して、あなたの状態フィードに追加するとよいでしょう。
その後、『有効化』ボタンを青くなるようにクリックするだけです。
設定を使って、リンクボックスの外観や、ボックス内に含まれるコンテンツの種類(Facebookのカバー写真やフォロワーの総数など)を変更できるようになりました。また、カスタムの行動喚起を追加することもできます。
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を使用する必要があります。
WordPressのページや投稿にFacebookステータスを埋め込みたい場合は、コンテンツエディターの「カスタムFacebookフィード」ブロックを使用することをお勧めします。
ステータスフィードを埋め込みたいページや投稿を開くだけです。次に、「+」アイコンをクリックして新規ブロックを追加し、「カスタムFacebookフィード」と入力し始める。
適切なブロックが表示されたら、クリックして投稿またはページに追加します。
初期設定では、Smash Balloonのフィードがブロックに表示されます。別のフィードを使用したい場合は、右側のメニューにある「ショートコードの設定」をクリックしてください。
このボックスに
1のコードを追加します。その後、「変更を適用」をクリックしてください。custom-facebook-feed feed=
このブロックには、あなたのFacebookページやグループの状態更新がすべて表示されます。フィードをライブにするには、ページを公開するか更新するだけです。
もう一つのオプションは、サイドバーなどのウィジェット対応エリアにフィードを追加することです。これにより、訪問者はサイト全体であなたのFacebookの最新更新を見ることができます。
WordPressダッシュボードの外観 ” ウィジェットに移動し、青い「+」ボタンをクリックするだけです。
検索バーに「Custom Facebook Feed」と入力して、適切なウィジェットを見つけよう。
Facebookの状態更新を表示したいエリアにドラッグしてください。初期設定では、Smash Balloonで作成したフィードが表示されます。
代わりに別のフィードを表示するには、「ショートコード設定」ボックスにフィードのコードをタイプし、「変更を適用」をクリックします。
更新」ボタンをクリックして、ウィジェットをライブにすることができます。
詳しくは、ウィジェットの追加と使用方法のステップバイステップガイドをご覧ください。
最後に、ショートコードを使用して、あなたのステータスを任意のページ、投稿日、またはウィジェット対応エリアに埋め込むことができます。ショートコードを取得するには、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を簡単に埋め込むことができる。
投稿やページ、ウィジェット対応エリアに実際のツイートを埋め込みたい場合は、無料のSmash Balloon Custom Twitter Feedsプラグインをご利用ください。
このプラグインを使えば、様々なTwitterハッシュタグ、アカウント、タイムラインを表示するカスタムフィードを作成することができます。
この投稿が、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.
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.
管理者
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
Traviis
Are there any benefits (SEO, etc.) to embedding a Facebook or Twitter timeline manually vs using a plugin?
WPBeginner Support
No.
管理者
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
Sheila
One hour later and can’t get posts to embed – so annoying
Tanay Talesra
I am not able to embed photos. Tried both these methods.
Lindsay
will this plugin let you embed photos or events? I am only able to embed posts.
Sean
I just wish Facebook didn’t force their horrible styling on everything
Nicholas
Already Jetpack v.2.5 has Facebook embedding check it out here http://jetpack.me/2013/09/19/jetpack-2-5/ This is far more easier to use if you love Jetpack!
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
Gabriella Karvak
U got answer to this? I need it to :))