* /api/og-images/route.tsx
import { ImageResponse } from 'next/og';
export async function GET(request: Request) {
// URL parse
const { searchParams } = new URL(request.url);
// ?title=Hello
const title = searchParams.get('title') ?? 'Default гарчиг';
return new ImageResponse(
<div style={{ fontSize: 60, background: '#000', color: '#fff' }}>
{title || `Миний гарчиг`}
</div>,
{
width: 1200,
height: 600,
},
);
}
* page.tsx
import { Metadata } from 'next';
import HomeSections from './sections';
export async function generateMetadata({
params,
}: {
params: { slug: string };
}): Promise<Metadata> {
// const article = await getArticle(params.slug); // DB / API
return {
title: `article.title`,
description: `article.summary`,
openGraph: {
title: `article.title`,
description: `article.summary`,
url: `https://example.com/article/${params.slug}`,
siteName: 'My Website',
images: [
{
url: `/api/og-images?title=Hello`,
width: 1200,
height: 600,
},
],
locale: 'mn_MN',
type: 'article',
},
};
}
export default function HomePage() {
return <HomeSections />;
}
* sections.tsx
'use client';
import { postRequestOptions } from '@/libs/helpers/networker';
import { useEffect, useState } from 'react';
export default function HomeSections() {
const [accessToken, setAccessToken] = useState<string | null>(null);
useEffect(() => {
// Facebook SDK script нэмэх
const loadFbSdk = () =>
new Promise<void>((resolve) => {
((d, s, id) => {
const fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return resolve();
const js = d.createElement(s) as HTMLScriptElement;
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js';
js.onload = () => resolve();
d.body.appendChild(js);
})(document, 'script', 'facebook-jssdk');
});
// SDK init
loadFbSdk().then(() => {
(window as any).FB.init({
appId: process.env.NEXT_PUBLIC_FB_APP_ID,
cookie: true,
xfbml: false,
version: 'v19.0',
});
});
}, []);
// Login function
const fbLogin = () => {
(window as any).FB.login(
(response: any) => {
if (response.authResponse) {
const accessToken = response.authResponse.accessToken;
console.log('User Access Token:', accessToken);
// Backend руу дамжуулахад ашиглана
setAccessToken(accessToken);
} else {
console.log(
'User cancelled login or did not fully authorize.',
);
setAccessToken(null);
}
},
{ scope: 'public_profile,email,user_posts' },
); // user_posts scope зөвхөн тест токен дээр ажиллана
};
// Share function
const shareArticle = (articleUrl: string) => {
// const linkedMessage = `${articleUrl}`;
// const shareUrl =
// 'https://www.facebook.com/sharer/sharer.php?quote="hello"&u=' +
// encodeURIComponent(linkedMessage);
// window.open(shareUrl, '_blank', 'width=600,height=400');
const url = encodeURIComponent(`https://news.mn/r/2847199/`);
window.open(
`https://www.facebook.com/sharer/sharer.php?u=${url}`,
'_blank',
'width=600,height=500',
);
};
const checkSharedPosts = async (articleUrl: string) => {
fetch(
'/api/check-fb-posts',
postRequestOptions({
accessToken,
siteUrl: articleUrl,
}),
)
.then((res) => {
return res.json();
})
.then((data) => {
console.log('checkSharedPosts:', data);
})
.catch((err) => {
console.error('checkSharedPosts:', err);
});
};
return (
<div className="flex flex-col justify-center">
<div>
{accessToken ? (
<div>Нэвтэрсэн :)</div>
) : (
<div>Нэвтрээгүй (:</div>
)}
</div>
<button
className="bg-indigo-700 text-gray-300 text-md p-4 cursor-pointer"
onClick={fbLogin}
>
Login with Facebook
</button>
<button
className="bg-indigo-700 text-gray-300 text-md p-4 cursor-pointer"
onClick={() =>
shareArticle('https://itissandboxbro.duckdns.org/admin')
}
>
Share content on Facebook
</button>
<button
className="bg-indigo-700 text-gray-300 text-md p-4 cursor-pointer"
onClick={() =>
checkSharedPosts('https://itissandboxbro.duckdns.org/admin')
}
>
Check out the posts shared on Facebook
</button>
</div>
);
}
