BLOG Story
블로그에 페이스북 좋아요 버튼 설치하는 방법 Facebook Like button
2proo
2012. 7. 20. 10:30
블로그에 페이스북 좋아요 버튼 설치하는 방법 Facebook Like button
블로그나 사이트에 페이스북 좋아요 버튼을 설치하는 방법입니다.
최근들어 트위터보다 페이스북 사용자가 더 늘어났고, 활동도 페이스북 사용자들이 더 많이 하는듯 하네요.
예전에도 블로그에 페이스북 좋아요 버튼과 공유하기 버튼을 다는 방법을 포스팅했었는데 트위터 공식 버튼과 함께 페이스북 좋아요 버튼도 좀 더 쉽고 간단하게 설치할 수 있도록 바뀌었네요.
페이스북 버튼은 페이스북 개발자 사이트에서 생성할 수 있습니다. 아래 링크에 가셔서 입맛에 맞게 소스코드를 수정해서 사용하시면 되겠습니다. 사실 이 블로그는 페이스북 앱을 만들어서 사용중이지만 소스 코드 생성하는데에는 앱이나 비로그인 생성이나 별 차이가 없습니다.
페이스북 개발자 사이트 : https://developers.facebook.com/docs/reference/plugins/like/
페이스북 사이트에 가면 좋아요 버튼과 보내기(공유하기) 버튼을 생성할 수 있는 소셜 플러그인 페이지가 나옵니다.
아래 스샷에서 보다시피 왼쪽에서 옵션 설정, 우측에 미리보기 할 수 있는 공간이 나눠져 있습니다.
그럼 각 해당 옵션에 대해서 알아보도록 합니다!!!
URL to Like
좋아요 버튼을 설치할 URL 주소입니다. 그냥 공백으로 놔두면 알아서 해당 페이지 URL을 인식합니다.
특정 페이지 URL에 좋아요 버튼을 다실 분이라면 URL 주소를 입력하시고 티스토리 블로그나 기타 사이트에서는 그냥 놔두셔도 됩니다.
Send Button (XFBML Only)
send button, 즉 쪽지 보내기(보내기) 버튼도 같이 표시할 것인지 여부를 설정할 수 있습니다.
보내기 버튼은 다른 페이스북 친구나 그룹, 이메일 주소 등으로 해당 글을 알리는데 좋은 방법이지만 좋아요 버튼이 들어갈 자리가 좁거나 해당 메세지 보내기 기능이 필요가 없다면 빼시는게 좋습니다. 그리고 해당 보내기 기능은 자바스크립트 SDK가 지원되는 서버의 홈페이지나 블로그만 지원됩니다.
Layout Style
좋아요 버튼을 3가지 형식으로 표시할 수 있는 기능입니다. 위에서 send button 버튼을 체크 해지했다면 이 레이아웃 스타일 에서 보내기 버튼을 보여주지 않습니다. (보통은 보내기 버튼을 빼놓고 설정합니다.)
Width, Show face
버튼 가로 폭을 설정할 수 있고, 좋아요 버튼을 클릭한 사람의 썸네일 사진을 하단에 같이 표시해줄 것인지 여부를 설정할 수 있습니다. 사진 썸네일을 넣게 되면 버튼 로딩 속도가 더 느려집니다. 가뜩이나 페북 버튼 속도가 느린데... 뭐 취향이지만 편한대로 설정하시길 바랍니다.
Verb to display
버튼에 like(좋아요) 라고 표시할지 recommend(추천) 이라고 표시할지를 결정합니다. 보통은 like 입니다.
Color Scheme
좋아요 버튼의 색상 구성표를 선택합니다. 현재 페이지에 보이는것처럼 밝은색으로 할것인지 어두운 버튼으로 할 것인지를 정해줍니다.
Font
글씨체, 글꼴을 설정할 수 있는데 6가지를 지원합니다. 한글 좋아요 버튼은 그닥 글꼴을 바꿔도 별 표시가 안나므로 기본으로 놔두시길 바랍니다.
다 설정한 후 Get Code 버튼을 누르게되면 아래와 같이 좋아요 버튼 플러그인 코드를 얻을 수 있습니다.
사이트나 블로그에 좋아요 버튼을 달 위치를 선정한 후 아래 코드(1 소스와 2 소스 모두)를 통째로 집어넣으면 됩니다.
위에 있는 소스는 제가 페이스북 앱을 만든 후 생성한 소스 코드이고 아래 소스는 비로그인 상태로 만들어본 소스입니다.
두 소스는 앱 id가 있다는거 빼고는 거의 같습니다. 앱을 만들어서 쓰면 편하긴 하지만 그렇다고 반드시 만들 필요는 없습니다.
그리고 만약 이 블로그처럼 게시물 상단의 가로형 좋아요 버튼과 하단의 세로형 좋아요 버튼을 달고 싶으시다면
위 소스 중에서 숫자2(아래칸) 에 있는 소스중 data-layout 부분을 data-layout="box_count" 로 바꾸면 박스형(세로형) 코드가 됩니다. 위와 아래 둘 다 단다면 위 소스중 1번 상단에 있는건 스킨 한군대에만 놔두면 되고 2번 하단 소스를 원하는 위치에 data-layout 부분만 수정하여 달아두면 됩니다.
한번 직접 페이스북 개발자 사이트에서 쉽게 좋아요 버튼을 만들어보세요. ^^
블로그나 사이트에 페이스북 좋아요 버튼을 설치하는 방법입니다.
최근들어 트위터보다 페이스북 사용자가 더 늘어났고, 활동도 페이스북 사용자들이 더 많이 하는듯 하네요.
예전에도 블로그에 페이스북 좋아요 버튼과 공유하기 버튼을 다는 방법을 포스팅했었는데 트위터 공식 버튼과 함께 페이스북 좋아요 버튼도 좀 더 쉽고 간단하게 설치할 수 있도록 바뀌었네요.
페이스북 버튼은 페이스북 개발자 사이트에서 생성할 수 있습니다. 아래 링크에 가셔서 입맛에 맞게 소스코드를 수정해서 사용하시면 되겠습니다. 사실 이 블로그는 페이스북 앱을 만들어서 사용중이지만 소스 코드 생성하는데에는 앱이나 비로그인 생성이나 별 차이가 없습니다.
페이스북 개발자 사이트 : https://developers.facebook.com/docs/reference/plugins/like/
페이스북 사이트에 가면 좋아요 버튼과 보내기(공유하기) 버튼을 생성할 수 있는 소셜 플러그인 페이지가 나옵니다.
아래 스샷에서 보다시피 왼쪽에서 옵션 설정, 우측에 미리보기 할 수 있는 공간이 나눠져 있습니다.
그럼 각 해당 옵션에 대해서 알아보도록 합니다!!!
URL to Like
좋아요 버튼을 설치할 URL 주소입니다. 그냥 공백으로 놔두면 알아서 해당 페이지 URL을 인식합니다.
특정 페이지 URL에 좋아요 버튼을 다실 분이라면 URL 주소를 입력하시고 티스토리 블로그나 기타 사이트에서는 그냥 놔두셔도 됩니다.
Send Button (XFBML Only)
send button, 즉 쪽지 보내기(보내기) 버튼도 같이 표시할 것인지 여부를 설정할 수 있습니다.
보내기 버튼은 다른 페이스북 친구나 그룹, 이메일 주소 등으로 해당 글을 알리는데 좋은 방법이지만 좋아요 버튼이 들어갈 자리가 좁거나 해당 메세지 보내기 기능이 필요가 없다면 빼시는게 좋습니다. 그리고 해당 보내기 기능은 자바스크립트 SDK가 지원되는 서버의 홈페이지나 블로그만 지원됩니다.
Layout Style
좋아요 버튼을 3가지 형식으로 표시할 수 있는 기능입니다. 위에서 send button 버튼을 체크 해지했다면 이 레이아웃 스타일 에서 보내기 버튼을 보여주지 않습니다. (보통은 보내기 버튼을 빼놓고 설정합니다.)
Width, Show face
버튼 가로 폭을 설정할 수 있고, 좋아요 버튼을 클릭한 사람의 썸네일 사진을 하단에 같이 표시해줄 것인지 여부를 설정할 수 있습니다. 사진 썸네일을 넣게 되면 버튼 로딩 속도가 더 느려집니다. 가뜩이나 페북 버튼 속도가 느린데... 뭐 취향이지만 편한대로 설정하시길 바랍니다.
Verb to display
버튼에 like(좋아요) 라고 표시할지 recommend(추천) 이라고 표시할지를 결정합니다. 보통은 like 입니다.
Color Scheme
좋아요 버튼의 색상 구성표를 선택합니다. 현재 페이지에 보이는것처럼 밝은색으로 할것인지 어두운 버튼으로 할 것인지를 정해줍니다.
Font
글씨체, 글꼴을 설정할 수 있는데 6가지를 지원합니다. 한글 좋아요 버튼은 그닥 글꼴을 바꿔도 별 표시가 안나므로 기본으로 놔두시길 바랍니다.
다 설정한 후 Get Code 버튼을 누르게되면 아래와 같이 좋아요 버튼 플러그인 코드를 얻을 수 있습니다.
사이트나 블로그에 좋아요 버튼을 달 위치를 선정한 후 아래 코드(1 소스와 2 소스 모두)를 통째로 집어넣으면 됩니다.
위에 있는 소스는 제가 페이스북 앱을 만든 후 생성한 소스 코드이고 아래 소스는 비로그인 상태로 만들어본 소스입니다.
두 소스는 앱 id가 있다는거 빼고는 거의 같습니다. 앱을 만들어서 쓰면 편하긴 하지만 그렇다고 반드시 만들 필요는 없습니다.
그리고 만약 이 블로그처럼 게시물 상단의 가로형 좋아요 버튼과 하단의 세로형 좋아요 버튼을 달고 싶으시다면
위 소스 중에서 숫자2(아래칸) 에 있는 소스중 data-layout 부분을 data-layout="box_count" 로 바꾸면 박스형(세로형) 코드가 됩니다. 위와 아래 둘 다 단다면 위 소스중 1번 상단에 있는건 스킨 한군대에만 놔두면 되고 2번 하단 소스를 원하는 위치에 data-layout 부분만 수정하여 달아두면 됩니다.
한번 직접 페이스북 개발자 사이트에서 쉽게 좋아요 버튼을 만들어보세요. ^^