본문 바로가기

IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포

[블로그팁]페이스북(facebook) 소셜 플러그인 : 좋아요(like) 버튼을 원하는 위치에 넣는 방법

예전 소셜네트워크서비스(sns) 플러그인 설정방법을 통해 페이스북 좋아요 버튼을 적용하는 방법을 설명했었는데요.
[블로그팁]티스토리에서 소셜 네트워크 서비스(SNS) 플러그인 설정


티스토리 플러그인으로 구현한 좋아요 버튼의 단점

이 방법은 티스토리의 플러그인을 사용하기 때문에 버튼의 크기나 모양등을 변경하는데 약간의 제약이 있구요.
또 한가지로 좋아요 버튼을 원하는 위치에 삽입하지 못한다는 크나큰 단점이 있었습니다.


이것은 제 블로그에 삽입된 위치입니다. 본문의 가장 마지막 부분에 자동으로 삽입되어 보여지는데요.
위치는 고사하고 하다못해 가운데로 정렬하고 싶어도 불가능했답니다.




그럼 이런 얘기를 하는 이유가 뭘까요?
눈치채셨겠지만 버튼을 원하는 위치에 삽입할 방법이 있다는 것이죠.





페이스북 개발자 페이지에서 플러그인 만들기

바로 플러그인을 직접 만드는 것입니다..... 라기 보다는 입맛대로 설정한다는게 맞는 표현이겠죠?

일전에 소셜댓글 플러그인 설치를 설명할 때 '페이스북 개발자 페이지'를 언급했었습니다.
[블로그팁]티스토리에 페이스북 소셜댓글 플러그인 설치하기


위의 포스트에서 설명했던 페이스북 개발자 페이지로 이동합니다.



위와 같이 소셜 플러그인이라는 문구와 아래의 여러가지 플러그인을 확인 할 수 있는데요.
표시한 것과 같이 'Like Button'을 클릭합니다.




그러면 위에 자세한 설명을 흘려버리고 아래로 스크롤을 조금 내리면 위와 같은 설정 화면을 볼 수 있습니다.

몇가지 항목을 간단하게 설명드릴게요.

URL to Like
 - 좋아요 버튼을 삽입할 사이트 주소

Send Button(XFBML Only)
 - 추가로 보내기 버튼을 삽입하는 내용인 듯 하구요. 티스토리에서는 주로 HTML, IFRAME을 사용하니까 패스

Layout Style
 - 좋아요 버튼의 모양을 선택

Width
 - 가로 크기

Show Face
 - 좋아요 버튼을 클릭한 사람의 얼굴을 보임

Verb to Display
 - 좋아요 혹은 추천으로 보이도록 선택(결국은 같은 의미)

Color Scheme
 - 버튼의 밝음과 어두움 선택

Font
 - 영문서체 몇가지 중 선택(한글로 보이게 할 경우 폰트는 숫자에만 적용됨)



지난 번과 마찬가지로 이번에도 바로 이동하실 수 있도록 링크를 남겨드릴게요.
http://developers.facebook.com/docs/reference/plugins/like




3가지의 각기 다른 버튼의 종류를 확인 할 수 있답니다.(클릭해서 확인하세요~!!)



밝기를 바꾸게 되면 위와 같이 표시되는데요. 스킨의 톤이 어둡다면 좋아요 버튼도 어두운 톤으로 배치하는게 좋을 듯 합니다.



설정이 다 끝났으면 코드를 복사하면 되는데요. HTML, XFBML, IFRAME등 다양한 종류의 코드를 얻을 수 있어요.
HTML코드 중에서도 원하는 위치에 넣을 수 있도록 아래부분의 소스를 복사합니다.





블로그에 플러그인 적용하기

위에서 코드를 복사했으니까 이제는 블로그에 적용해야겠죠?


다들 아시겠지만 관리자페이지로 이동합니다.
그리고 스킨 -> HTML/CSS 편집 페이지로 이동해서 html창에 적당한 위치에 넣으시면 되겠죠.




저는 페이스북 소셜댓글의 오른쪽으로 버튼을 넣어보겠습니다.
그냥 넣게되면 정렬이 안되기 때문에 테이블태그를 이용해봤습니다.
보시는 것처럼 좋아요 버튼의 세로정렬은 윗부분으로 맞췄구요.(valing=top)




오른쪽을 보시면 소셜댓글 옆으로 좋아요 버튼이 보이시죠? 왼쪽 플로팅버튼에도 넣어봤어요.
저~~~ 위에도 보이는데 저건 티스토리 플러그인 설정때문에 원래 들어가 있던 버튼이랍니다.





기존 위치변경이 안되는 좋아요 버튼 없애기

그러면 전에 플러그인 설정으로 표시되던 좋아요버튼은 없애야겠죠?



관리자페이지에서 플러그인 -> 플러그인 설정으로 이동하시면 Facebook 소셜 플러그인을 보실 수 있는데요.
보시다시피 '사용하지 않음'을 선택하고 저장을 클릭합니다.



윗부분에 나오던 버튼은 없어졌죠? 자 이렇게 마치겠습니다........ 라고 끝내려했지만.,,



포스팅을 마무리 하려다가 아무래도 좀 어색해보여서 위치를 다시 조절 했답니다.

이렇게 말이죠......ㅋㅋㅋㅋ

어떠셨나요? 보기 좋아졌나요?
다음번엔 SNS글보내기 버튼들의 위치도 좀 바꿔볼까 해요.... 별로 기대는 안되시죠?ㅋㅋㅋㅋ