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

고급웹프로그래밍 텀프로 포토 모자이크 앱을 만들었다.
포토 모자이크를 만들기 위해 제일 처음 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 = '';
}

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