Next.js 에서 facebook comments plugin 적용해보기

안녕하세요!

이번시간에는 간단하게 Next.js에서 Facebook Comments Plugin 을 어떻게 적용시키는지 알아보도록 하겠습니다!!

Facebook Comments Plugin은 페이스북 아이디만 있으면 간단하게 댓글 기능을 활용할 수 있게끔 페이스북에서 제공해주는 플러그인입니다!

먼저 관련 링크로 들어갑니다. 그리고 로그인을 해주고

상단에 시작하기를 눌러 앱을 하나 생성해줍니다!

그리고 앱 성성후에 받는 앱 ID를 복사하고 아래와 같이 head에 meta tag를 content안에 아래와 같은 형식으로 붙여줍시다. (아래는 저의 아이디이기때문에 본인의 아이디를 붙여주셔야합니다)

<meta property="fb:app_id" content="540132141049632" />

그런 다음 댓글을 남길 URL에 자신의 페이지 URL을 넣고 원하시는 추가 옵션을 넣어주고 하단에 코드받기 버튼을 눌러줍니다!

그러면 아래와 같은 화면이 뜰것입니다.

그리고 자신의 코드에 맞게

import React from 'react';
import Script from 'next/script';

interface FbCommentProps {
  slug: string;
}

const FbComment = ({ slug }: FbCommentProps) => {
  return (
    <>
      <div className="fb-comments" data-href={`https://www.hooneylog.com/${slug}`} data-width="100%" />
      <Script
        id="facebook-jssdk"
        src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v13.0&appId=540132141049632&autoLogAppEvents=1"
        async
        defer
        crossOrigin="anonymous"
      />
      <div id="fb-root" />
    </>
  );
};

export default FbComment;

이러한 형태로 작성해주고 원하시는 위치에 import 해주면 끝!!

감사합니다.