본문 바로가기
Blog Tip/Design

페이스북 좋아요(Like) 버튼 달기

by 카쿠覺 2013. 1. 28.

 

지난번 '떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너)'글에서 언급했듯이 이번에는 페이스북 좋아요(Like) 버튼을 다는 방법에 대해서 살펴보겠습니다.

 

좋아요 버튼을 블로그에 삽입하는 방법은 크게 두가지가 있습니다. 하나는 티스토리에서 자체적으로 제공하는 플러그인을 사용하는 방법입니다. 이 방법은 간편하게 좋아요 버튼을 블로그에 추가할 수 있으나 그 위치가 본문 하단으로 제한된다는 단점이 있습니다.

 

또 다른 방법으로는 좋아요 버튼 코드를 직접 발급받아 사용하는 방법입니다. 이 방법은 플러그인을 통해 좋아요 버튼을 넣는 것보다 다소 복잡할 수 있지만 원하는 곳 어디에라도 버튼을 추가할 수 있다는 장점이 있습니다. 이전에 설명드린 플로팅 배너에 이 좋아요 버튼을 추가할 수 있다면 플로팅 배너를 보다 효율적으로 사용할 수 있지 않을까 싶습니다.

 

Facebook 소셜 플러그인 이용하기

 

1. 티스토리 관리자 페이지에 접속합니다.

 

 

2. 플러그인>꾸미기>페이스북 소셜 플러그인을 찾아 원하는대로 설정 후 저장버튼을 선택합니다.

 

 

3. 포스트 하단에 좋아요 버튼이 추가된것을 확인할 수 있습니다.

 

직접 코드 발급받아 이용하기

 

1. [링크]로 접속한 후 Get Like Button Code 부분을 찾습니다. (바로 아래에 있습니다)

 

 

2. 원하는 방식대로 설정 후 Get Code를 눌러 발급받습니다.

 

- URL : 블로그 자체에 대하여 좋아요 버튼을 만들고자 하시면 블로그 주소를 입력해주시면 되고, 각각의 포스트별로 좋아요 버튼을 만들고 싶으시다면 공란으로 놔두시면(현재 페이지로 자동 설정) 됩니다.

 

 - Width : 스탠다드의 경우 가로폭은 최소 225px이며 기본 가로폭은 450px에 높이는 35px입니다. (사진 출력시 80px입니다). 버튼 카운트의 경우 가로폭은 90px, 높이 20px이며, 박스 카운트의 경우에는 가로폭 55px, 높이는 65px입니다.

 

 

3. 원하는 방식으로의 코드를 발급받습니다. 여기서는 HTML5로 받겠습니다.

 

URL입력시에 특정 주소를 넣은 경우에는 IFRAM과 URL방법 모두로 발급받을 수 있습니다. 그러나 현재 페이지를 추천하는(혹은 좋아요)버튼을 만들기 위해서 URL을 공란으로 두셨다면 HTML5, 그리고 XFBML방식으로밖에 발급받을 수 없습니다. 두 방식 모두 사용하는데에는 큰 차이는 없습니다. 다만 IE6 이하의 브라우저에서는 정상적으로 출력되지 않을 수 있습니다.

 

 

4. 맨 위의 소스를 <body> 바로 아래에 추가합니다.

 

 

5. 아래의 레이어 소스는 좋아요 버튼을 추가하고 싶은 곳에 넣습니다.

 

 - 사이드바에 추가하고자 할 경우 : 사이드바에서 태그 입력기로 입력하면 됩니다. (참고)

 - 본문 하단에 추가하고자 할 경우 : HTML/CSS편집에서 article_rep_desc를 찾아 하단에 넣습니다. (참고)

 - 플로팅 배너를 만들어 추가하고자 할 경우 : 만들어진 레이어 속에 추가합니다. (참고)

 

궁금하신 점은 댓글로 남겨주세요 :D

반응형

댓글