지금 게시하는 내용은 웹페이지와 facebook이 연결되는 아주 멋진 기능입니다.
처음 facebook을 사용할 때 좋아요 버튼을 보면 저게 뭔가 하는 생각이 들었었는데 써보니 중독성이 있더군요.
아마 facebook에서 가장 많이 클릭하는 버튼이 아닐까 싶습니다.
전에는 공유하기 기능을 사용할 수 있었는데 facebook의 정책상의 이유로 막았네요.
facebook의 여러가지 기능들은 공부해 볼 만한 가치가 있는 것 같습니다.
어쨌든 좋아요 버튼을 내 웹페이지에서 사용하는 방법은 아주 간단합니다.
아래 경로로 갑니다.
https://developers.facebook.com/docs/reference/plugins/like/
페이지 중간쯤가면 이렇게 코드를 생성할 수 있는 폼이 나옵니다.
URL to like라고 되어 있는 폼에다가 내가 사용할 웹페이지를 적어주면 됩니다.
그아래에 여러가지 옵션들이 있는데 이것저것 선택해가면서 골라보시면 원하는 것을 찾을 수 있습니다.
화면처럼 오른쪽에 형태가 나오거든요.
get code버튼을 클릭하면 내가 원하는 소스코드를 얻을 수 있습니다.
아래에 이미지처럼 두개의 텍스트필드에 코드가 나옵니다.
첫번째 폼에 있는 코드는 <body>태그 바로 다음에 넣어주는 것이 가장 이상적이라고 하네요.
두번째 폼에 있는 코드는 버튼이 들어가는 위치에 넣어주면 됩니다.
사용해 보니 두코드를 그냥 내가 쓰고싶은 곳에 같이 붙여넣어도 정상 작동되었습니다.
FTP에 올려서 확인해 보면 다음과 같이 멋진 버튼이 완성되었습니다.
예제소스도 필요하시면 다운받으세요.
likeBtn.zip
이 페이지가 맘에 드시면 추천 부탁드립니다.
'WEB_TECH > 웹개발TIP' 카테고리의 다른 글
| 텍스트박스안의 글자를 클립보드로 복사하는 자바스크립트 (0) | 2013.08.01 |
|---|---|
| 북마크 추가하는 스크립트 (0) | 2013.08.01 |
| iscroll로 carousel구현 (0) | 2013.07.10 |
| iscroll을 사용하여 모바일웹 내부에 스크롤 만들기 (0) | 2013.07.10 |
| 웹페이지에 네이버지도 표시하는 방법 (0) | 2013.06.24 |
| [SNS연동] 웹페이지에 tweet버튼 달기 (0) | 2013.05.30 |
| [SNS연동] 웹에서 카카오톡 링크 사용하는 방법 (0) | 2013.05.30 |
| 웹페이지에서 나눔고딕 사용하는 방법 (0) | 2013.05.07 |
| video.js 플러그인을 알아봅시다. (0) | 2013.05.03 |
| 익스플로러 하위버전테스트 할 수 있는 프로그램 : IE Tester 다운받기 (0) | 2013.05.03 |
