PHP-Cmd 명령어

PHP

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

로빈아빠

https://cmd.kr/php/882 URL이 복사되었습니다.

4,613 0 2015.04.21 20:19

본문

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

2011/02/06 20:41 | 잡동지식

(긴 글이 짜증나시는 분들은 포스팅 가장 하단의 '아해의 3줄요약'만 보셔도 됩니다)

자신의 블로그 또는 홈페이지의 특정 페이지에 페이스북 공유하기 버튼을 달고 싶으면 어떻게 해야 할까?
이에 관한 소스들이 공개 되어있으며 '좋아요', '공유하기' 등 자신이 원하는 버튼을 찾아서 입맛대로 달 수 있다.

예를 들어서 위 소스를 자신의 블로그에 삽입하면 아래와 같은 버튼이 생성될 것이다. (물론 HTML 모드에서 붙여넣기 할 것)

그리고 위 버튼을 클릭하면 아래와 같은 화면이 팝업창으로 나타난다.

위 창에서 최종으로 '공유하기'를 클릭하면, (클릭한 사람의) 페이스북에는 아래와 같은 게시글이 등록될 것이다.

즉, 페이스북 공유하기 버튼소스만 삽입하게 되면, 자동으로 해당 페이지의 이미지를 썸네일 형식으로 보여주면서 제목과 주소까지 자동으로 공유할 수 있게 된다.

하지만, 문제는 이렇게 자동으로 설정되도록 한 기능들이 문제를 일으키는 경우가 있다는 것이다. 특히, 썸네일 이미지가 보여지지 않는 경우가 가끔 발생하게 된다. 세부적으로 살표보면 팝업창에서 이미지가 표시되지 않는 경우와, 팝업창에서는 나타나지만 실제 공유를 하게 되면 페이스북에서 표시되지 않는 2가지 경우가 있다. 그리고 이 두가지 경우 모두 정확한 원인은 (내가 알기로) 밝혀지진 않았으나 이미지의 사이즈가 가장 큰 원인으로 거론되고는 한다.

The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w/h, h/w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126/39 = 3.23). Images will be resized proportionally.

위 내용은 페이스북에서 권장하는 썸네일 이미지의 사이즈에 관한 내용이다. 하지만 이도 정확하지 않은 것이 분명히 이러한 권장사이즈를 벗어나는 이미지들도 자동으로 검색 되는 경우가 많다는 것이다. 블로그 포스팅이나 웹페이지를 제작할 때 페이스북의 공유하기 버튼을 생각하며 이미지 사이즈를 조정한다는 것도 말이 안될 뿐더러로, 실제로 이러한 경우가 자주 발생하는 것은 아니기 때문에 재수 없으면 겪게 되는 복불복이라고 해야 할까?ㅋ
어쩃든 이런 경우가 발생한다면 별것 아닌것 같으면서도 은근히 신경쓰이게 되는데...특히 기업의 웹페이지나 프로모션 랜딩페이지를 제작할 때 썸네일 이미지가 뜨지 않는다면 매우 난감할 것이다.

서론이 너무 길었는데,
그렇다면 페이스북 공유하기에서 썸네일 이미지가 나타나지 않는다면 어떻게 해야 할까?

아주 간단하게, 특정 이미지를 강제로 보여지도록 하는 아래의 소스를 삽입하면 된다. HTML이나 ASP 등의 웹페이지상이라면 가장 상단에 있는 <head></head> 사이에 삽입하면 되고, 일반 블로그에 적용하려면 그냥 포스팅 하단에 삽입해도 된다.

.
.
.
.
실은 여기까지가 해외사이트나 국내 사이트 등에서 공개된 수많은 해결책의 전말이다..... 하지만 현실은 어떨까? 안타깝게도 위 소스를 삽입해도 해결되지 않는 경우가 대다수이다. 페이스북의 공유하기 기능은, 한 번 인식했던 썸네일 이미지만을 기억하도록 프로그래밍 되어 있다. 즉, 아무리 소스를 새로 삽입하고, 기존의 이미지 사이즈를 바꾸어봤자 가장 처음에 인식했던 내용만을 기억하기 때문에 계속해서 이미지가 보여지지 않게 되는 것이다.

http://developers.facebook.com/tools/lint/

해결책은 너무나 간단하다. 위 사이트를 들어가서 자신이 공유하고자 하는 페이지 주소를 입력하고 'Lint'를 클릭해보자.

그럼 위와 같이 해당페이지의 '페이스북 공유하기'에 관한 내용이 상세히 표시 된다. 그리고 신기하게도 이 과정을 거치고 나서야 비로소 자신이 수정했던 썸네일 이미지 소스를 인식하게 된다. 위 페이지에 이러한 내용이 전혀 언급 되지 않았으니, 페이스북에서도 의도한 바는 아닌 것으로 사료된다. 내가 이 망할놈의 썸네일 이미지때문에 골머리를 썩고 있을 때, 개발자 출신의 P부장님께서 해외사이트를 뒤져가며 간신히 알아내신 정보이다. 추가로 아래와 같은 소스를 삽입하면 이미지 뿐만 아니라, 공유하는 제목이나 내용도 설정할 수 있다. 위에서부터 제목, 내용, 이미지를 설정하는 소스이다.

아해의 3줄 요약

1. 페이스북 공유하기에서 썸네일 이미지가 나타나지 않는 개떡같은 상황이 발생한다.

2. 아래 소스를 삽입하고 새로운 이미지 경로를 기입한다. (이미지의 사이즈는 130x110 이하의 사이즈 권장)
<link rel="image_src" href="이미지 경로" />

3. 아래 사이트에 들어가서 문제가 발생한 사이트 주소를 입력한다.
http://developers.facebook.com/tools/lint/

** 아해는 개발자 출신이 아니므로 이런 지식은 굉장히 얕은 것이 사실입니다. 나름 부족한 독해 능력으로 해외 사이트 곳곳을 검색하고 지인의 도움을 받아 작성한 내용이므로 혹시라도 사실과 다른 내용이나 표현이 있다면 알려주세요.

2011/12/20 추가
페이스북에 공유하거나, 좋아요를 누를 경우 아래 이미지처럼 본문 내용이 숫자로 표시되는 경우가 있다. 이는 본문의 첫 시작이 텍스트가 아닌, 링크나 이미지로 된 경우에 발생하며, 이를 해결하기 위해서는 위에서 설명한 <meta name="description" content="Description Here" /> 를 강제로 삽입하여 수정할 수 있다. (완벽한 해결책은 아닌듯..이렇게 해서 해결 될 때도 있지만 아닐 때도 있다..)

2011/12/20 추가
위에서 설명한 메타 태크 소스가 새로 변경되었다. 기존 소스도 정상적으로 작동하지만, 혹시 모를 경우를 대비해서 아래 소스들도 알아두는 것이 좋을 것 같다.

2011/12/20 추가
페이스북에서 제공하는 좋아요나 공유하기 소스에는 여러 버전이 있는데 이 중 FBML로 만든 소스는 위의 메타태그들이 제대로 작동하지 않을 수 있다. 기왕이면 HTML5 모드로 퍼오는 것을 추천한다.

2012/2/20 추가

많은 분들이 이 글을 보고 해결했다고 답변을 주셔서 기분이 좋았다. 하지만 이 방법을 총동원해도 해결되지 않는 개떡같은 상황이 발생할 수도 있다. 안타깝게도 내가 관여하고 있는 한 기업 블로그가 그러는데, 이 방법 x 저 방법 x 제타함수 별 짓을 다해도 기존 이미지가 바뀌지 않는다. 시간 날 때마다 뭐가 문젠 지 틈틈히 봤는데 몇 개월째 못 찾아냈다. 더욱 황당한 건 해당 블로그의 스킨 소스를 그대로 가져와서 테스트로 만들어본 신생 블로그는 이상 없이 작동 한다는 것이다. 결국 버그로 잠정 결론 내리긴 했는데, 어쨋든 대부분은 본문에 나온 방법으로 해결 할 수 있다...ㅠ_ㅠ

댓글목록

등록된 댓글이 없습니다.

인기검색어

본문

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

관련링크

댓글목록

Search