So I'm using facebook posts embedding plugin to load facebook posts in my NEXT.JS Website through their Javascript SDK. I first get my post URLs through the graph API , then I send the URLs to FB Post Embedder to load the facebook posts. The Errors I receive :
Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'deny'.
Here is my layout.js Code:
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/49216970f8.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body className={inter.className}>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<Navbar/>
{children}
<Footer/>
</body>
</html>
Here is my Component Code Where it is Loaded:
"use client"
import axios from "axios"
import React from "react";
import { useState, useEffect } from "react";
const MediaPage = () => {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://graph.facebook.com/v19.0/1420874058216169/posts', {
params: {
access_token: process.env.NEXT_PUBLIC_FACEBOOK_API_TOKEN,
fields: 'id,message,created_time,permalink_url'
}
});
setData(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []);
if (data) {
console.log(data)
}
useEffect(() => {
if (typeof window !== 'undefined' && window.FB) {
window.FB.XFBML.parse();
}
}, [data]);
return (
<div className="p-40 bg-black font-bold flex items-center justify-center w-full min-h-screen">
{data ? (
<div className="flex flex-col gap-10">
{data.data.map((post) => (
<div key={post.id} className="w-full bg-white text-black">
<div className="fb-post" data-href={post.permalink_url} data-show-text="true"></div>
</div>
))}
</div>
) : (
<p>Loading...</p>
)}
</div>
)
}
export default MediaPage
Ive followed all the instructions thoroughly and sometimes it works by displaying the posts while other times it will throw errors. I can't figure out why its so inconsistent and why it doesn't work sometimes.