Facebookフィードをウェブサイトに埋め込む方法

ウェブサイトやブログなどにFacebookのフィードを埋め込みたいけれど、どのような方法がいいのかわからないという方も多いのではないでしょうか?ご心配なく。私たちが、わからないところから埋め込むところまでお教えします。 ノータイムで.

その前に、ご存知でしたか?2021年12月現在、Facebookの報告では 19億人のデイリーアクティブユーザー  および 月間アクティブユーザー数28.9億人.因みに、これは世界の人口37%にあたります。

驚きました。これは、Facebookページをウェブサイトを含む他のフロントメディアとリンクさせる大きな理由でもあります。投稿への「いいね!」や写真のシェア、ページへの「いいね!」や1対1のメッセージなど、Facebookはマーケティングやエンゲージメントの重要なツールとして機能します。

Facebookについて、Facebookのフィードをウェブサイトに埋め込む方法について

スクリーンショット via Facebook.com

そこで、Facebookページのフィードをサイトに埋め込む方法が気になっている方も多いのではないでしょうか。

ここから先は、2つの[シンプル]な方法があります。深刻な技術的スキルは必要ありません!(私たちは、頭文字をとったAPIを一度も展開しないことを約束します)

ここでは、その内容をご紹介します。

方法1:Facebookページプラグインを使用する

方法2:ShareThis Social Feed Plugin for WordPress, Shopify & More を使用する。

Facebookイベントをウェブサイトに埋め込む方法

Facebookのライブストリームをウェブサイトに埋め込む方法

埋め込むだけではなく、共有する

方法1:Facebookページプラグインを使用する

Facebookページを埋め込むプラグインのオプション

Facebookでは、ページのフィードを表示するために、いくつかのカスタマイズが組み込まれています。

Facebookは独自の ページプラグイン は、いくつかのカスタマイズオプションを使って、あなたのウェブサイトにFacebookのフィードを埋め込むことができます。導入はかなり簡単です。

  1. Page Pluginのページをご覧ください。
  2. 希望するFacebookページのURLをコピーして貼り付け ます(ヒント:リンクされたプロフィールアカウントから表示している場合は、すでに表示されている可能性があります)。
  3. タブ、幅、高さなどの設定を選択します
  4. チェックボックス を選択すると、「Use Small」となります。 ヘッダー,''Hide カバー写真に適応します。 プラグイン コンテナの幅」、「友達の顔を表示」の3つです。(欲しくないオプションにはチェックが入っていないことを確認してください)。)
  5. クリック コードを取得します。 を選択することができます。 JavaScript または iFrame;
  6. このコードをコピーして 、ブログ記事やサイドバーなど、あなたのウェブサイトのどこかに貼り付け てください。

そして...終わった?いや、そうでもないよ。

ステップ3までを振り返って、その設定について少しお話しましょう。Facebookでは、埋め込みフィードの表示方法をかなり自由に設定することができます。例えば、あるコードではタイムラインを表示し 、別のコードでは今後のイベントを紹介し たり、Facebookメッセージを有効にし たりすることができます。例えば、あるコードでタイムラインを表示し、別のコードで今後のイベントを表示したり、別のコードでFacebookメッセージを表示したりすることができます。

カバー写真を非表示にしたり、誇らしげに表示したりすることができます。あなたのページに 「いいね!」を押している友達がいるかどうか を表示したり、カスタムCTAを点滅させることもできます。表示言語を変更し たり、アダプティブ幅の ディスプレイを有効にしたりして、あらゆる種類のウェブサイトの訪問者にアピールすることができます。コードを取得」をクリックする前に、さまざまなオプションをご覧ください。

方法1:ウェブサイトにシンプルなページフィード表示 が必要で、面倒なことはしたくなく、3つの基本的なオプション(タイムラインコメントメッセージ機能の表示)に満足している場合は、Facebookが支援するこの無料オプションを利用してください。

方法2:ShareThis Social Feed Plugin for WordPress, Shopify & More を使用する。

ShareThis FBのフィードをサイトに埋め込むソーシャルフィード

Facebookのネイティブコードには、かなりの数のオプションが用意されていますが、機能は限られています。では、Facebook Page Pluginがニーズに合わない場合、ソーシャルサイトはどうすればいいのでしょうか?

カスタマイズ性の高い サードパーティ製プラグインの世界へで、さらにシンプルな操作性を実現しています。を搭載しています。 ShareThis ソーシャルフィードができます。 埋め込み だけでなく、あなたの Facebookページのフィード が、複数の投稿をストリームすることができます。 ソーシャルメディア のネットワークを、あなたのブログやウェブサイト上で利用することができます。もちろん、あなたが自分の Facebookの投稿 と表示されれば、それも可能です。 

設定は簡単です。 

  1. コネクト あなたの Facebookアカウント
  2. カスタマイズデザイン のフィードをブランドに合わせて作成します。 
  3. 固有のShareThis コードを挿入 をあなたのウェブサイトの ヘッダー のセクションをご覧ください。 
  4. 配置コードのコピー をクリックして、フィードを表示させたい場所に貼り付けてください。 

とてもシンプルですね。さらに、ShareThis ソーシャルフィードは無料でご利用いただけます(ただし、より多くの投稿をフィードに表示したい場合や、複数のメーカーの投稿を掲載したい場合は、有料のプランもあります)。 ソーシャルメディア ネットワーク)があります。)がたくさんあります。 カスタマイズ 画像の自動トリミングや、スクエアグリッド、コラージュ、スライダーなどの柔軟なレイアウト、さらには画像のキャプションや「いいね!」を表示するホバーエフェクトなどのオプションが用意されています。 サイト訪問者 フィードの記事にカーソルを合わせると、その記事が表示されます。 

<strong style="font-size: inherit;"><span style="font-weight: 400;">The ShareThis Social Feed integrates seamlessly with any website platform, so whether you’re using Shopify, </span><span style="font-weight: 400;">WordPress</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">Squarespace</span><span style="font-weight: 400;">, </span><span style="font-weight: 400;">Wix</span><span style="font-weight: 400;">, Blogger, or another platform, you can have your social feed up and running in minutes.</span></strong>

<strong style="font-size: inherit;">When to use method 2</strong>:もし、あなたが <strong style="font-size: inherit;">need more customization than the Facebook plugin (method 1) allows</strong>そのためには、ちょっとした技術が必要になります。ちょっとした作業(と多少の資金)を行えば、どこにでも表示できる美しい埋め込み型のFacebookフィードを作成することができます。

Facebookイベントをウェブサイトに埋め込む方法

Facebookのイベントフィードをあなたのウェブサイトに埋め込みたいですか?を使うことができます。 Facebookページプラグイン を、いくつかの簡単なステップで行うことができます。 

  1. ページプラグインを見る と入力し、もしまだ入力されていなければ、あなたのFacebookページのURLをコピーしてボックスに貼り付けます。 
  2. フォームの「タブ」セクションでは、「timeline」がすでに事前に入力されているかもしれません。その場合は、それを削除して、フォームのフィールドに「events」と入力してください。フォームフィールドが空の場合は、単純に フィールドに「Events」と入力してください。
  3. それから。 Get Code」をクリックし、生成されたコードをあなたのウェブサイトに貼り付けます。 (JavaScriptまたはiFrameを使用)を、ブログ記事やウェブサイトのサイドバーなど、Facebookイベントフィードを表示したい場所に設置してください。  

Facebookのライブストリームをウェブサイトに埋め込む方法

Facebookライブストリームの視聴者数を増やしたいですか?朗報です!Facebookライブストリームをあなたのウェブサイトにも埋め込むことができます。Facebookライブ動画をウェブサイトに埋め込むには、以下の手順に従ってください。 

  1. をご覧ください。 Facebookページ用プラグイン - 埋め込みビデオとライブビデオプレーヤー
  2. Facebookライブ動画のURLをコピー を使って、自分のサイトに埋め込むことができます。これは、Facebookライブ動画投稿の右上にある3つのドットのアイコンをクリックして、「Copy link」をクリックすることで可能です。また、ライブストリーム投稿の下の右下エリアにある「共有」をクリックし、そこから「リンクをコピー」をクリックすることもできます。 
  3. リンクの貼り付け を使って、Facebook Liveの動画をFacebookの コードコンフィギュレーター.
  4. ライブストリームの動画と一緒に記事の全文を表示したい場合。 Include full post "というボックスにチェックを入れます。 コードコンフィギュレーターで動画のURLを下に書きます。 
  5. Get Code」をクリックします。 をクリックすると、動画の埋め込みコードが生成されます。 
  6. 生成されたコードをコピー&ペーストする をWebサイトのHTMLの中で、Facebook Liveの動画を埋め込みたい場所に挿入します。  

埋め込んだFacebookライブストリームの幅を変更したい場合は、data-width属性を使って、好みの幅にサイズを調整することができます。 

他のFacebook動画をウェブサイトに埋め込みたい場合も、同じ方法を使うことができます。この方法は、Facebookライブストリームだけでなく、すべてのFacebook動画に使えます。 

埋め込むだけでなく、共有する

シェアボタン

に加えて 埋め込み あなたの Facebookのフィード あなたのウェブサイトでは、あなたも 埋め込むシェアフォローとしています。 リアクションボタン - 低レベルのエンゲージメントは インタラクションを誘う とエンゲージメントが得られます。

ここでの目標は ソーシャルシェアを誘う および/または Facebookページに人を呼び込む Facebookページのあるところでは より多くの人を巻き込む - 記事をスクロールして、気に入ったものに「いいね!」を押すなどして- そして、最終的には あなたのページに「いいね および Facebookのフォロワーを見る を増やすことで、より多くの人があなたの更新を今から永遠に見ることができるようになります。

Facebookのプレゼンスを最大化する方法については、当社の一連のガイドで学ぶことができます。 Facebookページで投稿をピン留めする方法.

このような戦略をお持ちの方は、是非、当社の Facebook シェアボタンFacebookフォローボタンとしています。 Facebookリアクションボタン Like、Love、Wowなど) -プラスその他 出版社ツール ユーザーの満足度を高めるためだけではなく、あなたのために設計されています。 ページの「いいね!」や投稿の「シェア」などのエンゲージメントが最も多い。 が重要になってくる。

シンプルな方法を探しているときは 埋め込み a Facebookのフィード に比べてはるかにシンプルなものです。 ShareThis ソーシャルフィード.どのような画面でも驚くほど美しく見えるように作られていて、大量の カスタマイズ オプションを使えば、自社のブランドにぴったり合ったデザインにすることができます。どのようなウェブサイトのプラットフォームともシームレスに統合できるので、数分でフィードを立ち上げて、今すぐにでも視聴者を増やすことができます。 

についてShareThis

ShareThis は、2007年以来、ソーシャルシェア、インタレスト、インテントのデータを統合することで、グローバルなデジタル行動の力を引き出してきました。300万以上のグローバルドメインにおける消費者の行動をもとに、ShareThis は、実際のデジタルデスティネーションにおける実際の人々の行動をリアルタイムに観察しています。

ニュースレターを購読する

最新のニュース、ヒント、アップデートを入手する

登録

関連コンテンツ