[WP/FB] 워드프레스에서 facebook 공유 이미지 고정하는 방법

얼마 전 facebook 플러그인을 이용해 timeline에 포스트를 공유해봤습니다. 공유가 잘된다 싶더니 원하지 않는 사진이 포스트와 함께 facebook에 게시가 되는 현상이 발생했습니다. 개발에 관한 포스트 내용인데 우리 아이 사진이 타이틀로 올라오는 문제가 생긴거죠.

그래서 facebook 디버그 페이지에서 점검을 해보니 웹사이트 메타 데이터에 이미지가 없어 facebook에서 사용가능한 사진을 무작위로 선택해 타이틀로 사용되고 있었습니다. 블로그 로고가 있는데 불구하고 사용이 안되고 있었던 것입니다.

 

이런 경우 점검 방법은 아래와 같습니다.

1. https://developers.facebook.com/tools/debug/ 에서 자신의 URL을 입력

2. Object Properties 의 og:image 가 정상적으로 나오는지 확인

3. 정상적으로 나오지 않는다면 Share Preview 의 나열된 이미지로 facebook 대표 이미지가 사용되게 됩니다.

 

og:image 설정 방법

1. 웹사이트 상단 <head>~</head> 사이에 아래 메타 태그를 넣어주고 저장합니다.

2. 위에서 설명드린 점검 방법에 따라 다시 한번 확인합니다.

 

주의 사항

1. content 안에 이미지가 외부에서 정상적으로 노출되는 이미지인지 경로를 웹브라우저 주소창에 입력해 확인 해봅니다.

2. 이미지는 최소 200px * 200px로 되어있어야 합니다.

3. 워드프레스의 경우 WP Super Cache와 같은 페이지 캐싱 플러그인의 캐시 내용을 초기화(삭제) 시켜주셔야 합니다.

 

[WordPress] Facebook Social plugin ‘OAuthException’ 오류 해결 방법

facebook-wordpress

누가 워드프레스면 10분 완성이라고 노래를 부르던가.

워드프레스의 페이스북 플러그인을 통해 포스팅 글을 자동으로 Publish 시켜 사용하고 있던 중 어느 날 아래와 같은 에러 메세지를 뿜어내며 페이스북에 게시가 되지 않았습니다.

og:type of ‘website’. The property ‘article’ requires an object of og:type ‘article’. “,”type”:”OAuthException”

이건 무슨 호랑말코같은 소리인지 구글느님에게 도움을 청해봐도 명쾌한 답변을 찾기 힘들었습니다. 설상가상 국내 검색자료는 거의 전무한 수준..

OAuthException이라면 Open Graph에 문제가 있는 것으로 추측(O로 시작해서?)이 되어 워드프레스 페북 플러그인 설정과 페이스북 App 설정을 보기 시작했습니다. 우선 워드프레스 설정 페이지에는 explanation for permissions 항목에 설정이 안되어있다는 문구와 함께 빨간색으로 저를 압박하더군요. 그래서 페이스북 App 설정 페이지로 이동하였습니다.

역시 explanation for permissions 란이 텅 비어있더군요. (그럼 여태 어떻게 됐던거지. 업데이트 되면서 정책이 바뀐건지..) 이제 문제를 찾았습니다. 찾았… 근데 여기에 뭘 넣으라는거야 ㅠㅠ

이것도 구글느님에게 도움을 청했으나 혹시나가 역시나라고 명쾌한 답변은 찾아 볼 수 없었습니다. 그러던 중 누군가 차갑게 던진 URL하나가 눈에 들어왔습니다. 페북 permission에 대한 레퍼런스 URL!!

https://developers.facebook.com/docs/reference/login/
후광이 비추는 이 영롱한 URL

기대를 품고 봤습니다. 역시나 기대를 저버리지 않고 친절하게 설명이 되어있었습니다. 알아듣지도 못하는 영문페이지에서 본능적으로 Open Graph Permissions 클릭!

이곳엔 제가 찾던 것이 있었습니다. 친절하게도 “얘네 중에 맘에 드는 아이로 쓰게나”
기분 좋게 publish_actions에 커서를 대고 컨트롤 씨! 그리고 explanation for permissions란에 컨트롤 브이!

다시 워드프레스 플러그인 설정 페이지로 돌아오니 빨간 경고는 사라지고 저장시킨 publish_actions 명령이 나옵니다.
그리고 다시 글을 작성해서 올리니 정상적으로 페북에 글이 등록되었습니다!