| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
- logstash
- Windows
- MySQL
- Kibana
- docker
- error
- Python
- AWS
- 설정
- elasticsearch
- Git
- 엘라스틱서치
- JS
- MSSQL
- ChatGPT
- 구글
- JavaScript
- nodejs
- Ai
- 유니티
- Linux
- API
- sample
- build
- unity
- 영어
- s3
- mariadb
- ssh
- Today
- Total
가끔 보자, 하늘.
Facebook Web 연동 막정리 본문
원본 : https://developers.facebook.com/docs/javascript/quickstart
사이트 내용 전체를 번역하였다, 허락없이 번역본을 웹사이트에 공개하는 것은 저작권 침해라하여 올리지 못함.
그래서 일단 제작에 대한 내용을 별도 정리하여 업데이트 한다.
들어가기전..
* 아래 내용을 테스트 하려면 facebook app에 대한 개발 환경이 갖추어져야 한다. 아래 내용은 웹 APP에 대한 개발을 기준으로 정리되었다.
- facebook에서 "앱 만들기"를 통해 만들고자 하는 앱을 등록하고, ID를 발급받는다.
- App Domain에 localhost로 등록은 안된다. 자신의 PC에 있는 hosts 파일에 원하는 이름을 넣어두고, 그 이름으로 등록하면 local test 가능하다. (해당 이름으로 사이트 URL도 맞추어야 한다.)
-------------------------------------------------------------------------------
Javascript를 위한 facebook sdk는 다른 자바스크립트 라이브러리처럼 코드상에서 세팅. html 파일의 <body> 태그 바로 아래에 아래 코드를 삽입하면 끝.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id))
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
- 성능을 고려해 javascript sdk는 최소화된 버전으로 로드되는데, 디버깅을 위해 아래와 같이 sdk를 세팅할 수 있다.
js.src = "//connect.facebook.net/en_US/all/debug.js";
- 소셜 플러그인 기능도 활용할 수 있는데, 대표적인 like 버튼을 아래와 같이 삽입 가능하다. 아래 코드를 body 안에 넣고 리로드 해보면 결과를 확인할 수 있다.
<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
- 로그아웃 버튼 삽입은 아래와 같이
<a href="#" onclick="FB.logout();">logout</a>
- Feed에 글 남기기 (이미지 지정 해서)
1) body 안에 링크
<a href="#" onclick="postToFeed();">글 올리기</a>
2) javascript에 추가
function postToFeed(){
var data= {
method: 'feed',
link : 'your-url',
name : '이름',
caption : '캡션',
description : '설명'
};
function callback(response){
}
FB.ui(data, callback);
}
- 자신의 페이지에 comment 남기기 (자신의 주소를 기준으로 포스트 내용을 facebook 서버에 저장하고, 페이지 로딩시에 불러오는 듯)
<fb:comments href="your detail url" num_posts="4" width="400"></fb:comments>
'개발 이야기 > 개발 및 서비스' 카테고리의 다른 글
| ruby on rails 윈도우 설치 (0) | 2014.04.20 |
|---|---|
| ofstream 반복 활용시... (0) | 2014.02.24 |
| 3D MAX에서 익스포트한 본의 개수를 X파일 포멧에서는 어떻게 인식하는가 (639) | 2014.01.16 |
| mysql 코드 문제점들.. (0) | 2013.12.03 |
| 텍스쳐 메모리 압축 관련 자료들 (0) | 2013.06.20 |