web-dev-qa-db-ja.com

Facebookページのフィードを自分のWebサイトに埋め込む方法

私はグループと協力して、チャリティーイベントを促進しています。埋め込みたいページは、自分のFacebookプロフィールではなく、誰かが作成したFacebookページです。

私のウェブページにそのニュースフィードを表示したいと思います。このページから情報/アクセスを取得する必要がある場合は、お知らせください。他の誰かが実用的な例を持っているなら、私に知らせてください。 jsfiddle.netを使用して作成しました。

ここにページがあります： http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

javascripthtmlfacebookfacebook-pagefacebook-feed
66
NickG

ああ、それは非常に簡単で、プログラミングは不要です。

参照： https://developers.facebook.com/docs/plugins/page-plugin

show streamオプションを有効にしておく必要があります。幅と高さなどを調整できます。

111
DMCS

プラグインではなくカスタムコードを探している場合は、これが役立つ場合があります。 Facebookグラフは進化してからいくつかの変更が加えられました。これらの手順は、最近試してみてうまく機能した最新のGraph API用です。

主な2つのステップがあります-1. Facebookアクセストークンの取得、2。アクセストークンを渡すGraph APIの呼び出し。

1。アクセストークンの取得-Facebookページのアクセストークンを取得するための手順を追って説明します。 - 私のWebサイトにFacebookページフィードを埋め込む 。このように、Facebook開発者ページでアプリを作成して、アプリIDとアプリシークレットを提供する必要があります。これら2つを使用して、アクセストークンを取得します。

2。 Graph APIの呼び出し-アクセストークンを取得すると、これは非常に簡単です。取得するすべてのフィールド/プロパティを使用してGraph APIのURLを作成し、このURLに対してGETリクエストを行うだけです。 asp.net MVCでそれを行う方法の一例を次に示します。 asp.net mvcを使用してFacebookフィードを埋め込む 。これは、HTTP GETリクエストにすぎないため、他のテクノロジーでもかなり似ているはずです。

FQLクエリのサンプル：https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

6
Pranay

新しい page-plugin では、Webサイトで複数のタブを実行できます。 Pageプラグインを使用すると、FacebookページをWebサイトに簡単に埋め込み、宣伝できます。 Facebookのように、訪問者はサイトを離れることなくページを好きに共有できます。

  1. JavaScript SDKをページに1回、理想的には開始<body>タグの直後に含めます。
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId={APP_ID}";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  1. プラグインをページに表示したい場所にプラグインのコードを配置します。
<div class="fb-page" 
     data-href="https://www.facebook.com/YourPageName" 
     data-tabs="timeline" 
     data-small-header="false" 
     data-adapt-container-width="true" 
     data-hide-cover="false" 
     data-show-facepile="true">
  <div class="fb-xfbml-parse-ignore">
    <blockquote cite="https://www.facebook.com/facebook">
      <a href="https://www.facebook.com/facebook">Facebook</a>
    </blockquote>
  </div>
</div>

次の設定も変更できます。

enter image description here

また、新しいページプラグインを使用して、タイムライン、イベント、およびメッセージのタブを使用できるようになりました。

  • [タイムライン]タブ：Facebookページのタイムラインの最新の投稿が表示されます。
  • [イベント]タブ：ページのイベントをフォローし、プラグインからイベントをサブスクライブできます。
  • メッセージタブ：人々はあなたのウェブサイトからあなたのページに直接メッセージを送ることができます。この機能を使用するには、ログインする必要があります。
<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YourPageName"
  data-width="380" 
  data-hide-cover="false">
</div>
3
Somnath Muluk

Like Box/Pageプラグインは基本的にiframeでいです：D

そこで、FanPageフィードを表示するために Famax plugin と呼ぶ独自の無料プラグインを作成しました。 Likeボックスに似ていますが、より良いUIを持ち、よりカスタマイズ可能です。

また、幅と高さが固定されたiframeに[いいね]ボックスが表示されるため、実際には反応しません。

2
Patrick

間違っている場合は修正してください。ただし、FacebookはActivity Feedプラグインを非推奨にしているようです。さらに、アクティビティの代替プラグインはもうないようです。

リンクは次のとおりです。 https://developers.facebook.com/docs/plugins/activity

0
Maksim Luzik

Webサイト開発者向けのもう1つのオプションは、 this one などの動作するFacebook Graph APIチュートリアルに従うことです。

ただし、Facebookページフィードを即座にカスタマイズして埋め込むことができる迅速なソリューションが必要な場合は、 this one などのWebサイトプラグインを使用する必要があります。

手順ガイドは次のとおりです。

  1. 無料キー または 有料キー を取得します。
  2. このログインページ に移動し、キーを使用してログインします。
  3. ログインしたら、「+カスタムフィードの作成」ボタンをクリックします。
  4. ポップアップで、カスタムFacebookページフィードに名前を付けます。
  5. ドロップダウンで、「WebサイトのFacebookページフィード」オプションを選択します。
  6. FacebookページIDを入力します。
  7. [続行]ボタンをクリックします。これにより、カスタマイズオプションが表示されます。
  8. 画面の右上隅にある「ウェブサイトに埋め込む」ボタンをクリックします。
  9. ポップアップで、[コードのコピー]ボタンをクリックして埋め込みコードをコピーします。
  10. 埋め込みコードをWebサイトに貼り付けます。

チュートリアルリンク にアクセスして、ライブデモもご覧ください。

0
Emkey