페이스북 공유/좋아요 했을 때 이미지 지정해 주기

페이스북 공유하기나 좋아요를 눌렀을 때, 검색 버튼 옆에 달린 삼각형 불릿이 이미지 썸네일로 들어간다면? 폼이 안 난다.

해결책은,head에 페이스북용 정보를 삽입해 주는 것이다.

단, 페이스북은 한 번 퍼간 페이지는 캐시에 저장하므로 이미 한 번 공유된 것에는 적용이 안 된다. 적용하려면 Facebook Debugger 에 가서 URL을 한 번 입력해 주면 된다고 한다.

참고 링크

아래 두 링크에 자세한 설명이 나와 있으니 참고하면 된다. 내가 쓴 것도 모두 아래 링크를 참고한 것이다.

▶페이스북 공유하기, 썸네일 이미지를 마음대로 설정해보자

▶페이스북 공유하기에 엉뚱한 글, 그림이 들어간다면

페이스북용 정보 태그

<meta property="og:title" content="제목표시"/>
<meta property="og:type" content="사이트 종류"/>
<meta property="og:image" content="이미지경로"/>
<meta property="og:site_name" content="사이트 이름"/>
<meta property="fb:app_id" content="앱아이디"/>
<meta property="og:url" content="표시하고싶은URL"/>
<meta property="og:description" content="본문내용"/>

위 코드는 ‘페이스북 공유하기, 썸네일 이미지를 마음대로 설정해보자‘에서 퍼온 것이다.

HTML5 코드를 쓰라고 하더라

페이스북 ‘좋아요’ 코드는 FBML 코드와 HTML5 코드가 있다. 이 중 FBML 코드를 사용하면 위에서 제공해 준 것대로 작동하지 않는 경우가 있다고 한다. 따라서 좋아요 버튼은 HTML5 코드를 쓰는 게 낫다고 한다.

카테고리 글 목록 👉

대표글

“페이스북 공유/좋아요 했을 때 이미지 지정해 주기”에 대한 3개의 응답

  1. 좋은글 잘보았습니다.^^
    한가지 궁금한 점이 있는데.
    게시물 뷰가 되는 리스트 형태의 게시판에서
    각각의 좋아요 버튼을 클릭할 경우 각각의 썸네일 및 제목,내용을 지정해 줄수 있을까요?ㅎ
    아시면 답변 좀 부탁드려요 ^^

    1. 어차피 각각의 URL을 가질 거 아닙니까? 그러면 페이스북은 아마 그 URL을 긁을 것입니다. 리스트 페이지를 긁지 않고, 좋아요 버튼이 가리키고 있는 URL을 긁는다는 소리죠. 그렇다면 역시 제 글에 있는 바대로 해당 페이지에 썸네일과 제목, 내용을 지정해 주시면 됩니다. 즉, 본문에 있는 방법을 그대로 사용하시면 될 것 같습니다.

  2. […] 사이즈와 포맷의 파비콘을 제공했다. 페이스북용 공유 이미지와 펌링크를 제공했다. 캐노니컬 태그를 제공했다. 즉, 다양한 메타 정보 제공을 위해 […]

댓글 남기기