Posts tagged with reactjs

I’m developing a custom crm in react and nodejs.

I need to integrate a box in which the user/operator can message through whatsapp to the customers.

I read that I can’t use the iframe cause there are some several restrictions.

How can I add this feature?

ps: I don’t want to open new tab in the browser and redirect to whatsapp web.

I'm new to development with Instagram APIs and am trying to make a React based application that uses Instagram's graph API in order to fetch posts where my professional account is mentioned and display them on my webpage. I tried going through the Meta documentation on how to use their graph API, but I don't quite get where to start and I am getting confused with all the steps I need to take to just make my first API call. The Meta guide is https://developers.facebook.com/docs/instagram-api/getting-started . Any help regarding this on the steps or links to resources that can guide me through this would be great! Thanks in advance!

I have tried making a react application, but in one of the steps it says to create a facebook login app on my meta dashboard first, I did do that, but I am not getting access to the required permission, instgram_basic, etc.

I'm encountering an issue with Facebook's Graph API where it inconsistently scrapes Open Graph (OG) meta tags between different language versions of my website, which is built using Next.js version 14 with an architecture using page router. Specifically, the French version of my URLs (manage by a context) consistently returns all expected OG meta data (title, description, image), whereas the regular English version sometimes only returns minimal data (type, updated_time), missing critical tags like title, description, and image.

Here are the key details:

Platform: Next.js version 14 with dynamic content rendering based on user language preferences, which is managed by a context.

Behavior: When using Facebook's Graph API Explorer or the Sharing Debugger, the French URL (e.g., https://wiseduckdev.vercel.app/fr/gpts/framework) always successfully returns full meta tag information. However, the equivalent English URL (e.g., https://wiseduckdev.vercel.app/gpts/framework) often only returns partial data.

Meta Tags: Both versions use identical setups for Open Graph meta tags, confirmed via direct source inspection and tools like SEO Meta in 1 Click.

 <meta property="og:type" content="website" />           <meta property="og:title" content={pageData.category.og_title} />           <meta             property="og:description"             content={pageData.category.og_description}           />           <meta             property="og:url"             content={               activeLanguage === "FR"                 ? `https://${siteUrl}/fr/gpts/${pageData.category.category}`                 : `https://${siteUrl}/gpts/${pageData.category.category}`             }           />           <meta             property="og:image"             content={`https://${siteUrl}${pageData.category.og_image}`}           />           <meta             property="og:locale"             content={translation.og_locale[activeLanguage]}           /> 

Caching: I've purged both server and Facebook caches and forced re-scraping using Facebook's tools, which sometimes resolves the issue temporarily for English URLs but doesn't provide a consistent fix.

I'm looking for insights or suggestions on why this discrepancy might be occurring and how to ensure consistent meta tag scraping by Facebook across all language versions of my site.

Actions Taken to Resolve the Issue:

  • Meta Tag Verification: Confirmed that both the English and French versions of the site have correctly implemented Open Graph (OG) meta tags (og:title, og:description, og:image) using direct source inspection and SEO Meta in 1 Click.
  • Caching Management: Purged server and Facebook caches to ensure fresh data is being fetched and used the Facebook Sharing Debugger to force re-scraping of the URLs.
  • Server Response Checks: Used curl to simulate Facebook’s scraper requests, verifying that the server sends the correct metadata and appropriate HTTP responses.
  • Dynamic Content Handling: Ensured that metadata is dynamically generated based on user language settings and is properly rendered server-side in both language versions.
  • API Utilization: Utilized Facebook’s Graph API Explorer to manually fetch data for both language versions to check the responses and confirm that the issue persists despite correct setup.

Expectations and Goals:

  • Consistent Meta Tag Scraping: Ensure that Facebook’s scraper consistently retrieves all relevant OG meta tags across all language versions of the site, not just the French version.
  • Understanding Root Cause: Gain insights into why the English version sometimes only returns minimal data (type, updated_time) despite identical setups.
  • Reliable Resolution: Find a reliable solution or workaround that ensures all versions of the site are equally optimized for social media sharing, without needing to manually trigger re-scrapes.

I have a Facebook Login for Business button setup and when I have users of other businesses test it out, it does not grant them permissions that have been defined in the associated configuration id. Instead of granting the users all 5 permissions stated within the configuration it instead only grants them 'public_profile' and 'business_management'.

During developer testing a developer had access to the main Business as well as a client Business to verify that the process worked. When this user login's in and authorises, they are granted all 5 permissions. I have scoured the documentation and am unsure if I'm missing a step or some code.

I am unable to ask Facebook for help as they no longer accept GraphApi problems via their helpdesk. You can only post it on their public error forum in hopes that somebody else can chime in.

If it helps, the login button setup I am using is as follows:

<div     id="facebook-login-button"     className="fb-login-button"     data-width=""     data-size="medium"     data-button-type=""     data-layout=""     data-auto-logout-link="false"     data-use-continue-as="false"     data-config_id={facebookConfigurationId}     data-onlogin="onFacebookLogin" ></div> 

I have been trying to build an app (react for front end with typescript) that requires social media integration from various platforms, one of which is Facebook. So, I tried to follow the Meta docs and tried to implement the Facebook Login through their SDK code. The login alone was not very difficult to code, however when I refresh the page or switch to a different page and then return back to the one with the Facebook Login button, I am automatically logged out, and need to log back in every time.

I have looked through so many resources and forums trying to understand how to properly implement the Facebook login where a user can safely log in and would stay logged in throughout page refreshes until they directly click on a logout button. I feel like the Meta docs are pretty good, but the code and instructions they provide are in "pieces", if that makes sense. So, are there any full-length, detailed tutorials or guides available that I can follow along to implement this feature?