Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

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

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

해결책은,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 코드를 쓰는 게 낫다고 한다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (3개)

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

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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다