SNS 페이스북 Like 버튼, 개발자 입장에서 생각해 볼 사항

아래 그림과 같이 Like 버튼을 다는 것은 페이스북 개발자 사이트 가서 한 번만 체크해 오면,
그 다음부터는 코드를 수정해서 사용하면 됩니다.

http://developers.facebook.com/docs/reference/plugins/like/
이때 유의할 점이 https:// 로 개발자 웹사이트에 접속하면 'Get Code' 버튼을 클릭했을때,
'로딩중..' 이라고만 나오지 코드를 주지는 않아요.. http:// 로 개발자 웹사이트에 접속해야 합니다.
조만간 https (SSL, Secured Socket Layer) 에서도 정상 작동하지 않을까 싶긴 합니다만..



아래 그림에 보면 'URL to Like (?)' 항목이 있죠.. 여기 입력하는 URI 는 PermaLink 이어야 합니다.
이때, http://www.a-b-c.com/abc.jsp?param1=.... 와 같이 파라미터를 사용해도 됩니다.
다만, 페이스북에 등록되어 표시되는 사용자 화면에는 파라미터 이후 값이 보이지 않는 듯합니다.
그리고, http:// 로 시작하지 않으면.. http://facebook.com 으로 시작하는 줄 아니까 주의하세요.

그런데, 2011.06.13 11:32 현재 보면요..
'Send Button' 이 체크된 코드를 받으면, Like 한 사람의 페이스북 Profile 이미지가 반 이상 가려져 버려요..
음.. 최신 버전의 웹브라우저에서는 정상적으로 보이는데, IE(Internet Explorer)7.x 버전에서 그렇게 보입니다.
물론, IE8.x 에서 호환성보기 모드로 보아도 그렇구요.
그래서 다들, 'Send Button' 은 넣지 않는 거였나 보네요..
iframe 코드는 'Send Button' 이 체크되지 않으면 그제야 나옵니다.
암튼, 'Send Button' 은 페이스북 측에 버그가 있어요.



'URL to Like (?)' 항목에 사용되는 PermaLink 에는 아래와 같은 코드가 들어 있어야 합니다.
그래야 Like (또는 Recommend) 나 Send 할때 열리는 창에 제목/설명/이미지 등이 표시됩니다.
키워드는 글쎄요.. 뭐에다 쓰는지 아직은 모르겠네요.. ㅠ.ㅠ
<meta content="제목이에요" name="title"></meta>
<meta content="설명이에요" name="description"></meta>
<meta content="키워드에요" name="keywords"></meta>
<meta content="이미지 URI 에요" property="og:image"></meta>

meta 에 og:image 를 설정하지 않은 경우에는,
해당 URI 본문에 사용된 맨 마지막 img 태그의 src 를 읽어와서 페이스북에 썸네일을 생성합니다.
만약 img 태그는 없고 background:url('...') 와 같이 background 를 사용한다면 이미지를 가져오지 않습니다.
meta 에 og:image 를 여러개 적어두면 맨 마지막에 입력된 og:image 의 content 1건만 썸네일로 사용합니다.
페이스북은 썸네일이 기본적으로 1개에요.
그리고, 이미지에는 http:// 로 시작하는 FullURL 을 사용해야 해요.
만약 http:// 가 없으면, 이미지가 http://facebook.com 에 존재하는 줄 알고 이미지가 없다고 해요.. ㅋㅋ



'URL to Like (?)' 항목에 사용되는 a.jsp 가 있고, a.jsp 가 b.jsp 로 Redirect 되는 경우라면,
페이스북이 a.jsp 가 아니라 b.jsp 에서 메타 데이타(위에 설명한 4줄의 내용)를 읽어 옵니다.
만약, a.jsp 에서 상당한 시간 동안 지체한 다음에 b.jsp 로 넘어가는데..
a.jsp 에서 지체하는 동안 Like/Recommend/Send 등을 할때는 a.jsp 에 설정된 메타값으로 페이스북에 등록됩니다.
b.jsp 에 frame 이나 iframe 이 있는 경우 frame 이나 iframe 안에는 메타 데이타를 넣을 필요가 없습니다.
넣어도 소용이 없다는 말이지요.



Like, Recommend, Send 등을 할때 또는 Send 창이 열릴때 'URL to Like (?)' 에 기술된 데이타를 읽어와서,
페이스북에 관련 내용을 저장합니다. 일종의 캐시 데이타죠.
이렇게 등록된 데이타는 이후에 다른 사람이 Like, Recommend, Send 등을 할때 재사용됩니다.
'URL to Like (?)' 에 등록된 URL 에 가서 다시 읽어오지 않아요.
한번 페이스북에 등록되고 나면 'URL to Like (?)' 에 등록된 URL 에서 메타값을 수정해도,
수정한 값이 페이스북에는 반영되지 않는 현상이 발생합니다.
Like, Recommend, Send 등으로 페이스북에 올려진 게시글(게시물)과 Like 등을 삭제해도,
캐시 데이타는 삭제되지 않기 때문에.. URL 을 새로 등록해야 하는 불상사(?)가 발생할 수도 있습니다.
이때 ShortenURL 을 만들어서 페이스북에서 가져온 코드를 수정하면 다시 등록이 됩니다.
<div id="fb-root" style="padding:0; margin:0; line-height:0"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="ShortenURL" send="true" width="450" show_faces="true" font=""></fb:like>

ShortenURL 은 스팸으로 연결될 수도 있어서 편리성과 위험성을 동시에 가지고 있다는 점이 염려가 된다면..
원래의 b.jsp 에는 수정된 메타값을 넣고 <fb:like href="c.jsp" ...> 라고 수정합니다.
새로운 c.jsp 에는 <% response.sendRedirect("b.jsp") %> 코드를 넣으면 됩니다.
누군가가 c.jsp 를 호출하면 b.jsp 로 Redirect 됩니다.
이제 b.jsp 에 들어 있는 fb 태그를 통해 Like 나 Send 를 하면 fb 의 href 에는 c.jsp 가 들어 있기 때문에,
페이스북은 c.jsp 에서 메타값을 가져가려 합니다.
그러나, c.jsp 는 b.jsp 로 바로 Redirect 되기 때문에..
c.jsp 의 메타값을 읽는다는 것이 실제로는 b.jsp 의 것을 읽게 됩니다.
조금 복잡했나요..?



우리쪽 서버에는 SSL (Secured Socket Layer) 이 설치되어야 보안 경고창이 열리지 않습니다.
페이스북에 Like/Send 를 달리는 URI 가 페이스북에 올라가는데요..
이 URI 를 클릭하면 우리쪽 서버로 다시 넘어오는데,
만약 우리쪽 서버에 SSL(보안서버) 설정이 되어 있지 않으면 보안 경고창이 열린다는 말이지요.
사용자 입장에서는 귀찮아져요.
SSL 무료도 있지만, 개인정보보호법(2011.09 발효)에서 무언가 제한사항을 두는 듯 합니다.
아마도, SSL 은 유료 제품을 사용해야 하지 않나 싶습니다.

.Fine.