짧은 답부터 드리겠습니다. 페이스북 페이지의 게시물을 홈페이지에 표시하는 방법은 두 가지입니다. 첫째, 페이스북 공식 페이지 플러그인입니다. 무료이고, 페이지 주소를 넣으면 코드를 만들어 주는 구조입니다. 둘째, 페이지를 연결해서 피드를 만들어 주는 위젯입니다. 코드 한 조각으로 폭을 가득 채우고, 사이트 디자인에 맞추고, 보여줄 게시물을 고를 수 있습니다. 손이 먼저 가는 쪽은 첫째지만, 실제로 쓸 수 있는 상태로 만들어 주는 쪽은 둘째였습니다. 아래에서 둘 다 검증했습니다.
localhost:8080에서 서빙했습니다.
페이스북 피드를 사이트에 두는 이유는 대체로 하나입니다. 방문자에게 지금 이 회사가 움직이고 있다는 것을 보여주기 위해서입니다. 공지, 이벤트, 신제품 소식이 사이트 안에서 계속 갱신되면 소개 문구를 다시 쓰지 않아도 페이지가 최신 상태로 유지됩니다. 여러 채널을 한 자리에 모아 하나의 피드로 신뢰를 만드는 방법 (영어)도 같은 맥락입니다.
이 애니메이션에 대하여
왼쪽에 facebook.com의 내 페이지 카드가 나타나고 그 안에 게시물 네 개가 차례로 쌓입니다. 가운데의 점선 경로에 Auto-Sync라는 표시와 함께 점이 지나가고, 오른쪽 yoursite.com 브라우저 창의 Social Feed 영역에 같은 게시물 네 개가 격자로 자리를 잡은 뒤 초록색 Live 표시가 붙습니다. 새 게시물이 올라오면 페이지를 다시 편집하지 않아도 사이트 쪽 피드가 따라온다는 뜻입니다.
페이스북 공식 페이지 플러그인, 직접 설치해서 확인했습니다
순서대로 적겠습니다. 코드를 받는 단계부터 막혔고, 그다음에는 폭에서, 그다음에는 쿠키에서 걸렸습니다.
1. 코드 생성기가 코드를 내주지 않았습니다
Meta 개발자 사이트의 페이지 플러그인 설정 화면에 여러 주소를 넣어 봤습니다. 개인 프로필 주소를 넣고 Get Code를 누르면 버튼만 흔들리고 아무 일도 일어나지 않았습니다. 오류도, 설명도 없었습니다. 앱 단위 권한 제한이 걸린 Meta 비즈니스 스위트 인증 페이지에서도 같은 방식으로 조용히 실패했습니다. https://를 빼고 facebook.com/... 형태로 넣으면 입력한 주소가 유효하지 않다는 오류가 떴는데, 정작 바로 아래 미리보기는 그 페이지를 정상적으로 그려 주고 있었습니다. 마지막으로 전체 주소를 제대로 넣고 Get Code를 눌렀더니 창이 하나 열리고 그 안에서 로딩 표시만 계속 돌았습니다. 코드는 끝내 나오지 않았습니다.
2. 그래서 코드를 직접 작성했습니다
설정 화면이 코드를 주지 않으니 표준 SDK 로더와 fb-page div를 직접 써서 공개 페이지를 가리키게 했습니다. 로컬 파일을 file://로 열면 아무것도 나오지 않습니다. 페이스북 SDK가 보안상 file://에서 실행되지 않기 때문입니다. 그래서 로컬 서버 localhost:8080으로 서빙했습니다. 페이스북 피드를 직접 HTML에 넣으실 분을 위해, 페이지 플러그인이 요구하는 코드는 정확히 이것입니다.
<!-- 1. 페이스북 자바스크립트 SDK를 <body> 상단에서 한 번만 로드합니다 -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v23.0">
</script>
<!-- 2. 피드를 보여줄 위치에 이 블록을 넣습니다 -->
<div class="fb-page"
data-href="https://www.facebook.com/YourPage"
data-tabs="timeline"
data-width="500"
data-height="700"
data-small-header="false"
data-hide-cover="false"
data-show-facepile="true">
</div>여기서 data-width="500"이 상한값입니다. 실제로 띄워 보니 좁고 스크롤되는 상자가 나왔습니다. 게시물은 다섯 개만 들어왔고, 캡션은 말줄임표로 잘렸으며, 게시물을 누르면 사이트를 벗어나 페이스북으로 이동했습니다. 영상은 그 자리에서 재생되지 않았고, 상자 아래에는 페이스북에서 더 보라는 버튼이 붙었습니다. 이 플러그인이 하는 일은 결국 방문자를 페이스북으로 데려가는 것입니다.
3. 폭의 함정: 최소 180px, 최대 500px
Meta 문서는 이 플러그인의 폭이 최소 180px, 최대 500px로 고정되어 있고 기본값은 340px이라고 밝히고 있습니다. 그대로였습니다. data-width를 500으로 두고 폭 1179px 화면에서 열었더니 플러그인은 왼쪽에 좁게 자리 잡고 오른쪽에는 약 680px의 빈 공간이 남았습니다(1179에서 500을 빼면 679입니다). 컨테이너를 채우게 만드는 설정은 없습니다. 500px을 넘겨 늘어나지 않습니다.
4. 창 크기가 바뀌어도 다시 계산하지 않습니다
Meta 문서는 이 플러그인이 페이지 로드 시점에 폭을 결정하며 로드 이후의 박스 모델 변화에는 반응하지 않는다고 스스로 적어 두었습니다. 반응형 모드에서 확인해 봤습니다. 1179px에서는 처음 계산한 좁은 상태 그대로 멈춰 있었고, 184px에서는 최소값인 180px까지 눌려 페이지 이름이 단어 중간에서 줄바꿈됐습니다. 83px에서는 최소 폭 아래로는 내려가지 않아 위젯이 화면 밖으로 넘쳤고, 글자가 한 단어씩 세로로 쌓여 읽을 수 없는 상태가 됐습니다. 모바일이나 화면 회전 뒤에 레이아웃이 깨진다는 이야기가 나오는 이유가 이것입니다. 한 번 재고 다시 재지 않습니다.
5. 쿠키 여섯 개. 이 항목이 가장 중요합니다
개발자 도구의 Application 탭에서 쿠키를 열었습니다. localhost 도메인에는 제 사이트의 애널리틱스 쿠키만 있었습니다. 그런데 .facebook.com 도메인에는, 제가 아무것도 누르지 않았는데도 페이스북 쿠키 여섯 개가 들어와 있었습니다.
datr브라우저 식별. 만료 2027년fr페이스북의 주 광고 쿠키. 만료 2026년ps_l과ps_n로그인 및 세션 상태 확인sb브라우저 보안. 만료 2027년wd값이1470x835였습니다. 방문자의 화면 크기를 그대로 기록해서 페이스북에 보냅니다
여섯 개 모두 페이지 로드 시점에, 방문자가 무엇을 누르기 전에 심겼습니다. 유럽의 GDPR에서는 fr 같은 서드파티 광고 및 추적 쿠키를 사전 동의 뒤에 두도록 요구합니다. 유럽 방문자를 받는 사이트라면 이 무료 플러그인이 그 자체로 처리해야 할 의무를 하나 만들어 준다는 뜻입니다. 플러그인 사용 자체도 Meta 플랫폼 약관의 적용을 받습니다. 같은 조건에서 CollectSocials 위젯을 넣었을 때는 .facebook.com 도메인 자체가 생기지 않았고, 페이스북 쿠키도 하나도 없었습니다.
6. 네트워크에서 무엇이 들어오는가
시크릿 창에서 캐시를 끄고 네트워크 탭을 켰습니다. 플러그인만 넣은 빈 페이지가 페이스북 SDK를 로더와 sdk.js 두 부분으로 불러온 뒤, 이름이 뒤섞인 페이스북 스크립트를 줄줄이 끌어왔습니다. 하나는 130kB, 하나는 96.2kB, 하나는 68.5kB였습니다. 그중에는 404를 돌려준 페이스북 로깅 요청도 있었습니다. 제 페이지의 HTML 자체는 25ms 만에 준비를 마쳤습니다. 그 뒤로 이어진 것은 전부 페이스북 쪽 요청이었습니다.
솔직하게 덧붙일 것이 있습니다. 전송량 총합은 페이지와 세션에 따라 달라집니다. 해당 페이지가 그때 서빙하고 있는 이미지가 최적화 없이 그대로 딸려 오기 때문에, 커버나 게시물 이미지가 무거운 페이지라면 훨씬 더 많이 오게 됩니다. 그래서 총합 숫자 하나를 못 박아 적지 않겠습니다. 다만 SDK와 스크립트가 만드는 고정 비용은 어느 페이지를 붙이든 동일하고, 쿠키를 심고 Lighthouse를 막는 부분이 바로 그 고정 비용입니다.
7. Lighthouse는 점수 자체를 내지 못했습니다
모바일과 데스크톱 양쪽에서 Lighthouse를 돌렸습니다. 둘 다 NO_FCP 오류로 끝났습니다. 페이지가 아무 콘텐츠도 그리지 않았다는 뜻입니다. SDK가 워낙 비동기적으로 들어오다 보니 크롬 자체 성능 측정 도구가 First Contentful Paint를 잡지 못한 것입니다. 구글의 표준 성능 도구로 측정 자체가 되지 않는 상태입니다. 플러그인을 빼고 제목만 남긴 페이지를 다시 측정하니 정상적으로 점수가 나왔습니다. 측정을 막고 있는 것이 제 페이지가 아니라 플러그인이라는 뜻입니다. 같은 페이지, 같은 시크릿 창에 넣은 CollectSocials 피드는 정상적으로 측정 됐습니다.
말로만 드리기보다 화면으로 보시는 편이 빠를 것 같아 전 과정을 녹화했습니다. 설정 화면이 코드를 내주지 못하는 장면, 플러그인이 500px에서 멈추는 장면, Lighthouse가 오류로 끝나는 장면, 그리고 같은 페이지에서 CollectSocials 피드가 폭을 채우고 정상적으로 측정되는 장면이 차례로 나옵니다. 화면 녹화는 영어로 되어 있습니다.
8. CSS로는 아무것도 바꿀 수 없습니다
페이지에 강한 CSS를 넣어 봤습니다. 글꼴을 붉은 세리프체로 바꾸고, 배경을 보라색으로 칠하고, 모서리 둥글기와 그림자를 전부 없앴습니다. 플러그인을 둘러싼 페이지는 완전히 달라졌지만 플러그인 자체는 픽셀 하나 달라지지 않았습니다. iframe 안에서 렌더링되기 때문에 제 CSS가 닿지 않습니다. 공정하게 말씀드리면 이 격리는 의도된 것이고, 사이트 스타일시트 때문에 위젯이 깨지는 일을 막아 줍니다. 다만 뒤집으면 이런 뜻이 됩니다. 디자인을 전혀 제어할 수 없습니다. 글꼴도, 배치도, 카드 모양도 페이스북이 정한 대로 방문자에게 보이게 됩니다.
9. 모바일
아이폰 12 Pro 에뮬레이션에서는 플러그인이 화면 폭을 채웁니다. 언뜻 괜찮아 보이지만 페이지 이름이 세 줄로 어색하게 나뉘고, 소개 문구는 중간에서 잘리며, 위젯 아래에는 빈 공간이 남습니다. 같은 기기에서 CollectSocials 피드는 화면 폭을 끝까지 채웠고, 캐러셀과 목록형 레이아웃 모두 글자가 어색하게 끊기지 않았습니다.
페이스북 페이지를 실제로 홈페이지에 올린 방법
플러그인 쪽에서 막힌 뒤 CollectSocials로 같은 페이지를 붙였습니다. 앱 ID도, SDK 로더도, 위젯 때문에 뜨는 쿠키 배너도 없었습니다. 페이지를 연결하고, 레이아웃을 고르고, 코드 한 조각을 붙여넣는 순서입니다. 아래 화면은 전부 같은 2026년 6월 세션에서 남긴 것입니다.
1단계: 피드를 만듭니다
가입하면 대시보드로 들어갑니다. 페이스북 콘텐츠를 담을 피드를 새로 만듭니다. 피드는 여러 개 운영하실 수 있습니다. 대표 페이지용 하나, 캠페인이나 특정 페이지용 하나 식으로 나누는 방식이 편합니다.
2단계: 소스로 페이스북을 고릅니다
Add Source를 누르면 플랫폼 선택 화면이 나옵니다. 여기서 페이스북을 고릅니다. 페이스북 피드는 무료 요금제에서도 동작합니다. 상위 요금제로 올라가야 열리는 기능이 아닙니다. 인스타그램, 유튜브, 구글 리뷰, 틱톡, X, 핀터레스트, 텀블러, RSS, Vimeo도 있으므로 나중에 한 피드 안에서 섞어 쓰실 수 있습니다.
3단계: 페이지를 연결합니다
페이스북을 고르면 먼저 어떤 콘텐츠를 가져올지 묻고, 그다음 Meta의 OAuth 연결로 넘어갑니다. 연결 화면에는 안전한 OAuth 2.0 연결이며 비밀번호를 저장하지 않는다는 안내가 그대로 적혀 있습니다. 발급되는 것은 토큰이고, 페이스북 설정에서 언제든 해지하실 수 있습니다. 연결이 끝나면 내가 관리하는 페이지 목록이 나오고, 그중 하나를 고르면 글, 사진, 영상, 링크가 자동으로 가져와집니다. 여기서 목록에 뜨는 것은 내가 소유하거나 관리자로 있는 페이지뿐입니다. Meta 그래프 API의 규칙이며, 자기 회사 페이지를 붙이는 경우에는 오히려 그대로 원하는 동작입니다.
4단계: 보여줄 게시물을 고릅니다
가져온 게시물은 사이트로 바로 나가지 않고 Collect 화면으로 들어옵니다. 플러그인에 가장 크게 빠져 있던 것이 이 부분입니다. 앞에 세우고 싶은 게시물은 고정하고, 사이트에 어울리지 않는 것은 제외합니다. 지난 이벤트 안내나 가벼운 설문 같은 것들입니다. 소스별로 걸러 볼 수도 있고, 웹사이트 방문자를 위해 게시물 문구를 그 자리에서 다듬을 수도 있습니다.
피드를 여러 사람이 관리한다면 팀원을 초대하실 수 있습니다. 누가 어떤 게시물을 고정했고 숨겼고 수정했는지는 활동 기록에 남습니다. 페이지 플러그인에는 검토라는 개념 자체가 없습니다. 권한도, 기록도 없습니다.
5단계: 디자인을 정합니다
플러그인이 손도 대지 못하는 부분입니다. Design Studio에서 레이아웃을 고르고, 그 위에 스타일을 입힙니다. 캐러셀, 목록, 모자이크, 메이슨리, 커버플로 같은 형태가 준비되어 있고, 만들어 둔 템플릿에서 시작하실 수도 있습니다. 차이가 크게 벌어지는 쪽은 스타일입니다. 커스텀 테마를 열면 게시물 배경, 테두리, 작성자 이름 색, 본문 색, 날짜 색을 직접 지정하고 이름을 붙여 저장할 수 있습니다. 페이스북이 정한 모양이 아니라 우리 사이트의 모양으로 맞추는 작업입니다.
이 애니메이션에 대하여
Design Studio 화면을 축소해 놓은 애니메이션입니다. 왼쪽에는 레이아웃 목록과 테마 견본, 표시 항목 스위치가 있고 오른쪽에는 페이스북 피드 미리보기가 있습니다. 레이아웃과 테마 조합이 차례로 바뀔 때마다 왼쪽 목록의 선택 표시와 오른쪽 미리보기의 배치, 배경색, 카드 모양이 함께 바뀝니다. 페이지 플러그인이 한 가지 모습으로 고정되어 있는 것과 정확히 반대되는 지점입니다.
6단계: 미리 보고 코드를 받습니다
Preview로 데스크톱, 태블릿, 모바일 화면을 각각 확인한 뒤 Get Code로 코드를 받습니다. 위젯은 Shadow DOM 안에서 렌더링되므로 사이트의 CSS가 위젯 안으로 새어 들어가지도, 위젯의 CSS가 페이지로 새어 나오지도 않습니다. 폭은 어떤 크기에서도 컨테이너를 따라갑니다. 아이폰 12 Pro에서 캐러셀과 목록형 두 가지로 확인했고, 둘 다 화면 폭을 채웠습니다.
비용과 갱신 주기
페이스북 피드는 무료 요금제에서도 동작합니다. 어느 시점에 결제하지 않으면 피드가 멈추는 구조가 아닙니다. 유료 요금제로 올라가면 디자인 선택 폭이 넓어지고 가져오기 주기가 짧아집니다. 요금제 구성은 요금 페이지(영어)에서 확인하시는 편이 정확합니다.
“실시간”에 대해 정확히 적겠습니다. 이 피드는 일정 간격으로 새 게시물을 가져오는 방식이지 실시간 스트림이 아닙니다. 다시 임베드하거나 직접 새로고침할 일은 없지만, 페이스북에 올린 그 순간 사이트에 나타나는 것은 아닙니다.
공식 페이지 플러그인과 위젯, 측정 결과 비교
아래 표는 전부 2026년 6월에 직접 확인한 것입니다. 같은 공개 페이스북 페이지를 구조가 같은 빈 페이지 두 개에 넣고, 같은 개발자 도구 세션에서 측정했습니다.
| 측정 항목 | 페이스북 페이지 플러그인 | CollectSocials |
|---|---|---|
| 불러오는 스크립트 | 페이스북 SDK와 뒤따르는 스크립트 다수 | 1개 |
| 이미지 | 해당 페이지가 서빙하는 원본 그대로 | 크기에 맞게 처리된 이미지 |
| 동의 전에 심기는 페이스북 쿠키 | 6개 (datr, fr, ps_l, ps_n, sb, wd) | 0개 |
| Lighthouse 측정 | NO_FCP 오류, 점수 산출 불가 | 정상 측정 |
| 최대 폭 | 500px에서 고정 | 컨테이너 폭 그대로 |
| 창 크기 변화 대응 | 로드 시점에 한 번 계산하고 고정 | 폭에 따라 다시 배치 |
| 디자인 제어 | 불가 (iframe 격리) | 레이아웃, 템플릿, 커스텀 테마 |
| 게시물 검토 | 없음 | 고정, 제외, 필터, 문구 수정 |
| 여러 채널 결합 | 페이스북 전용 | 페이스북, 인스타그램, 유튜브, 구글 리뷰 등 |
| 비용 | 무료 | 무료로 시작 가능 (요금 페이지(영어)) |
워드프레스, Shopify, Webflow, Squarespace, Wix, Google Sites에 넣는 방법
여기까지 오면 남은 작업은 코드를 붙여넣을 위치를 찾는 것뿐입니다. 서비스별로 위치만 다릅니다.
워드프레스 (블록 편집기)
- 페이스북 피드를 넣을 페이지나 글을 엽니다.
- 블록 추가 버튼을 누르고 사용자 정의 HTML을 검색합니다.
- 사용자 정의 HTML 블록을 추가하고 받은 코드를 붙여넣습니다.
- 블록 도구 모음의 미리보기로 렌더링을 확인한 뒤 발행합니다.
이 애니메이션에 대하여
워드프레스 편집기 화면을 축소해 놓은 애니메이션입니다. 기존 문단 블록 아래에서 블록 추가 버튼이 깜빡이고, 사용자 정의 HTML 블록이 하나 생깁니다. 그 안에 스크립트 태그 한 줄이 한 글자씩 입력되고, 입력이 끝나면 코드 자리가 페이스북 표시가 붙은 게시물 격자 미리보기로 바뀐 뒤 발행되어 피드가 살아 있다는 표시가 나타납니다. 플러그인을 설치하는 단계는 나오지 않습니다. 블록 하나에 코드를 넣는 것이 전부이기 때문입니다.
위젯이 Shadow DOM 안에서 렌더링되기 때문에 테마 CSS와 충돌하지 않습니다. 블록 편집기든 페이지 빌더든 결과가 같습니다. Elementor에서는 HTML 위젯, Divi에서는 Code 모듈, Beaver Builder에서는 HTML 모듈에 같은 코드를 넣으시면 됩니다. 사이드바나 푸터처럼 사이트 전체에 두고 싶다면 외모 > 위젯에서 사용자 정의 HTML 위젯을 추가해 넣으시면 됩니다.
Shopify
- Shopify 관리자에서 온라인 스토어 > 테마 > 맞춤 설정으로 들어갑니다.
- 피드를 넣을 페이지에서 섹션 추가를 누릅니다.
- Custom Liquid를 고르고 입력란에 코드를 붙여넣습니다.
- 섹션 위치를 조정한 뒤 저장합니다.
Webflow
- Webflow 디자이너에서 프로젝트를 엽니다.
- 피드를 넣을 위치에 Embed 요소를 끌어다 놓습니다.
- 코드 입력란에 받은 코드를 붙여넣고 편집기를 닫습니다.
- 사이트를 게시하면 실제 화면에서 확인하실 수 있습니다.
Embed 요소와 코드 블록의 차이, 반응형 중단점 처리까지 포함한 전체 과정은 Webflow에 소셜 피드 넣기 (영어)에 정리해 두었습니다.
Squarespace
- 페이지를 편집 상태로 열고 블록을 추가할 위치를 누릅니다.
- 코드 블록을 고르고 받은 코드를 붙여넣습니다. 유형은 HTML로 둡니다.
- 적용한 뒤 페이지를 저장합니다.
Wix
- Wix 편집기에서 추가 > 임베드 및 소셜 > 사용자 지정 임베드 > 위젯 임베드를 고릅니다. Wix Studio에서는 Embed 요소를 사용합니다.
- 요소의 코드 편집기를 열고 코드를 붙여넣은 뒤 적용합니다.
- 크기와 위치를 잡고 게시합니다.
Wix에는 자체 규칙이 몇 가지 더 있습니다. 무료 사이트에서도 HTML 임베드는 동작하고, ADI로 만든 사이트는 표준 편집기로 전환해야 하며, 모바일 레이아웃은 따로 설정합니다. 화면과 함께 정리한 내용은 Wix에 페이스북 피드 넣기 (영어)에 있습니다.
Google Sites
- Google Sites 편집기에서 삽입 > 삽입을 고릅니다.
- 삽입 코드 탭에 코드를 붙여넣고 다음을 눌러 추가합니다.
- 크기를 조정한 뒤 게시합니다.
같은 코드가 HubSpot의 사용자 정의 모듈이나 직접 작성한 정적 HTML 페이지에서도 동작합니다. 사용자 정의 HTML을 허용하는 곳이면 됩니다. 국내 사이트 빌더나 블로그 서비스 중에는 본문에 스크립트 태그를 넣지 못하게 막아 둔 곳이 있습니다. 그런 경우에는 본문 대신 사용자 정의 HTML을 허용하는 페이지 영역에 넣으시면 됩니다. 사용 중인 서비스가 어느 쪽인지는 빈 페이지에 코드를 한 번 넣어 보시면 바로 확인됩니다.
페이스북 영상만 모아서 보여주기
페이지에 영상이 많다면 텍스트 타임라인에 섞어 두는 대신 영상만 모아 보여주는 편이 낫습니다. 앞에서 보신 것처럼 페이지 플러그인에서는 영상이 그 자리에서 재생되지 않고, 누르면 페이스북으로 이동합니다.
공식 단일 영상 임베드. 페이스북은 영상 하나를 임베드하는 기능은 제공합니다. 영상 게시물을 열고 점 세 개 메뉴에서 Embed를 고른 뒤 나오는 코드를 붙여넣는 방식입니다. 소개 페이지에 후기 영상 하나를 두는 정도라면 이것으로 충분합니다. 다만 한 번에 한 개이고, 디자인은 페이스북이 정한 그대로이며, 다른 영상으로 바꾸려면 코드를 직접 고쳐야 합니다. 여러 영상을 자동으로 채워 주는 갤러리는 만들 수 없습니다.
영상만 남긴 피드. 페이지를 한 번 연결한 뒤 Collect 화면에서 영상 게시물만 남기면 타임라인이 아니라 영상 갤러리처럼 보입니다. 캐러셀이나 슬라이더 레이아웃이 잘 맞습니다. 방문자가 스크롤 없이 넘겨 볼 수 있기 때문입니다. 이 방식에는 페이지에 올린 모든 종류의 영상이 들어옵니다.
- 페이지에 직접 올린 영상. 제품 소개, 사용법 안내, 공지 영상.
- 라이브 방송 녹화본. 방송이 끝나면 일반 게시물로 남으므로, 놓친 방문자에게 보여줄 자리가 생깁니다.
- 릴스. 세로형 짧은 영상을 웹사이트 방문자에게도 보여줄 수 있습니다.
- 반응이 붙은 영상. 좋아요, 댓글, 공유 수가 게시물과 함께 따라오므로 일반 영상 플레이어에는 없는 신뢰 근거가 됩니다.
피드를 어디에 둘 것인가
같은 피드라도 어디에 두느냐에 따라 효과가 갈립니다.
이 애니메이션에 대하여
브라우저 창 모형 안에 홈페이지 영역과 회사 소개, 제품 페이지 블록이 그려져 있고, 피드를 놓을 만한 자리 세 곳이 차례로 나타나 하나씩 강조됩니다. 강조될 때마다 아래에 그 자리를 고르는 이유가 한 줄로 바뀌어 표시됩니다. 첫 화면 아래의 홈페이지, 실제 사용 장면을 보여주는 제품 페이지, 브랜드를 사람처럼 보이게 하는 회사 소개 페이지 순서 입니다.
홈페이지의 첫 화면 아래. 우리가 무엇을 하는 곳인지 먼저 말한 다음이어야 합니다. 페이지 플러그인의 500px 제한이 가장 크게 걸리는 자리이기도 합니다. 넓은 영역 왼쪽에 좁은 상자만 놓이기 때문입니다.
회사 소개 페이지. 다듬은 소개 문구가 만들어 내지 못하는 분위기를 실제 게시물이 만들어 줍니다.
제품이나 서비스 페이지. 그 제품을 쓰는 모습과 고객 이야기가 담긴 게시물은, 구매를 고민하는 방문자가 속으로 묻고 있는 질문에 대한 답이 됩니다.
페이스북 하나로 끝나지 않습니다
페이지 플러그인과 가장 크게 갈라지는 지점입니다. 피드 하나에 페이스북과 인스타그램 피드, 유튜브 영상, X 타임라인을 함께 담을 수 있습니다. 최근 페이스북 공지 옆에 인스타그램 사진과 유튜브 영상이 나란히 놓이는 편이, 한 채널만 보여주는 것보다 훨씬 설득력 있습니다.
행사장 화면이나 사이트 전체를 채우는 소셜 월처럼 더 큰 것을 만드실 계획이라면 어떤 사이트에든 소셜 월 넣기 (영어)를, 짧은 영상 중심이라면 틱톡 피드 넣기 (영어)를 참고하시기 바랍니다.
플러그인과 위젯 중 무엇을 쓸 것인가
페이스북 페이지를 홈페이지에 붙이는 일은 원래 간단해야 하고, 공식 페이지 플러그인은 실제로 간단합니다. 다만 500px 상자와 페이스북이 정한 디자인, 동의 전에 심기는 쿠키 여섯 개, 검토 기능 없음, Lighthouse 측정 불가를 전부 받아들이는 조건에서 그렇습니다. 사이드바에 작은 상자 하나를 두는 용도라면 나쁘지 않은 거래입니다.
그러나 폭을 채워야 하거나, 사이트 디자인에 맞춰야 하거나, 화면 크기에 따라 다시 배치되어야 하거나, 보여줄 게시물을 고르고 싶거나, 인스타그램과 유튜브를 함께 묶고 싶다면 제어할 수 있는 도구가 필요합니다. 같은 조건에서 둘을 나란히 돌려 본 뒤 저는 CollectSocials를 쓰고 있습니다. 페이스북 쿠키를 하나도 심지 않았고, 플러그인이 점수조차 내지 못한 자리에서 정상적으로 측정됐으며, 무엇보다 페이스북을 들여다보는 창이 아니라 제 사이트의 일부처럼 보이기 때문입니다. 페이스북 피드는 무료 요금제에서도 동작합니다.
CollectSocials로 페이스북 피드를 만들어 보세요
500px 상자에 맞춰 디자인하실 필요가 없습니다. 페이지를 연결하고, 보여줄 게시물을 고르고, 코드 한 조각을 붙여넣기만 하면 됩니다.
자주 묻는 질문
페이스북 페이지 플러그인이 홈페이지에 표시되지 않습니다
검증하면서 그대로 재현된 원인이 네 가지 있습니다. 첫째, 설정 화면이 코드를 만들어 주지 않는 경우입니다. 개인 프로필이나 권한이 제한된 페이지에서는 Get Code 버튼이 조용히 아무 일도 하지 않거나 로딩 표시만 계속 돌았습니다. 둘째, 폭이 500px에서 고정되어 있어 넓은 영역을 채우지 못하는 경우입니다. 셋째, 로드 시점에 폭을 한 번만 계산하기 때문에 창 크기가 바뀌면 그대로 깨집니다. 넷째, 필요한 페이스북 SDK가 로드되지 않았거나 동의 배너나 쿠키 도구에 막힌 경우입니다.
플러그인이 반응형으로 동작하지 않습니다
Meta 문서가 로드 이후의 박스 모델 변화에는 반응하지 않는다고 직접 적어 두었습니다. 확인해 보니 1179px에서는 처음 계산한 좁은 상태로 멈춰 있었고, 184px에서는 최소 폭까지 눌렸으며, 83px에서는 최소 폭 아래로 내려가지 않아 화면을 넘치면서 읽을 수 없게 됐습니다. 폭에 맞춰 다시 배치되는 피드가 필요하시다면 이 방식으로는 해결되지 않습니다.
페이스북 임베드가 방문자에게 쿠키를 심나요?
심습니다. 플러그인을 로드하는 것만으로 .facebook.com 도메인에 쿠키 여섯 개(datr, fr, ps_l, ps_n, sb, wd)가 들어왔습니다. 방문자가 아무것도 누르기 전입니다. 유럽의 GDPR에서는 fr 같은 서드파티 광고 및 추적 쿠키를 사전 동의 뒤에 두도록 요구하므로, 유럽 방문자를 받는 사이트라면 처리해야 할 의무가 하나 생깁니다. 같은 조건에서 CollectSocials 위젯은 .facebook.com 도메인 자체를 만들지 않았습니다.
페이스북 페이지 플러그인은 무료인가요?
무료입니다. 대신 앞에서 확인한 것들을 함께 받게 됩니다. 시크릿 창에서 확장 프로그램 없이 열었을 때 방문자가 아무것도 누르지 않았는데도 페이스북 쿠키 여섯 개가 심겼고, Lighthouse는 점수를 내지 못했으며, 폭은 500px에서 멈추고 디자인은 바꿀 수 없습니다.
임베드 코드 생성기도 무료인가요?
무료입니다. 다만 2026년 6월 검증 당시에는 잘 동작하지 않았습니다. 개인 프로필과 권한이 제한된 페이지에서는 Get Code가 조용히 실패했고, 정상 주소를 넣었을 때는 창만 열린 채 로딩 표시가 계속 돌았습니다. 코드가 나오는 경우 그 코드는 무료로 쓰실 수 있고, 대신 이 글에서 다룬 성능과 쿠키 조건이 따라옵니다.
페이스북 페이지 플러그인이 사이트를 느리게 만드나요?
검증한 범위에서는 그렇습니다. 플러그인만 넣은 빈 페이지가 페이스북 SDK를 두 부분으로 불러온 뒤 이름이 뒤섞인 스크립트를 줄줄이 끌어왔고, 그중에는 404를 돌려준 로깅 요청도 있었습니다. 제 페이지의 HTML은 25ms 만에 준비를 마쳤고 그 뒤는 전부 페이스북 쪽 요청이었습니다. 전송량 총합은 페이지가 서빙하는 이미지에 따라 달라지므로 숫자 하나로 적지 않겠습니다. Lighthouse는 First Contentful Paint조차 잡지 못했습니다. 같은 페이지에 넣은 CollectSocials 피드는 정상적으로 측정됐습니다.
개인 계정도 홈페이지에 피드로 넣을 수 있나요?
피드 형태로는 불가능합니다. 공식 페이지 플러그인은 페이스북 페이지만 지원하고(개인 프로필 주소를 넣으면 조용히 실패했습니다), CollectSocials 같은 도구는 내가 소유하거나 관리하는 페이지만 연결합니다. Meta 그래프 API의 개인정보 관련 규칙입니다. 사업용 사이트에 피드를 두실 계획이라면 페이지를 쓰셔야 합니다.
HTML에 직접 넣으려면 어떤 코드가 필요한가요?
공식 플러그인은 페이스북 자바스크립트 SDK를 한 번 로드한 뒤, 페이지 주소를 data-href에 넣은 <div class="fb-page"> 요소를 두는 구조입니다. 전체 코드는 위 본문에 있습니다. 위젯 방식은 원하는 위치에 스크립트 태그 한 줄과 컨테이너 요소 하나를 붙여넣는 것이 전부이고, SDK도 fb-page 마크업도 필요 없으며 500px 제한도 없습니다.
워드프레스, Shopify, Wix에는 어떻게 넣나요?
워드프레스는 사용자 정의 HTML 블록에, Shopify는 온라인 스토어 > 테마 > 맞춤 설정에서 추가한 Custom Liquid 섹션에, Wix는 임베드 요소에 코드를 붙여넣습니다. 별도 플러그인이나 앱을 설치할 필요는 없습니다. 자세한 순서는 위의 서비스별 안내에 있습니다.
페이스북 영상도 넣을 수 있나요?
페이스북에는 영상 하나짜리 공식 임베드가 있습니다. 영상 게시물의 점 세 개 메뉴에서 Embed를 고르는 방식이며, 한 번에 한 개이고 디자인은 고정, 교체는 코드 수정입니다. 여러 영상을 자동으로 채우는 갤러리가 필요하다면 페이지를 연결한 뒤 영상 게시물만 남겨 캐러셀이나 슬라이더로 보여주는 방식이 맞습니다.
피드는 얼마나 자주 갱신되나요?
일정 간격으로 새 게시물을 가져오는 방식입니다. 다시 임베드하거나 직접 새로고침할 일은 없지만 실시간 스트림은 아닙니다.
검증 환경과 참고 자료
2026년 6월, 확장 프로그램을 모두 끈 크롬 시크릿 창에서 캐시를 끄고 검증했습니다. 같은 공개 페이스북 페이지를 구조가 동일한 빈 페이지 두 개에 각각 넣었고, 페이지는 localhost:8080에서 서빙했습니다. 쿠키와 네트워크는 개발자 도구에서 직접 확인했습니다. Meta는 플러그인과 API 동작을 자주 바꾸므로, 중요한 판단의 근거로 삼기 전에 다시 확인해 보시기 바랍니다.
- 페이지 플러그인 문서 (Meta, 영어)
- 페이스북 자바스크립트 SDK 시작하기 (Meta, 영어)
- 그래프 API 문서 (Meta, 영어)
- Meta 플랫폼 약관 (영어)
- 이 글의 영어 원문
직접 해 보시겠다면 무료 계정을 만들어 위의 6단계를 그대로 따라가 보시기 바랍니다.