페이스북 좋아요 버튼 만드는 법을 알아봅시다

페이스북 좋아요 버튼 만드는 법을 알아봅시다

페이스북의 인기가 식을 줄을 모르고 있습니다. 트위터와 달리 안정적인 공간에서 사용자들을 만나고 교류하고 정보를 나눠주고 이벤트를 진행할 수 있다는 것에서 기업에서나 개인들에게나 굉장히 사랑받고 있는데요. 오늘은 페이스북의 좋아요 버튼을 만드는 방법을 소개해드릴까 합니다. 

페이스북 메인페이지에서도 나름대로 위젯생성을 제공하고 있지만 굉장히 제한적인데 페이스북의 개발자 기능 페이지에 접속하시면 다양한 형태의 위젯을 만들 수 있답니다. 아차, 이러한 위젯은 페이스북 프로필보다 페이스북 페이지에 더욱 유효하신 것 아시죠? 당연히 폐쇄적인 개인 목적이 아니라면 페이스북의 페이지를 운영하는 것이 여러모로 도움이 될 것 입니다.

페이스북 소셜 플러그인 바로가기 

https://developers.facebook.com/docs/plugins/like-box-for-pages/

위 페이지에 접속하면 facebook developers 메뉴가 나오며 좌측으로 social plugins이 제공됩니다. 이 곳에는 좋아요 버튼은 물론 공유버튼, 보내기버튼, 팔로우버튼, 코멘트 플러그인 등 다양한 플러그인이 제공되는데 오늘은 가장 많이 사용되는 Like Box 에 대해서만 알아보겠습니다. 

like box 는 기본적으로 '좋아요'를 클릭할 수 있는 페이스북 플러그인입니다. 아래 그림과 같이 단순히 내 프로필과 좋아요버튼을 심플하게 노출하는 것에서 부터 내 포스팅글과 좋아요를 클릭한 친구들의 프로필까지 자유롭게 원하는 형태로 생성이 가능합니다. 내 페이지 url을 입력하고 원하는 좌우사이즈를 넣어주시면 기본위젯이 노출되며 아래 각 기능을 설명해드리니 원하시는 입맛대로 기능을 설정하시면 됩니다. 

show friens faces - 좋아요 버튼 아래에 클릭한 사용자의 프로필사진이 노출됩니다.

show posts - 좋아요 버튼 아래에 내 포스팅이 노출됩니다.

show header - 좋아요 버튼 상단으로 "facebook에서 찾아보세요" 문구가 노출됩니다.

show border - 위젯에 테두리가 생성됩니다. 

아래 화면처럼 다양한 형식의 위젯을 생성하실 수 있습니다. 

일단 본인은 가장 무난하게 아래와 같이 친구들의 얼굴이 노출되는 위젯으로 선택하였습니다. (당장 '좋아요'를 클릭한 사람이 없어서 아래 친구들의 프로필이 뜨질 않습니다 ㅠㅠ) 

원하는 위젯선택이 완료되었으면 하단의 "get code"를 클릭합니다. 거대한 SNS답게 소스코드가 다양한 형식으로 제공됩니다. 기본적으로 웹사이트나 블로그 등에 추가하기 위해서는 HTML5 를 선택합니다. 특별히 head로 위치할 소스가 없으므로 위아래 내용 전부 복사해서 원하는 위치로 넣어주시면 됩니다. 티스토리의 경우 본문 하단, html태그입력기를 이용한 사이드바가 무난하겠습니다.  

이상으로 페이스북 좋아요 버튼을 만드는 방법을 알아보았습니다. 위에 적어드린 플러그인 사이트에 접속하시면 누구나 쉽게 화면을 따라 보면서 위젯을 만드실 수 있습니다. 홈페이지는 물론 블로그에도 페이스북 위젯을 통해 좋아요 버튼을 추가하고 더욱 다양한 교류의 창구로 활용하시기 바랍니다.