본문 바로가기
공부/자바스크립트 jQuery

페이스북 graph API를 사용해서 프로필 사진 가져오기

by Ohming 2012. 6. 28.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

고급웹프로그래밍 텀프로 포토 모자이크 앱을 만들었다.
포토 모자이크를 만들기 위해 제일 처음 Graph API를 사용해서 나의 프로필 사진 하나와 친구들의 프로필 사진을 랜덤으로 50장 정도 가져와서 사진이 없는 경우를 제외하고는 다 저장을 하고, 화면에 출력도 하였다. 내 프로필 사진을 배경으로 쓸 것이기 때문에 제일 큰 원본 사진으로 가지고 왔다.

나는 Graph API를 이용해서 프로필 사진을 큰것으로 가지고 왔는데 이런경우 이미지 파일의 주소가 https 로 앞부분이 시작하게 된다.

* 페이스북이 좀 바꼈는지 원래 쓰던 FB.Event.subscribe('auth.login', function(response) 방법으로는 제대로 결과가 나오지않고 재로드가 무한으로 계속 일어나기 때문에 소스부분을 아래와 같이 바꿔줘야 한다. (구글 검색 중에 발견했다. 인터넷익스플로러는 이 방법으로 해결되지 않는다. 직접 검색해 보시길!)

FB.Event.subscribe('auth.login', function(response)
{
    if(navigator.userAgent.toLowerCase().indexOf("safari") > -1) {
        if (response.session) {
            $('body').prepend("
"); $('#safariFix') .attr('method', 'POST') .attr('action', location.href) .append(''); $('#safariFix_session').attr('value', JSON.stringify(response.session)); $('#safariFix').submit(); } } else { window.location.reload(); // Whenever the user logs in, we refresh the page } });


[ 내 프로필 사진을 큰 사진으로 가져오기 ]
- get_me 함수를 만들었다.

function get_me(){
	FB.api('/me/picture?type=large', function(response){
		document.getElementById("me").innerHTML += "
"; //가지고 온 사진을 div 안에 넣기 document.myForm.img.value = response; //가지고 온 사진을 따로 저장해 넣었다. 폼을 php로 넘길 것이기 때문에 이렇게 했다. }); }

[ 친구들 프로필 사진들 랜덤으로 빼와서 출력하고 저장하기 ]
- 사진이 없는 경우도 있기 때문에 그런경우는 제외 시킴.
- 가져오는 사진들 중복 허용.

function get_friends() { FB.api('/me/friends?fields=gender,id', function(response) { var count = 0; while(response.data[count] != null) { count++; } // 랜덤으로 친구 선택 for(var i=0;i<50;i++) { var rand = Math.floor(Math.random() * count); // 친구 정보 받아오기 (사진, 이름 등) FB.api('/' + response.data[rand].id + "?fields=picture", function(response) { if(response.picture.indexOf("static-ak")<0){
//사진이 없는경우 오류뱉음. 그러니까 사진이 없는 경우를 제외한 사진들만 저장. // 사진, 이름 출력 document.getElementById("friends").innerHTML += "";
"; document.myForm.val.value += "&" + response.picture; } }); } //친구 이미지를 다 가져왔으면 이제 전송버튼 활성화 (사진 안가져온 상태에서 바로 전송버튼을 누르면 php 파일에서 사진이 없다고 오류뱉음.) setTimeout ('end()', 2000); }); } //get_friends 함수 끝 function end(){ document.myForm.submit.disabled = ''; }

딱 보기 편하게 정리 한게 아니라 내가 짠 코드를 그대로 붙여넣었을 뿐이라서 알아보기 힘들 수 있음.


댓글