Media Log




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

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

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">공유하기</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>


예를 들어서 위 소스를 자신의 블로그에 삽입하면 아래와 같은 버튼이 생성될 것이다. (물론 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> 사이에 삽입하면 되고, 일반 블로그에 적용하려면 그냥 포스팅 하단에 삽입해도 된다.
<link rel="image_src" href="이미지 경로" />
.
.
.
.

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

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



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


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




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

<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="본문내용"/>      


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

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


 
Facebook Comment
  1. 이전 댓글 더보기
  2. BlogIcon 팥빙산 at 2011.05.07 17:08 [edit/del]

    찾고 있던 정보였습니다.
    알기 쉽게 설명해 주셔서 고맙습니다.

    Reply
  3. 멋져요 at 2011.05.19 16:19 [edit/del]

    와 정말 잘봣어요ㅎㅎ

    감사합니다

    Reply
  4. 잡초 at 2011.06.16 15:35 [edit/del]

    제가 찾던 거 군요. 훌륭합니다~
    대부분 링크하는 법에대해서만 나왔지 썸네일 이미지 문제에 대한 글은 없더군요.
    근데 좋아요 버튼을 눌렀을 때 FB에서 이미지를 땡겨오는 기준이 뭔가 다른 것 같습니다.
    그냥 안 되는건지는 모르겠지만 위의 방법들을 다 동원해도 좋아요 버튼은 계혹 페이지 넘김 버튼 하나만 땡겨오고 있습니다...(심지어 이미지를 삭제해도 말이죠;;)

    Reply
    • BlogIcon 제1아해 at 2011.10.18 19:44 신고 [edit/del]

      좋아요 버튼의 경우, 제가 작성한 글로 쉽게 해결이 안되는 것 같습니다. 검색하다 보니 다른 방법이 있는 것 같지만, 포스팅 하지 않은 것은 이 방법 역시 완벽하지가 않더라구요. 저도 지금 좋아요 버튼에 대한 방식을 찾는 중입니다.( ..)

  5. BlogIcon colorfilter at 2011.08.28 13:55 [edit/del]

    오옷 감사합니다..저도 이것때문에 골머리를 썪었었는데.. 디버거 사이트에서 제 사이트 치니까 바로되네요
    근데 한가지 섬네이 말고 description에 1.2.3.4....이런식으로 포스트 내용말고 숫자가 나오는 이유는 무엇인가요?

    Reply
  6. dudn04 at 2011.10.18 16:58 [edit/del]

    덕분에 고민하던것 해결했습니다. 감사드려요^^*

    Reply
  7. Shin at 2011.11.04 11:07 [edit/del]

    안녕하세요 ^^
    혹시.. 하나의 이미지가 아니라 어떠한 테스트(예를 들어, 심리테스트)에 따른 개별 이미지 또는 메인 코멘트가 다르게...도 가능한가요?

    Reply
    • BlogIcon 제1아해 at 2011.11.04 17:19 신고 [edit/del]

      테스트라는 것이 정확히 무엇을 의미하는 지 모르겠습니다만, 본문 내에 여러 개의 좋아요 버튼이 있다면 각각의 버튼마다 다르게도 적용할 수 있을겁니다. 그에 관한 자세한 내용까지는 확실히 모르겠네요 ( ..)

  8. 개발자 at 2011.11.11 22:56 [edit/del]

    개발자 입니다만,,, 한수 배우고 갑니다 ㅎㅎㅎㅎ

    정말 속시원이 모든게 다 해결되었습니다 ( 특히 이미지랑 lint ,,,, )

    Reply
  9. at 2011.12.05 20:21 [edit/del]

    비밀댓글입니다

    Reply
  10. 안돼요 at 2011.12.20 18:18 [edit/del]

    http://developers.facebook.com/tools/lint/
    여기 접속하면

    http://developers.facebook.com/tools/debug
    으로 리다이렉트됩니다.

    아무리 들어가도 포스팅내용과 다르네요..변경된걸까요??
    아니면 다른 방법이 생긴걸까요??

    Reply
    • BlogIcon 제1아해 at 2011.12.21 16:02 신고 [edit/del]

      URL 및 명칭만 변경되었지 기능은 똑같습니다.

    • 돼요 at 2011.12.21 16:11 [edit/del]

      답변 ㄳ합니다.

      테스트 해보니 URL을 facebook이 조회하면서
      바로 캐싱을 하는군요
      수동으로 정보를 입력해야 하는줄알고
      계속 그걸 찾았나 봅니다.

      좋은 정보 ㄳ합니다.
      많은 도움 되었어요.

  11. 미스터전 at 2012.03.16 13:58 [edit/del]

    감사합니다. 고민이 한방에 해결됬습니다. ㅎㅎ
    출처 남기고 퍼가도 될까요?

    Reply
  12. 페북좋아요 at 2012.04.19 17:25 [edit/del]

    글 잘봤습니다 ^^
    게시물이 블로그형태의 뷰에서는 '좋아요'의 썸네일은 어떻게 해야할지 난감하네용..
    각 게시물마다 메타태그 또는 상단 html 을 넣어주니 제일 마지막 정보가 입력되는 거 같습니다.
    혹시 아시면 답변 좀 부탁드리겠습니다.^^

    Reply
  13. at 2012.07.11 18:20 [edit/del]

    비밀댓글입니다

    Reply
  14. capu1004 at 2012.09.06 12:02 [edit/del]

    http://www.therykers.net/?p=37

    이 사이트도 참고해보시면 좋을 것 같습니다.

    <a title="Share this article/post/whatever on Facebook"
    href="http://www.facebook.com/sharer.php?
    s=100
    &p[url]=the url you want to share
    &p[images][0]=the image you want to share
    &p[title]=the title you want to share
    &p[summary]=the description/summary you want to share"
    target="_blank">
    <img src="your/path/to/facebook-icon.png"
    alt="Share on Facebook" />
    </a>

    이걸 테스트 해보았는데 잘 작동하더군요

    Reply
  15. 알랑 at 2012.09.07 15:48 [edit/del]

    (물론 HTML 모드에서 붙여넣기 할 것) 공유하기에서 말씀하셨는데요 페이스북에 html모드가 있어요? 개발자페이지 말씀하시는건가요? ㅠ 너무 헷갈리고 어렵네요~ 답변부탁드려요!

    Reply
  16. BlogIcon isabel marant dicker boot at 2012.12.08 14:52 [edit/del]

    프로그래밍] iOS5 에서 tableView:viewForHeaderInSection: 구현시 주의할점 ! qwertyrtyewrasfd

    Reply
  17. BlogIcon 소명달빛 at 2015.02.20 18:12 신고 [edit/del]

    좋은 정보 감사합니다^^
    덕분에 문제가 해결되었어요~

    Reply
  18. BlogIcon 노마딬 at 2015.02.23 11:18 신고 [edit/del]

    안녕하세요 도움 많이 되었습니다 ㅋ
    어제 html에서 "/" 를 "/catagory"로 다 바꿔버렸더니
    페북 링크에 썸네일이 안뜨더군요.
    다시 찾아서 "/"로 바꿨더니 정상작동합니다.
    참고요 감사

    Reply
  19. 질문드립니다 at 2016.07.22 15:52 [edit/del]

    페이스북 공유를 눌렀더니 디버깅툴에선 타이틀이나 설명, 썸네일들이 정상으로나오나 실제 공유에선 meta property og 정보가 아닌 meta name 의 정보를 불러옵니다. 뭐가문제일까요??

    Reply
  20. 감사합니다, at 2016.07.29 15:49 [edit/del]

    덕분에 해결하는데 많은 도움이 되었습니다~
    위에 방법으로 다 해봤는데도 이미지가 변경이 안되서 이미지 용량 자체를 줄였더니 잘 나옵니다.ㅠ
    간편하게 이미지 용량 줄이는 사이트 알려드립니다. https://tinypng.com/
    감사합니다.

    Reply

submit