페이스북 플러그인 설치를 위한 App ID 만들기

페이스북 플러그인 설치를 위한 App ID 만들기

페이스북은 댓글, 팔로우 버튼, 좋아요 버튼, 페이지 위젯 등 다양한 소셜 플러그인을 제공합니다. 사이트나 블로그에 페이스북의 소셜 플러그인을 사용할 때 페이스북 SDK를 설치한 후 사용하게 되면 사용성도 더 좋아지고 관리하기도 더 수월해집니다. 페이스북 SDK를 설치한다 하니 뭔가 어렵게 느껴진다구요? 뭐 별거 아닙니다. 페이스북 개발자 페이지에 가입 후 App ID를 만들 수 있고, 생성한 App ID로 페이스북 SDK를 설치하면 됩니다. 말이 설치이지 웹페이지에서 클릭 몇 번 해주고, 블로그 스킨에 위젯 추가 하는 정도의 수고만 해주면 됩니다.


쉽게 관리자용 마스터키를 하나 만든다고 생각하면 될까요. 페이스북 소셜 플러그인 설치할 때 App ID 없이 소셜 플러그인 사용할 때가 사용성 및 편의성이 10점 만점에 5점이라 치면, App ID 만들고 사용할 땐 7점 정도. 웹페이지용 댓글 플러그인의 경우는 거의 8점 정도까지 만족도가 높아질 수 있습니다. 티스토리 블로그에 페이스북 댓글을 이용하고 싶다면 '티스토리 블로그 페이스북 댓글 사용 방법' 글을 참고하시고 설치 하시면 되겠습니다.




페이스북 SDK를 설치하려면 App ID를 만들어야 하는데, App ID를 만들기 위해선 우선 페이스북 개발자 페이지(https://developers.facebook.com)에 가입을 해주어야 합니다. 너무 오래되어 기억이 가물가물한데 이미 페이스북 계정이 있다면 인증 절차만 거친 후 가입이 가능한 것으로 기억합니다. 페이스북 개발자 페이지 가입이 완료 되면



상단 우측의 내 앱을 클릭한 후 새 앱 추가를 클릭해 줍니다.




새 앱 ID 만들기 창이 뜨면 표시 이름과 이메일을 입력한 후 앱 ID 만들기 버튼을 클릭해 줍니다. 표시 이름은 말 그대로 구분하기 쉽게 이름을 달아 주는 것이니 적당한 것을 입력해주면 됩니다.




문자 보안 확인 단계를 거치면 새 앱 ID 생성이 일단은 완료 됩니다.




새 앱 ID 생성이 완료되면 위와 같은 앱 ID 관리 페이지가 열릴 것입니다. 아마도요. 좌측 상단의 표시 이름, 대시보드, 설정 등의 메뉴를 이용하여 앱 ID를 관리할 수 있고요. 앱을 새로 추가하고 싶다면 좌측의 새로 추가 메뉴를 이용하면 되겠습니다. 방법은 뭐 위에 설명한 것과 크게 다르지 않을 겁니다.


여러 개의 앱 ID를 생성했다면 표시 이름 우측의 삼각형 버튼을 클릭한 후 다른 앱 ID로 전환하면 됩니다. 앱 ID마다 별도로 관리할 수 있네요. 새로 생성된 앱 ID를 사용하기 위해선 몇 가지 절차를 밟아줘야 합니다. 절차를 밟기 위해 좌측 메뉴에서 대시보드를 클릭하여 줍니다.




대시보드 중간에 있는 플랫폼 선택 버튼을 클릭해줍니다.




웹사이트에 사용할 것이라면 웹사이트를 선택해주고, 다른 용도로 사용할 것이라면 그에 맞는 것을 선택해줍니다. 사이트나 블로그에 페이스북 플러그인을 설치하기 위함이니 웹사이트를 선택해줍니다.




위와 같은 창이 뜨면 푸른 바탕의 자바스크립트 소스를 복사한 후 블로그 스킨 <body></body> 사이에 넣어 줍니다. <body> 바로 아래 넣어 주거나 </body> 바로 위에 넣으면 나중에 찾기 쉽겠죠. 참고로 소스 중 appID 우측 파란색으로 칠해져 있는 번호가 앱 ID입니다. 소스를 스킨에 추가했으면 하단 부분에 위치한 사이트 URL 입력란에 블로그 도메인을 입력한 후 넥스트 버튼을 클릭해줍니다.




이 화면이 나타나면 거의 마무리 단계입니다. 위 화면에선 아무것도 해줄 것이 없습니다. 마무리를 위해 앱 ID 관리 페이지로 이동합니다.




좌측 메뉴 중 앱 검수를 클릭합니다. 우측에 앱 검수 화면이 나타날 것인데, 상단에 있는 XXX 앱을 공개하시겠어요? 아래에 있는 아니요 버튼을 클릭해 줍니다.




팝업 창이 뜨며 앱을 공개할 것이냐 물을 것인데, 적당한 카테고리를 선택한 후 확인 버튼을 클릭해줍니다. 




앱 공개가 완료되면 위와 같이 아니요로 되어 있던 버튼이 공개 상태로 변경 됩니다. 공개 상태가 되면 사용 준비 끝~




대시 보드 상단과 중간 부분에 앱 ID를 확인할 수 있으니 잘 사용하시면 되겠습니다. 앱 ID라 해서 뭔가 대단한 것을 만들어야 하는 듯 보였겠지만 보시다시피 뭐 별거 없지요. 페이스북 SDK 설치 말만 어려웠지 블로그 사이드바에 위젯 하나 넣는 정도의 수고로 별거 없었지요. 끝~


신고