발칙한 블로그

2012년 7월 19일 목요일

소셜네트워크 서비스 중 페이스북의 좋아요 버튼을 구현 하는 방법을 정리 합니다.

[좋아요 버튼 구현하기]
출처: http://kkid.tistory.com/68

이 문서는 위 포스트를 참고하여 만들었습니다. 더욱 깔끔한 포스트를 보시려면 해당 포스트를 찾아가세요.

1. 코드생성
    http://developers.facebook.com/docs/reference/plugins/like

    위의 사이트로 이동해서 코드를 생성한다.
    URL to Like : 좋아요버튼을 사용할 블로그 또는 사이트 주소를 적는다.

    Layout Style : 버튼의 스타일을 정한다.(Standard,button_count,box_count)
                            오른쪽에 미리보기가 되므로 마음에 드는걸 선택한다.

    Show Faces : 좋아요를 눌러주신 분들의 페이스북 프로필 사진이 나타납니다.

    Witdh : 넓이를 조절합니다.

Verb to display : 버튼에 Like 또는 Recommend 중 어느 것이 적힐지 고르게 되는 부분인데

한국어로는 Like 는 '좋아요', Recommend 는 '추천' 이라고 나타납니다.

Font : 글씨체를 선택할 수 있습니다.

Color Scheme : 버튼 색상을 밝은색 또는 어두운색으로 선택할 수 있습니다.

Get Code : 클릭하면 새 창이 뜬다.

iframe 과 XFBML 두가지 코드를 제공하는데 'iframe' 코드를 사용합니다.

2. 코드수정

아래와 같은 코드가 생성 됩니다.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.myblog.com&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

이대로 좋아요 버튼을 블로그에 적용, 삽입하게 되면 어느 페이지에서 클릭을 하든

블로그 자체에 좋아요가 적용되게 됩니다.

그래서 개개의 포스팅에 좋아요 버튼을 적용하려면 아래와 같이 블로그 주소 뒤에

[##_article_rep_link_##] 를 추가 하면 됩니다.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.myblog.com[##_article_rep_link_##]&layout=box_count&show_faces=false&width=450&action=like&colorscheme=light&height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

3. html 페이지에 좋아요 버튼 달기

원하는 곳에 위의 코드를 삽입하면 끝….

4. 좋아요 통계보기

[참고사이트]

http://blog.naver.com/PostView.nhn?blogId=wishkjh&logNo=80153549435

http://www.androidpub.com/2131000

http://kkid.tistory.com/68