How to embed a Facebook page's feed into my website

Asked 8/2, 2012 at 3:19 Answered 21/1 at 16:51

Solved javascript html facebook facebook-page facebook-feed

I am working with a group to help promote a charity event. The page I would like to embed is NOT my Facebook profile, but a Facebook page someone has created.

I would like to show that news feed in my webpage. If I need to get info/access from this page, please let me know. If someone else has a working example, please let me know. I have been using jsfiddle.net to draw it up.

Here's the page: http://www.facebook.com/pages/Chefs-Classic-Knock-OUT-Bout/225835004169328

Bibliofilm answered 8/2, 2012 at 3:19 Comment(5)

Is it an facebook event or a facebook page (You used both terms)? – Samuelson 8/2, 2012 at 15:32

It's a page, hence the "/pages/" portion of the URL. There is technically an event setup on facebook, but the above URL is the location in which updates will be posted. I would like to just show these updates from this page, as opposed to having to retype them on my website. – Bibliofilm 8/2, 2012 at 18:3

developers.facebook.com/docs/reference/api your page link appears to be broken – Merkley 8/2, 2012 at 18:11

For website developers, another option you have is to follow a working Facebook Graph API tutorial such as this one codeofaninja.com/2014/10/… But if you need a quick solution where you can customize and embed a Facebook page feed instantly, you should use website plugins such as this one displaysocialmedia.com/… – Fey 12/7, 2017 at 23:28

Try a free fetchrss.com ;) – Trafficator 5/12, 2017 at 10:57

123

Ahhh, that's super simple, no programming required.

See: https://developers.facebook.com/docs/plugins/page-plugin

You'll want to keep the show stream option turned on. You can adjust width and heigth and a few other things.

Samuelson answered 8/2, 2012 at 18:8 Comment(5)

By chance, does anyone what is preferred or most supported, HTML5, XFBML, or iframe? – Bibliofilm 9/2, 2012 at 19:18

I prefer HTML5 myself. Others tend to lean towards the iframe since there's no need to include any javascript on the host page. Not sure which is most supported to be honest. – Samuelson 9/2, 2012 at 19:22

People are complicating this thing, by going through Grpah API and RSS Feeds. It was super simple, Thank you !! – Turnbuckle 3/5, 2014 at 8:1

Just in case you want it more customized on your webpage, this tutorial is the best solution I found codeofaninja.com/2014/10/… – Fey 27/10, 2014 at 5:55

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

– Rudd 1/4, 2015 at 13:12

If you are looking for a custom code instead of plugin, then this might help you. Facebook graph has under gone some changes since it has evolved. These steps are for the latest Graph API which I tried recently and worked well.

There are three main steps involved - 1. Make sure you can code with a server side language (PHP), 2. Getting Facebook Access Token, 3. Calling the Graph API passing the access token.

1. Getting the access token - Here is the step by step process to get the access token for your Facebook page. - Embed Facebook page feed on my website. As per this you need to create an app in Facebook developers page which would give you an App Id and an App Secret. Use these two and get the Access Token.

2. Calling the Graph API - This would be pretty simple once you get the access token. You just need to form a URL to Graph API with all the fields/properties you want to retrieve and make a GET request to this URL. Here is one example on how to do it in asp.net MVC. Embedding facebook feeds using asp.net mvc. This should be pretty similar in any other technology as it would be just a HTTP GET request.

Sample FQL Query: https://graph.facebook.com/FBPageName/posts?fields=full_picture,picture,link,message,created_time&limit=5&access_token=YOUR_ACCESS_TOKEN_HERE

Coff answered 9/6, 2016 at 17:50 Comment(2)

Does this approach allow me to get multiple feeds? I have a sitecore instance that hosts multiple sites and would like to share a single component between each site with multiple feeds under the same dev acocunt – Replevin 12/8, 2019 at 14:40

If you make the component little configurable in Sitecore, then you can use the same component changing the keys and fb page name for each of the site in Sitecore. – Coff 21/9, 2019 at 17:11

In new page-plugin you can do multiple tabs in your website. The Page plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site.

Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.

<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>

Place the code for your plugin wherever you want the plugin to appear on your page.

<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>

You can also change the following settings:

Also You can now have timeline, events and messages tabs with the new page plugin:

Timeline Tab: Will show the most recent posts of your Facebook Page timeline.
Events Tab: People can follow your page events and subscribe to events from the plugin.
Messages Tab: People can message your page directly from your website. People need to be logged in to use this feature.

<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YourPageName"
  data-width="380" 
  data-hide-cover="false">
</div>

Adlare answered 5/12, 2015 at 9:26 Comment(0)

The Like Box/ Page plugin is basically an iframe and ugly :D

So I created my own free plugin that I call Famax plugin to display FanPage feeds. It's similar to the like box but has a better UI and is more customizable.

Also because the Like box is shown in an iframe with a fixed width and height etc, its not really responsive.

Golconda answered 5/2, 2015 at 6:58 Comment(0)

Correct me if I am wrong, but it seems that Facebook deprecated the Activity Feed plugin. Additionally there does not seem to be any substitute plugin for activity anymore.

Here is the link: https://developers.facebook.com/docs/plugins/activity

Beady answered 21/4, 2015 at 7:56 Comment(1)

Activity feed is deprecated but now there is page plugin available. The Page plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site. See [my answer] (https://mcmap.net/q/268817/-how-to-embed-a-facebook-page-39-s-feed-into-my-website) – Adlare 5/12, 2015 at 9:30

For website developers, another option you have is to follow a working Facebook Graph API tutorial such as this one.

But if you need a quick solution where you can customize and embed a Facebook page feed instantly, you should use website plugins such as this one.

Here's a step by step guide:

Get a Free Key or Paid Key.
Go to this login page and use the key to login.
Once logged in, click “+ Create Custom Feed” button.
On the pop up, name your custom Facebook page feed.
On the drop-down, select “Facebook Page Feed On Your Website” option.
Enter your Facebook Page ID.
Click the “Proceed” button. This will show you the customization options.
Click the “ Embed On Website” button located on the upper-right corner of the screen.
On the pop up, copy the embed code by clicking the “Copy Code” button.
Paste the embed code on your website.

Visit the tutorial link to see a live demo there as well.

Fey answered 12/7, 2017 at 23:33 Comment(0)

Place the code for your plugin wherever you want the plugin to appear on your page.

<iframe 
  src="https://www.facebook.com/v18.0/plugins/page.php?href=https://www.facebook.com/facebook&show_posts=true"
  frameborder="0"
  allowtransparency="true"
  allowfullscreen="true"
  scrolling="no"
  allow="encrypted-media"
  width="500px"
  height="500px"
  style="border:none;visibility:visible">
</iframe>

Replace this link https://www.facebook.com/facebook with your page link

Jermainejerman answered 21/1 at 16:51 Comment(0)

Recommended topics

Hot tags