I'm building a solution that'll require me to authenticate Facebook business accounts and get access to their pages and Instagram handles. And my platform will be used to posts and schedule. Just like Ayrshare. How can I get scopes for :-

instagram_business_content_publish pages_manage_posts pages_show_list publish_video

I tried react @greatsumini/react-facebook-login but its not allowing me to add more scopes

<FacebookLogin       appId={process.env.NEXT_PUBLIC_FACEBOOK_ID as string}       onSuccess={FacebookLoginOnSuccess}       onFail={(error) => {         console.log("Login Failed!", error);       }}       onProfileSuccess={FacebookOnProfileSuccess}       style={{         backgroundColor: "#4267b2",         color: "#fff",         fontSize: "16px",         padding: "12px 24px",         border: "none",         borderRadius: "4px",       }}       scope="email,public_profile"     /> 

I want to add Google Analytics and Google Adsense to my website in NextJS. I found this official doc: https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries#google-tag-manager

According to this, its enough to add:

 <GoogleTagManager gtmId="GTM-XYZ" /> 

However, I have problem with understanding how Google adsense works. I know that google adsense require from me to include another script to my head (my account is not approved yet for google ads). The problem is that I want to let user decide whether he accepts analytics and advertisement cookies. I was going to simply remove GoogleTagManager from my head for analytics but what with advertsiement? I.e. I can't remove the Google Ads script because I dont want to remove ads at all so have can I distinguish between "personalized adverts" (user accepted cookies) and "not personalized" adverts? How should I construct my code to handle all cases?

My current project involves creating a social media management app using Nest.js and Next.js. Passport Facebook has been set up on my server side and tested on the server side, and it works well. When I move to the client side and attempt to verify if the access token is saved on the database or not, i sent a request to the endpoint 'api/social-accounts/facebook', but Facebook seems to block it. This is the error message I received. : 'Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.facebook.com/v3.2/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fapi%2Fsocial-accounts%2Ffacebook%2Fcallback&client_id=1169598374207494. (Reason: CORS request did not succeed). Status code: (null).' here is my controller :

@Controller('api/social-accounts') export class SocialAccountsController {   constructor(private readonly socialAccountService: SocialAccountsService) {}   @UseGuards(AuthGuard('facebook'))   @Get('facebook')   async getAccessToken() {     console.log('arrived here. [get access token]');   }   @Get('facebook/callback')   @UseGuards(AuthGuard('facebook'))   async facebookAuthCallback(@Req() req: any) {     const { socialAccount, user } = req;     const { accessToken, profile } = socialAccount;     await this.socialAccountService.saveSocialAccountAccessToken(       {         access_token: accessToken,         expires_in: null,         social_user_id: profile?.id,       },       user,     );     return 'Your account has been connected.';   } } 

here is my facebook strategy :

import { Injectable } from '@nestjs/common'; import { ConfigService } from '@nestjs/config'; import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-facebook'; import { SocialAccountsService } from '../social-accounts.service'; @Injectable() export class FacebookStrategy extends PassportStrategy(Strategy, 'facebook') {   constructor(private readonly config: ConfigService) {     super({       clientID: config.get<string>('APP_ID'),       clientSecret: config.get<string>('APP_SECRET'),       callbackURL:         'http://localhost:8000/api/social-accounts/facebook/callback',       profileFields: ['id'],     });   }   async validate(     accessToken: string,     _refreshToken: string,     profile: any,     done: any,   ): Promise<any> {     const socialAccount = { accessToken, social_user_id: profile.id };     console.log({ socialAccount });     done(null, socialAccount);   } } 

I am try to connect the facebook account without using passport but still has seem issue. Adding a mechanism to authenticate to the app with a Facebook account is not something I want to do. I want the user to be able to add their Facebook account to the app to manage it.

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 tried a lot of ways to enable the Vignette ads on the Next JS site before I realized that there always was a block for them in the inspector, it just never change "display: none" to "display: block".

<ins class="adsbygoogle adsbygoogle-noablate" style="display: none !important; width: 100vw !important; height: 100vh !important; inset: 0px auto auto 0px !important; clear: none !important; float: none !important; margin: 0px !important; max-height: none !important; max-width: none !important; opacity: 1 !important; overflow: visible !important; padding: 0px !important; position: fixed !important; vertical-align: baseline !important; visibility: visible !important; z-index: 2147483647 !important; background: transparent !important;" data-adsbygoogle-status="done" aria-hidden="true" data-vignette-loaded="true" data-ad-status="filled"></ins> 

How i saw on other sites this ins appear and after some interaction with the site display automatically changed from none to block and Vignette Ads appear. If I manually change in the inspector display to block - Vignette will appear immediately, but automatically never.

Please can anyone know a possible solution?