가끔 블로그를 돌아다니다 보면 Facebook 좋아요 버튼을 달아놓은 블로그들이 보입니다.
몇 천건, 몇 만건씩 좋아요가 눌러져 있는 것을 보면 참 부럽죠..
그래서 저도 Wordpress에 달아보았습니다!
구지 플러그인을 쓰지 않아도 원하는 페이지에 버튼을 달 수 있습니다.
물론 제가 구현을 하는 것이 아니라..
Facebook에서 API를 제공해주는 덕분이죠 ^^
Facebook 개발자 사이트에서는 여러 플러그인 및 API를 제공해 주고 있습니다.
그 중에서 좋아요 버튼을 누르는 API는
Like Button API입니다.
사용법은 간단합니다.
일단 해당 페이지(
바로가기)에 접속해서 간단한 설정만 해주면 끝!
아래 그림이 설정부분입니다.
URL to Like에 본인의 블로그 주소를 넣고 Layout이나 Action Type 등을 설정하면 실시간으로 하단에 좋아요 버튼 모양을 확인할 수 있습니다.
[caption id="attachment_845" align="aligncenter" width="729"]
![[ Facebook Like Button 설정 ]](http://jjorae.com/wp-content/uploads/2014/02/Cap-2014-02-20-11-29-04-925.png)
[ Facebook Like Button 설정 ][/caption]
Layout은 좋아요 버튼의 모양을 설정할 수 있습니다.
standard |
좋아요 버튼 오른쪽으로 좋아요 숫자와 함께 긴 문장이 추가되는 layout입니다. |
box_count |
좋아요 버튼 위로 말풍선에 좋아요 숫자가 표시됩니다. |
button_count |
좋아요 버튼 오른쪽으로 말풍선에 좋아요 숫자가 표시됩니다. |
button |
단순히 좋아요 버튼만 있습니다. |
[caption id="attachment_844" align="aligncenter" width="729"]
![[ Facebook Like Button 종류 ]](http://jjorae.com/wp-content/uploads/2014/02/Cap-2014-02-20-11-29-37-382.png)
[ Facebook Like Button 종류 ][/caption]
Action Type은 좋아요를 할 것인지 추천을 할 것인지 설정하는 부분입니다.
Show Friends' Faces를 체크하면 좋아요를 누른 사람 중에 친구가 있으면 보여주는 기능입니다.
Include Share Button을 체크하면 공유하기 버튼도 함께 보여집니다.
[caption id="attachment_843" align="aligncenter" width="729"]
![[ Facebook Like Button 타입 ]](http://jjorae.com/wp-content/uploads/2014/02/Cap-2014-02-20-11-29-40-299.png)
[ Facebook Like Button 타입 ][/caption]
위의 설정들을 모두 완료한 뒤 Get Code를 누르면 아래와 같이 Code가 생성됩니다.
이후에는 이러한 설정을 code에서 직접 수정해서 사용하실 수 있습니다.
[caption id="attachment_842" align="aligncenter" width="722"]
![[ Facebook Like Button 스크립트 ]](http://jjorae.com/wp-content/uploads/2014/02/Cap-2014-02-20-16-13-02-257.png)
[ Facebook Like Button 스크립트 ][/caption]
코드는 총 4가지로 생성되구요. 여기서는 HTML5 코드로 생성했습니다.
XFBML도 이와 유사하게 생성되구요. IFRAME이나 URL로 생성하면 다른 플러그인을 작성하거나 사용하실 때 사용할 수 있습니다.
위에서 생성된 코드 중에 위에 있는 코드는 <body>태그 바로 아래에 추가해 주시고 아래에 있는 코드는 좋아요 버튼을 위치시킬 곳에 추가하시면 됩니다.
완료된 모습은 제 블로그 최상단을 보시면 됩니다. ^^
참~쉽죠잉~~~
* 아래에 있는 표는 코드 내에 있는 각각의 속성들을 나열한 표입니다.
추후에 직접 수정하고 싶으실 때에는 아래 내용을 참고해서 수정하시면 됩니다 ^^
Setting |
HTML5 Attribute |
Description |
Default |
---|
action |
data-action |
The verb to display on the button. Can be either "like" or "recommend" |
"like" |
colorscheme |
data-colorscheme |
The color scheme used by the plugin. Can be "light" or "dark". |
"light" |
href |
data-href |
The absolute URL of the page that will be liked. |
XFBML and HTML5 versions default to the current URL. |
kid_directed_site |
data-kid-directed-site |
If your web site or online service, or a portion of your service, is directed to children under 13 you must enable this |
"false" |
layout |
data-layout |
Selects one of the different layouts that are available for the plugin. Can be one of "standard", "button_count", or "box_count". See the FAQ for more details. |
"standard" |
ref |
data-ref |
A label for tracking referrals which must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). See the FAQ for more details. |
None |
share |
data-share |
Specifies whether to include a share button beside the Like button. This only works with the XFBML version. |
"false" |
show_faces |
data-show-faces |
Specifies whether to display profile photos below the button (standard layout only). You must not enable this on child-directed sites. |
"false" |
width |
data-width |
The width of the plugin. The layout you choose affects the minimum and default widths you can use, pleasesee the FAQ below for more details. |
Depends on layout |