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

PhpStorm does not currently support types in JavaScript

Currently, I am using PhpStorm for a Vue 2 / TypeScript project. However, whenever I attempt to add return types to functions, I encounter the error message "Types are not supported by current JavaScript version": https://i.sstatic.net/ct3gu.png In the " ...

typescriptvue.jsphpstormwebstorm

Implementing the useRouter hook in a function in Next.js: A step-by-step guide

In my Next.js project, I have a function that gathers events for Firebase analytics. import analytics from '@utility/firebase'; const handleLogEvents = (event) => { const currentDate = new Date(); logEvent(analytics, event.event_name, { ...

reactjsnext.jsfirebase-analyticsnext-router

Guide on navigating an array of objects using the provided keys as a starting point in Javascript/Typescript

Assuming I have an array of objects structured like this: const events: Array<{year: number, month: number, date: number}> = [ {year: 2020, month: 10, date: 13}, {year: 2021: month: 3, date: 12}, {year: 2021: month: 9, date: 6}, {year: 2021: mont ...

javascriptangulartypescript

Leveraging the power of Prisma alongside the latest version of Yarn

My current project involves building an app using Next.js, Next-Auth, and Prisma, with API Routes for backend code. Recently, I updated Yarn on my computer to version v3.1.1. Following this update, I created a .yarnrc.yml file where I specified the nodeLin ...

next.jsprismanext-auth

Angular 7 - ALERT: Circular dependency identified:

Suddenly, a lightbulb went off in my head. I encountered two warnings while running ng serve: WARNING in Circular dependency detected: src\app\_services\ignore-interceptor.service.ts -> src\app\_services\index.ts -> sr ...

angulartypescript

How to transition from using a CDN to NPM for implementing the Google Maps JavaScript MarkerClusterer?

Currently integrating Google Maps JavaScript MarkerClusterer from CDN, I am considering transitioning to the NPM version for Typescript checking in my JavaScript files. However, I am encountering difficulties understanding how to make this switch. The docu ...

javascripttypescriptnpmgoogle-maps-api-3google-maps-markers

Exploring the typing for DefaultRootState in React Redux Connect

I'm currently in the process of upgrading to the latest versions of TypeScript, React, and Redux. However, I've encountered a compiler error when using the connect function in React Redux: According to the React Redux documentation, I typed my r ...

reactjstypescriptreduxreact-redux

The type 'string | undefined' cannot be assigned to type 'string'

I am facing a challenge in comparing two arrays, where one array is sourced from a third-party AWS service and its existence cannot be guaranteed. Despite my efforts to handle potential errors by incorporating return statements in my function calls, I con ...

javascripttypescript

Next.js next-i18next consistently directs to the English version

My project is designed to work with both English and Dutch (default language). I have followed the original example closely, but it seems like something isn't quite right. Despite setting browserLanguageDetection: false, the endpoint is still being f ...

reactjsinternationalizationnext.jsi18nextnext-i18next

What is causing the issue of URL parameters becoming undefined when performing service injection in the app component?

When working with a service that reads parameters from the URL, everything seems to be functioning properly until attempting to inject the service into the constructor of the app.component.ts file or trying to call a service method from the app.component.t ...

angulartypescripturl-parameters

Angular update row and save data to an array

When comparing the data of an edited row with the row just below it, I encounter a specific scenario. In a table containing 5 rows, as I edit records from top to bottom using the provided code snippet, I am able to store the values in an array. The most re ...

javascriptjqueryarraysangulartypescript

Using Lerna with Docker for Next.js and GraphQL applications

Currently, I am working with lerna and everything runs smoothly locally. However, when I attempt to build the image and operate it through Docker, it does not function as expected. FROM node:16-alpine3.11 ENV NODE_ENV=production COPY . /app WORKDIR /app R ...

node.jstypescriptdockernpmnext.js

An issue has been encountered at the header component of an Angular web application, identified as error code

I recently created a small Angular web application and decided to create a Header component using the command line ng g c Header. I then proceeded to write a brief paragraph in the header.component.html file. <p>header works!</p> An example o ...

angularangularjstypescriptvisual-studio

Client Components do not have the ability to directly accept functions as parameters

I encountered an issue while using next js 14.0.3. When I passed the icon from a server component to a client component, it resulted in this error: 'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking i ...

next.jsnext.js14

Transferring AgGrid context in a functional React component

I have been working on a component that utilizes AgGrid to display a table, with the data sourced from a Redux selector. My goal is to include a button within a cell in the table that triggers an action based on the specific row's data. However, I a ...

reactjstypescriptreduxag-grid

Preserving type information in TypeScript function return values

Wondering how to make this code work in TypeScript. Function tempA copies the value of x.a to x.temp and returns it, while function tempB does the same with x.b. However, when calling tempA, the compiler seems to forget about the existence of the b field ...

typescript

How can you fix the warning message in Next.js that says "Expected server HTML to include a matching <header> within <body>"?

I came across a warning message in my Nextjs application stating "Expected server HTML to contain a matching ." It seems like there is a discrepancy between the expected HTML structure and the actual content served by the server. How can I resolve this iss ...

next.jsnext.js13

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

htmlsql-serverangulartypescript

What is the process for importing the Scale type definition from the Scale module?

Recently, I've been utilizing the Tonal package within a Vite/Vue/Typescript project. My current task involves importing the type known as Scale from the Scale module. You can find the type definition here: export interface Scale extends ScaleType { ...

typescripttypestonal.js

How to Retrieve Observable<Record<string, boolean>> Value with the Help of AsyncPipe

My service retrieves permissions for the currently logged-in user as a record. The necessary observable is declared in my TypeScript file as a member variable: permissionsRecord$: Observable<Record<string, boolean>>; When I call the service, ...

angulartypescriptangular2-observablesasync-pipe