Embedded Facebook SDK posts appearing only after performing a hard refresh

I tried to implement sharing facebook posts on my client's website following the instructions provided in the Facebook embedded post documentation.

The website is built using the React NEXT.js framework.

I added the SDK right after opening the body tag in my _document.tsx file.

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v11.0" nonce="Z4T7Zvkv">

After that, I inserted the necessary code into the required page as per the documentation provided.

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore">Posted by <a href="https://www.facebook.com/facebookapp/">Facebook App</a> on&nbsp;<a href="https://www.facebook.com/20531316728/posts/10154009990506729/">Thursday, 27 August 2015</a></blockquote></div>

Although I followed the documentation guidelines, the actual display of the post differs from what was expected.

An example of how the post should look according to the documentation can be seen here.

However, the current display of the post on my website is shown in this image.

In Chrome, upon performing a Normal Reload, the post does not show up but only the blockquote text is visible. On the other hand, after doing a Hard Reload, the post displays correctly. But if followed by a Normal Reload, it reverts back to showing just the blockquote text.

I am seeking assistance in resolving this issue. Any help would be greatly appreciated.

typescriptuser-interfacenext.jsfacebook-javascript-sdk

Answer №1

When faced with the same problem, I found a solution by using FB.XFBML.parse() inside my useEffect hook.

useEffect(() => {
  FB.XFBML.parse();
}, []);

For further information, click here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript: object containing at least one property with the type T assigned

Is there a method to write the HasNumber interface in Typescript without receiving an error due to the fact that the HasNumberAndString interface includes a property that is not of type number? I am looking for a way to require the HasNumberAndString int ...

typescripttypescript-typings

Ways to generate multiple instances using create-next-app

I'm currently using this tool to help me develop a Next app: Encountering the following issue: create-next-app --example with-next-i18next with-next-sass with-next-seo next-learn An error occurred. The example named "with-next-i18next" could not be ...

next.jsi18next

Console not logging route changes in NextJS with TypeScript

My attempt to incorporate a Loading bar into my NextJs project is encountering two issues. When I attempt to record a router event upon navigating to a new route, no logs appear. Despite my efforts to include a loading bar when transitioning to a new rout ...

typescriptnext.js

React components need to refresh after fetching data from an API

I am currently working on a React application using TypeScript and integrating JSONPlaceholder for simulating API calls. I have successfully set up everything I need, but I am encountering an issue with re-rendering components that display response data fr ...

javascriptreactjstypescript

Potential prefetching issue encountered when using react-router with NextJS

Encountered an error while attempting to prefetch the data react_query__WEBPACK_IMPORTED_MODULE_5__.QueryClient.prefetchQuery is not a function Here is my code snippet: const formReducer = (state, event) => { return { ...state, [event.target ...

reactjsnext.js

ways to coordinate two subscriptions so that one initiates only when the other one emits

Currently, I am developing an Angular application with a specific scenario. I have an observable signal named dataFetchedEvent$, which indicates that data has been fetched from a remote location. Additionally, there is a form that relies on this remote dat ...

angulartypescriptrxjsobservable

The Component TSX is reporting a Type error stating that the Property 'onChange' is not present in the type '{ key: string; value: Model; }' as required by Props

While running the following command: npm run build I encountered an error that needs resolution: /components/Lane.tsx:37:18 Type error: Property 'onChange' is missing in type '{ key: string; value: StepModel; }' but required in type &a ...

reactjstypescriptnext.js

Next.js configuration: Redirecting / to the basePath

Whenever a user accesses the path /, I need it to redirect to the basePath that has been previously set. Below is my configuration in next.config.js: module.exports = { basePath: '/docs', } This means that whenever the path / is visited, it s ...

javascriptnext.js

Utilizing Angular and Typescript for Enhanced Modal Functionality: Implementing Bootstrap Modals in Various Components

When working in Angular, I have a component called Modal. I need to open the same Modal Component from two different places. The catch is, I want the button text in the Banner image to say "Get Started Now". Check out the Image linked below for reference. ...

angulartypescriptbootstrap-modalangular-bootstrapangular-module

What could be causing the conditional div to malfunction in Angular?

There are three conditional div elements on a page, each meant to be displayed based on specific conditions. <div *ngIf="isAvailable=='true'"> <form> <div class="form-group"> <label for ...

angulartypescriptfirebase

Navigating node-expose-sspi windows authentication with NextJs: a step-by-step guide

I am facing a challenge integrating my NextJS application with Windows Active Directory. Despite extensive research, I have not come across any comprehensive articles that explain this process effectively. My attempt to utilize the node-expose-sspi module ...

next.jsactive-directoryldapmiddleware

Utilizing Angular Components Across Various Layers: A Guide

Consider the following component structure: app1 -- app1.component.html -- app1.component.ts parent1 parent2 app2 -- app2.component.html -- app2.component.ts Is it possible to efficiently reuse the app2 component within the ap ...

javascriptangulartypescript

Effective ways to modify the Next-pwa caching strategy

Currently, I am attempting to modify the caching strategy of the Next-Pwa plugin from NetworkOnly to CacheFirst for data retrieval. https://i.stack.imgur.com/6o2Wf.png The image shows that it is currently using NetworkOnly for fetching incoming data. I ...

reactjsnext.jsnext-pwa

What is the definition of a type that has the potential to encompass any subtree within an object through recursive processes?

Consider the data structure below: const data = { animilia: { chordata: { mammalia: { carnivora: { canidae: { canis: 'lupus', vulpes: 'vulpe' } } } } }, ...

javascriptreactjstypescript

Error

Based on this source I've set up my project's package.json file with the following code snippets: "scripts": { "dev": "next dev", "build": "next build", "start": "nex ...

next.js

In the past, my code would run smoothly without any issues, but now I am encountering a runtime error even though the code comp

Recently, I started learning TypeScript and encountered an issue while working with Classes. My code was functioning properly before but now it's displaying a runtime error. ...

node.jstypescriptnpmruntime-errortypescript-class

Unloading a dynamically-loaded child component in Vue.js from the keep-alive cache

I have a question that is similar to the one mentioned here: Vue.js - Destroy a cached component from keep alive I am working on creating a Tab System using Vue router, and my code looks something like this: //My Tab component <template> <tab& ...

javascripttypescriptvue.jsvue-router

What could be causing the failure of the JSON parse for dynamic link parameters?

I am currently attempting to pass parameters to a dynamic page within an Amplify/NextJS application. This is still a work in progress. My objective is to utilize the passed parameters to generate a basic page based on 4 parameters included in the URL invo ...

javascriptnext.jsaws-amplify

What is the correct way to convert a non-observable into an observable?

Can I convert a non-observable into an observable to receive direct image updates without having to refresh the page, but encountering this error: Type 'EntityImage[]' is missing the following properties from type 'Observable<EntityImage ...

angulartypescriptrxjs

Clear the input field once an item has been successfully added to the array

I'm working on a CRUD application using an array. Once I add an item to the array, the HTML input field doesn't clear or reset. I've searched online but couldn't find a reset method in Angular. How can I clear the input field after addi ...

angulartypescript