Create a facebook livestream widget for home replacing Stream.html

[samtipton]

Can use the Facebook Graph API to get the most recent streaming video and grab its embed source html.

1. Create a Facebook App:

   • Go to the Facebook Developers website and create a new app.
   • Note down your App ID and App Secret.

2. Get an Access Token:

   • Obtain a user access token with the pages_show_list and pages_read_engagement permissions. You can use the Graph API Explorer for this purpose.
   • Make sure to grant these permissions and get a user access token.

3. Find Page ID:

   • Retrieve the Page ID of the Facebook page you are interested in.

4. Use the API to Get Live Videos:

   • Use the following endpoint to get the most recent live video posts on a page:

     GET /v12.0/{page-id}/live_videos?fields=id,description,embed_html,status&limit=1

   • Replace {page-id} with the actual Page ID.

5. Retrieve Embed HTML:

   • Once you have the response, extract the embed_html field from the live video post.

6. Generate Embedded Video Player:

   • Use the extracted embed_html to generate the embedded video player on your webpage.

Typescript code:

// Replace with your app details and page ID
const appId = 'your-app-id';
const appSecret = 'your-app-secret';
const pageId = 'your-page-id';
let userAccessToken = 'your-user-access-token';

// Get an access token with the required permissions
const getAccessToken = async () => {
    try {
        const accessTokenResponse = await fetch(
            `https://graph.facebook.com/v12.0/oauth/access_token?grant_type=fb_exchange_token&client_id=${appId}&client_secret=${appSecret}&fb_exchange_token=${userAccessToken}`
        );
        const accessTokenData = await accessTokenResponse.json();
        userAccessToken = accessTokenData.access_token;
    } catch (error) {
        console.error('Error getting access token:', error);
        process.exit(1);
    }
};

// Get the most recent live video post
const getRecentLiveVideo = async () => {
    try {
        const liveVideosResponse = await fetch(
            `https://graph.facebook.com/v12.0/${pageId}/live_videos?fields=id,description,embed_html,status&limit=1&access_token=${userAccessToken}`
        );
        const liveVideoData = await liveVideosResponse.json();

        const liveVideo = liveVideoData.data[0];

        if (liveVideo) {
            const embedHtml = liveVideo.embed_html;
            console.log(`Embed HTML: ${embedHtml}`);
        } else {
            console.log('No live videos found on the page.');
        }
    } catch (error) {
        console.error('Error getting live video:', error);
    }
};

// Main execution
(async () => {
    await getAccessToken();
    await getRecentLiveVideo();
})();

Can show widget only during streaming normal hours Sundays 9-12, Wednesdays 7-8:30

[samtipton]

jquery version

// Replace with your app details and page ID
const appId = 'your-app-id';
const appSecret = 'your-app-secret';
const pageId = 'your-page-id';
let userAccessToken = 'your-user-access-token';

// Get an access token with the required permissions
const getAccessToken = () => {
    return $.get({
        url: `https://graph.facebook.com/v12.0/oauth/access_token`,
        data: {
            grant_type: 'fb_exchange_token',
            client_id: appId,
            client_secret: appSecret,
            fb_exchange_token: userAccessToken,
        }
    });
};

// Get the most recent live video post
const getRecentLiveVideo = () => {
    return $.get({
        url: `https://graph.facebook.com/v12.0/${pageId}/live_videos`,
        data: {
            fields: 'id,description,embed_html,status',
            limit: 1,
            access_token: userAccessToken,
        }
    });
};

// Main execution
$(document).ready(() => {
    getAccessToken()
        .then(() => getRecentLiveVideo())
        .then((liveVideoData) => {
            const liveVideo = liveVideoData.data[0];
            if (liveVideo) {
                const embedHtml = liveVideo.embed_html;
                $('#live-video-container').html(embedHtml);
            } else {
                $('#live-video-container').html('No live videos found on the page.');
            }
        })
        .catch((error) => {
            console.error('Error:', error.responseJSON || error.statusText || error);
        });
});

[samtipton]

Current issue to solve is how to store facebook api secret.