본문 바로가기

블로그/파워블로거되기

블로그에 페이스북 like 버튼 설치해 보자

요즘 블로그에 살짝 소홀하는 바람에 저번부터 올릴려고 생각했던 내용인데 이제서야 올려본다

요즘 국내에서도 페이스북에 관한 관심이 날로 커지고 있는데 이번 포스트에서는 얼마전(얼마전이라고 하기엔 웬지 좀 오래된듯한 ^^;;;)에 페이스북에서 선보인 like 버튼을 블로그에 설치하는 방법을 소개하고자 한다 페이스북을 사용하는 블로거라면 설치하면 좋을듯 싶고, 사용하지 않는 유저라도 블로그를 운영하는데 나름 도움이 되지 않을까 싶다

페이스북의 like 버튼 기본 소스는 아래에서 제공되고 있다

http://developers.facebook.com/docs/reference/plugins/like

사이트에 가면 페이지 하단에 위 이미지처럼 설정할 수 있는 부분이 나온다 블로그주소와 적절한 설정을 한후 Get Code 버튼을 누르면 코드를 얻을 수 있는데, iframe 과 XFBML 이렇게 2가지 코드가 제공된다 지금 설명하는 방법은 iframe 를 이용한 방법이다

제공되는 코드를 그대로 사용하게 되면 블로그의 개별 페이지에 따른 like 가 되지 않고 블로그 전체에 대해 like 가 된다 블로그 페이지별 like 가 되게 할려면 아래에서 빨강색 부분을 추가해 주어야 한다 이 방법은 티스토리 기준이며 다른 블로그의 경우 그 블로그에 맞는 치환자를 사용하면 된다

<iframe src="http://www.facebook.com/plugins/like.php?href=http%253A%252F%252Fpaperinz.com[ ##_article_rep_link_##]&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
(우클릭 방지 기능때문에 따로 코드를 파일로 첨부해 놓았다 첨부파일에서 블로그 주소 부분만 자신의 주소를 넣은후 그냥 사용을 해도 된다 블로그 주소의 경우 http:// 제외한 나머지 주소 즉 본 블로그의 경우 paperinz.com 만 기입하면 된다)



이 코드를 블로그 스킨 수정에 들어가 적절한 위치에 삽입하면 된다 본인의 경우에는 현재 본문 하단에 설치되어 있다 페이스북 유저라면 한번 꾹 눌러주기 바란다~ ^^*


덧, 현재 페이스북에서 like 버튼 코드를 얻게 되면 블로그 주소 바로 앞에 %253A%252F%252F 이런 내용이 붙게 된다 하지만 이걸 그대로 사용하면 페이스북에 로그인이 안 되어 있을 경우 like 버튼을 누르면 로그인 창이 뜨는게 아니라 창이 뜨면서 에러가 난다 이걸 %3A%2F%2F 로 바꾸면 페이스북에 로그인이 되어 있지 않더라도 like 버튼을 누르면 창이 뜨면서 페이스북으로 로그인을 할 수 있게 해준다 이유는?? 나도 모르겠다 ^^;;;