How do I get live Facebook feed on my website?

Displaying a live feed of posts from a Facebook page on your website can be a great way to engage visitors and keep your site content fresh and dynamic. However, accessing Facebook data requires using Facebook’s APIs and a bit of coding work. In this article, I’ll walk through the full process step-by-step.

Overview

Here is a quick overview of the main steps involved:

Get an access token for your app to authorize it to retrieve data from the Facebook Graph API
Use the Graph API to retrieve the feed data in JSON format
Parse the JSON data and format it for display on your website

Display the formatted posts using a server-side language like PHP
Set up a cron job or other automated script to keep retrieving updated posts

I’ll now go through each of these steps in more detail.

Step 1: Register as a Facebook Developer

First, you need to register as a Facebook developer and create a Facebook app to get API access. Here is how:

Go to https://developers.facebook.com/ and click on “My Apps” in the top menu bar.
Click on “Register as a Developer” if you haven’t already.

Accept the policy and click “Register” to create a Facebook developer account.
Click on “Add a New App” and choose “Basic Display” as the app type. Enter a display name and contact email.
Go through the quickstart steps, there’s no need to actually develop the app further.

Once registered and you have created your app, you will get an App ID and App Secret which allow your app to access the Facebook APIs.

Step 2: Get an Access Token

To retrieve data from Facebook through its APIs, your app will need an access token – a temporary authentication code that proves your app is allowed to request data. Here is how to get a token:

In your Facebook app settings, go to the App Review tab and toggle the switch to make your app public.

Go to the Roles tab in App Settings and add yourself as an Admin, Developer or Tester.
Use the Graph API Explorer tool and select your app from the dropdown menu.
From the dropdown next to “User or Page”, select your Facebook page that you want to get the feed from.

Click “Get Access Token” and then copy the long token string.

This access token allows your app to retrieve data from the specific Facebook page you selected. The token will expire after a period of time, at which point you will need to generate a new one.

Step 3: Use the Graph API

The Facebook Graph API allows retrieval of data from Facebook programmatically. With the access token from Step 2, you can now use the Graph API to get the posts feed.

To test this, go back to the Graph API Explorer tool in your Facebook app settings. Under GET, enter the endpoint:

/{page-id}/feed

Replace {page-id} with your actual Facebook Page ID number. Then click “Submit”. This will return a JSON object with the most recent posts from that Page.

For example, one of the posts would look something like this:

{
  "id": "12345678901234567_9876543210987654", 
  "message": "Check out our latest article on our website!",
  "created_time": "2023-03-15T12:30:00+0100",
  "full_picture": "https://example.com/image.png" 
}

The JSON includes the post ID, message text, timestamp, and other fields. Your app would parse this JSON to extract the fields needed to display each post.

Step 4: Parse and Format the Data

Once you are retrieving the feed data through the API, you need to process and format it for display on your website. This can be done in any server-side language like PHP, Python, Ruby, etc.

The general steps would be:

Make a request to the Graph API endpoint to get the latest feed data
Decode the JSON response into a native data structure like an associative array

Loop through the posts and extract the relevant fields like message, timestamp, images etc.

Format the data into HTML for output, e.g.:

<div class="post">
  <img src="image.png">
  <p>Post message here</p>
  <p>Posted on March 15, 2023</p>
</div>

Output the HTML to be rendered on your website

You may also want to cache the posts data to avoid hitting the API on every page load.

Step 5: Display the Feed

To display the live Facebook feed on your website pages, you can use a server-side scripting language like PHP. For example:

<?php

// Get latest posts
$feed_data = get_facebook_feed_data(); 

// Output posts HTML  
foreach ($feed_data as $post) {
  echo format_post_html($post); 
}

?>

The PHP script would handle connecting to Facebook, retrieving the latest data, formatting it, and outputting the rendered HTML.

You may want to display the Facebook feed in a sidebar widget that’s included on all/multiple pages of your site. Or on a dedicated page like “Latest from our Facebook”.

Step 6: Set up Automated Retrieval

Since you want to show a live updating feed, you need to continually retrieve the latest posts from Facebook programmatically. This can be achieved by setting up a cron job or scheduled script.

For example, you could create a PHP script that fetches the latest data and caches it. Then set up a cron job on your server to run that script every 5-10 minutes. That way the cached feed data stays up to date.

Sample cron entry:

*/10 * * * * /path/to/script.php

This would run the script every 10 minutes to keep the Facebook feed live and fresh.

Conclusion

Displaying a live Facebook feed on your website takes a bit of API integration and coding work – but brings your site visitors current, engaging content.

The key steps are:

Register as Facebook developer and create app for API access
Generate access token to retrieve feed data

Use Graph API to get latest posts in JSON format
Parse and format posts data for display
Output formatted posts HTML using server-side code

Set up automated script to keep feed live and updated

With the posts feed seamlessly integrated, your website will feel much more dynamic and connected to your active social media presence.

Frequently Asked Questions

Does displaying a Facebook feed on my site require approval from Facebook?

No, you do not need special approval from Facebook to display a Facebook feed on your website. As long as you use Facebook’s standard Graph API and follow their terms of service, any app can retrieve and display public feed data.

What if I want to display a feed from a private or restricted Facebook page or group?

To retrieve posts from a private page or restricted group that requires permissions, your Facebook app will need to go through App Review to get approved for the appropriate permissions. This involves submitting details on how the data will be used and requires a more thorough review process.

Can I cache the Facebook feed data on my server?

Yes, caching the feed data is recommended to avoid hitting Facebook API limits. When caching, you just need to ensure the cache duration is not too long, such that the data stays relatively fresh. Caching for 5-10 minutes is typical.

How far back in time can I retrieve Facebook feed posts?

For a Page, you can retrieve all historical posted content. For a user profile feed, you can only retrieve the most recent posts made within the last 1-2 months approximately, for privacy reasons.

Is there a limit to how many posts I can show?

Facebook’s API limits allow apps to retrieve up to 250 posts per call. For most applications displaying a feed, retrieving the 25-50 most recent posts is sufficient.

Can I retrieve photos and videos posted to Facebook?

Yes, the Graph API provides access to any photos, videos and other media content included in the posts. The post data includes the media URLs and metadata needed to display them.

Does the Facebook feed update in real-time?

The feed does not automatically push new posts in real time. To have new posts show up right away, you need to periodically re-query the API, such as every 5-10 minutes.

Can I filter the feed to only certain post types or with hashtag/keywords?

Yes, the Graph API supports filtering and querying by specific post types, hashtags, keywords, date ranges, etc. This allows you to retrieve a customized feed.

Can I integrate Facebook comments with the feed posts?

Absolutely – Facebook provides the Comments Plugin that can be integrated with any feed post to show the comments thread attached to that Facebook post.

Example Code

Here is some sample PHP code that retrieves a Facebook feed and displays it:

<?php

// ID of the Facebook Page 
$page_id = "1234567"; 

// Access token with permissions to retrieve feed
$access_token = "EAA...";  

// API endpoint 
$api_endpoint = "https://graph.facebook.com/v15.0/{$page_id}/feed";

// Parameters to get 25 most recent posts  
$params = ['fields' => 'id,message,created_time,full_picture', 'limit' => 25, 'access_token' => $access_token];

// Make API request
$feed_data = file_get_contents($api_endpoint . '?' . http_build_query($params));

// Decode JSON 
$feed_data = json_decode($feed_data, true);

// Output posts HTML
foreach ($feed_data['data'] as $post) {

  echo '<div class="post">';

  // Post image if available
  if (!empty($post['full_picture'])) {
    echo '<img src="' . $post['full_picture'] . '" />'; 
  }

  echo '<p>' . $post['message'] . '</p>';
  echo '<p>Posted on ' . date('F j, Y', strtotime($post['created_time'])) . '</p>';

  echo '</div>';

}

?>

This PHP code makes the API request, parses the data, formats it, and outputs the feed HTML. You would then include this in a sidebar or on a dedicated feed page.

Related Resources

Here are some additional resources on integrating Facebook feeds:

Facebook Graph API Page Feed reference

StackOverflow discussion on permanent Page access tokens

Integrating a customized Facebook feed into your website is a fairly straightforward process using the Facebook APIs. This article has provided a step-by-step walkthrough to implement the feed and keep it updated automatically. Let me know if you have any other questions!