Facebook에서 페이지 삭제하기
프로그래밍/SNS 관련 개발질문이 올라와서 글을 올립니다.
페이지를 삭제하시기 위해서는 아래와 같이 해보시면 됩니다.
페이지에 들어가시면 상단에 페이지 관리 버튼이 보이는데 해당 버튼을 클릭하고 권한 관리 메뉴를 선택합니다.
권한 관리 페이지의 하단에 보시면 페이지 삭제 (붉은 박스 부분) 를 누르시면 페이지를 삭제하실 수 있습니다.
완전 간단하죠? ^^
'프로그래밍/SNS 관련 개발'에 해당되는 글 10건
Facebook Fan Page 변경되었네요.
프로그래밍/SNS 관련 개발우선 팬 페이지 자체가 타임라인 형태로 변경되었습니다.
앱 페이지를 열어보니 화면이 와이드하게 넓어졌다고 보여졌습니다만...
해당 펜 페이지의 탭 이동을 위해서는 화면 상단의 콤보 박스를 클릭하시면 리스트가 나타납니다.
구글 크롭의 개발자 도구를 이용해서 해당 탭 페이지의 프레임 사이즈도 같이 넓어진 것인지 체크해봤씁니다만...
520픽셀의 너비를 갖는 것은 변하지 않았군요. 이후에 어떻게 변경될지 확인도 필요할 듯합니다.
좋게 변하겠죠? 믿어봅니다. ^^
Facebook 앱에 Google Adsense 사용하기
프로그래밍/SNS 관련 개발구글 광고솔루션인 구글 애드센스를 페이스북 앱에 추가해보았습니다.
일단 구동 잘 됩니다.
구글에서 제공하는 구글 어낼리틱스도 잘 동작하는 것을 확인하였습니다.
Iframe 형태로 구동되기 때문에 다로 제어를 하지 않는 것 같습니다.
관련한 정책을 보지 못해서 모르겠지만 일단 기능적인 제약은 없는 것 같습니다.
일단 구동 잘 됩니다.
구글에서 제공하는 구글 어낼리틱스도 잘 동작하는 것을 확인하였습니다.
Iframe 형태로 구동되기 때문에 다로 제어를 하지 않는 것 같습니다.
관련한 정책을 보지 못해서 모르겠지만 일단 기능적인 제약은 없는 것 같습니다.
Facebook Tab Page의 스크롤바 없애기
프로그래밍/SNS 관련 개발페북 탭 페이지를 만들어보니 스크롤바가 중간에 나타나서 보기가 흉한 상황이 계속 벌어졌다.
이 부분을 해결하기 위한 스크립트가 제공된다.
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
위와 같이 입력하시면 됩니다.
어때요 참~ 간단하죠~
스크롤 없애기 전의 모습...
스크롤을 없앤 모습...
http://www.facebook.com/pages/Hometown-Fan-Page/267525293321443?sk=app_374942652515928
이 부분을 해결하기 위한 스크립트가 제공된다.
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
<script type='text/javascript'>
window.fbAsyncInit = function() {
FB.init({
appId : '1111111111111', // App ID를 입력합니다.
channelUrl : '//채널 URL', // Channel File
});
FB.Canvas.setAutoGrow();
}
</script>위와 같이 입력하시면 됩니다.
어때요 참~ 간단하죠~
스크롤 없애기 전의 모습...
스크롤을 없앤 모습...
http://www.facebook.com/pages/Hometown-Fan-Page/267525293321443?sk=app_374942652515928
5-1. 페북 앱 추가하기를 쉽게...
프로그래밍/SNS 관련 개발페북 앱 추가를 쉽게 하기 위한 앱을 만들었습니다.
팬페이지로 만들어두었습니다. 좋아요~ 한번 눌러주시구 편하게 사용하세요. ^^
http://www.facebook.com/pages/Hometown-Fan-Page/267525293321443?sk=app_374942652515928
팬페이지로 만들어두었습니다. 좋아요~ 한번 눌러주시구 편하게 사용하세요. ^^
http://www.facebook.com/pages/Hometown-Fan-Page/267525293321443?sk=app_374942652515928
5. 페이스북 팬 페이지에 페이스북 앱 추가하기
프로그래밍/SNS 관련 개발페이스북 팬 페이지에 페이스북 앱을 추가해보자.
아래와 같이 만들어진 팬 페이지가 있다. 이곳에 왼편 메뉴에 만들어진 앱을 추가해보자.
어플리케이션을 추가할 페이지를 선택하게 된다. 자신이 만들어낸 여러개의 팬 페이지가 나타나게 되고 원하는 페이지를 선택하면 된다.
한번 더 컨펌을 아래와 같이 받으면~
팬 페이지에 새로운 탭 메뉴인 '블로그 최신글' 이라는 메뉴가 나타남을 볼 수 있다. 마우스를 가져다 대보면 메뉴 왼편에 x 표시가 나타나고 x를 누르게 되면 탭페이지는 메뉴에서 삭제된다.
그 메뉴의 하단에 '수정' (Edit) 버튼을 누르게 되면 화면이 아래와 같이 바뀌게 되고 마우스로 드래그를 통해서 메뉴의 위치를 조절 할 수 있다. 위아래 로 이동 가능한데 석삼자 모양이 나타나는 메뉴끼리만 이동이 가능하다.
기본적으로 제공하는 담벼락, 정보, 친구 활동 등의 메뉴 위로는 움직여지지 않는다. 아까비~
이제 팬 페이지도 만들었고 앱도 등록하는 방법을 모두 터득하였다.
얼마나 쉬운가 말이다.
앞으로는 PHP SDK와 소셜 플러그인과 관련한 부분을 공부하면서 정리해보려 한다.
아래와 같이 만들어진 팬 페이지가 있다. 이곳에 왼편 메뉴에 만들어진 앱을 추가해보자.
페이스북 팬페이지를 등록하기 위해서는 한개의 URL을 알아야만 한다.
예전에는 탭 페이지 추가를 위한 UI를 화면상에 제공하였으나 현재는 해당 기능이 어디론가 사라졌다.
따라서 아래와 같이 URL을 기억하고 직접 입력하여 등록해야만한다. ㅠㅠ 머 이딴... 떱~ 꾸욱 참자...
http://www.facebook.com/add.php?api_key=[App ID]&pages=1
App ID 부분에는 app 등록시에 발급받은 App ID 값을 입력하는 곳이다.
해당 URL을 브라우저에서 불러보면 아래와 같은 화면이 나타난다.
어플리케이션을 추가할 페이지를 선택하게 된다. 자신이 만들어낸 여러개의 팬 페이지가 나타나게 되고 원하는 페이지를 선택하면 된다.
한번 더 컨펌을 아래와 같이 받으면~
팬 페이지에 새로운 탭 메뉴인 '블로그 최신글' 이라는 메뉴가 나타남을 볼 수 있다. 마우스를 가져다 대보면 메뉴 왼편에 x 표시가 나타나고 x를 누르게 되면 탭페이지는 메뉴에서 삭제된다.
그 메뉴의 하단에 '수정' (Edit) 버튼을 누르게 되면 화면이 아래와 같이 바뀌게 되고 마우스로 드래그를 통해서 메뉴의 위치를 조절 할 수 있다. 위아래 로 이동 가능한데 석삼자 모양이 나타나는 메뉴끼리만 이동이 가능하다.
기본적으로 제공하는 담벼락, 정보, 친구 활동 등의 메뉴 위로는 움직여지지 않는다. 아까비~
이제 팬 페이지도 만들었고 앱도 등록하는 방법을 모두 터득하였다.
얼마나 쉬운가 말이다.
앞으로는 PHP SDK와 소셜 플러그인과 관련한 부분을 공부하면서 정리해보려 한다.
4. Facebook Fan page 만들기
프로그래밍/SNS 관련 개발페이스북 앱까지 개발이 완료되었고 이젠 페이스북 팬 페이지를 개설하여 보자.
페이스북 팬 페이지를 만들기 위해서는 페북 화면의 맨 하단에 주목해야 한다.
화면의 맨 하단에 Create a Page (페이지 만들기) 라는 메뉴가 아주 조그만하게 적혀져 있다. 한글 페이지와 영문 페이지를 함께 보여드리니 참고하시기 바란다.
한글 화면...
해당 메뉴를 클릭하면 위의 화면이 뜨게 된다.
여기서 Cause or Community (비영리, 자선단체) 페이지로 만들어본다. 다른 것으로 해도 상관이 없다. 필자가 그냥 편한데로... 만드는 것이다.
마우스를 해당 메뉴에 가져다 대면 아래와 같이 나타나는데 해당 팬 페이지의 타이틀을 아래의 칸에 입력하면 된다.
이름을 입력한 후에는 3가지의 단계가 이어지는데 우선 해당 페이지의 프로필 이미지를 등록하게 된다. 이 프로필 이미지는 페이스북 화면의 좌측 메뉴 영역에 나타나게 되므로 가로 폭이 좁다. 해당 폭을 참작하여 세로로 긴 이미지를 이용하는 것이 좋다.
다음으로 친구를 초대하거나 페이지를 쉐어한다. 이 부분은 바로 처리하지 않고 페이지를 모두 구성하고 난 후에도 가능하니 일단 그냥 Continue~
해당 팬 페이지와 관련있는 웹 사이트 정보와 팬 페이지에 대한 간략한 소개글을 입력한다.
자 이제 페이지 구성이 완료되었다. 짜잔~~~
화면의 왼편에 프로필 이미지 와 메뉴들, 그 아래 쪽에 About...
화면 중앙은 담벼락 구간이다.
이 구간에는 담벼락과 Page Tab이 표시되게 되는 구간이 되겠다.
앞에서 입력했던 정보들은 화면 우상단에 페이지 관리 (Edit Page) 버튼을 클릭하여 언제든 변경할 수 있다.
위의 화면은 페이지를 개설한 사용자이기 때문에 시작하기(Get Started ) 페이지가 우선 뜨게 되어있다.
이 부분은 이후에 메인 페이지를 변경할 수 있다.
페이지 관리 부분에 들어가면 다양한 관리 기능들이 있다. 접근할 수 있는 국가를 제한한다던지 사용자 연령대를 제한한다던지 이런 것들이 필요한 앱이라면 관리를 해주는 것이 좋겠다.
페이지 만들기는 여기까지~ ^^
페이스북 팬 페이지를 만들기 위해서는 페북 화면의 맨 하단에 주목해야 한다.
화면의 맨 하단에 Create a Page (페이지 만들기) 라는 메뉴가 아주 조그만하게 적혀져 있다. 한글 페이지와 영문 페이지를 함께 보여드리니 참고하시기 바란다.
한글 화면...
해당 메뉴를 클릭하면 위의 화면이 뜨게 된다.
여기서 Cause or Community (비영리, 자선단체) 페이지로 만들어본다. 다른 것으로 해도 상관이 없다. 필자가 그냥 편한데로... 만드는 것이다.
마우스를 해당 메뉴에 가져다 대면 아래와 같이 나타나는데 해당 팬 페이지의 타이틀을 아래의 칸에 입력하면 된다.
이름을 입력한 후에는 3가지의 단계가 이어지는데 우선 해당 페이지의 프로필 이미지를 등록하게 된다. 이 프로필 이미지는 페이스북 화면의 좌측 메뉴 영역에 나타나게 되므로 가로 폭이 좁다. 해당 폭을 참작하여 세로로 긴 이미지를 이용하는 것이 좋다.
다음으로 친구를 초대하거나 페이지를 쉐어한다. 이 부분은 바로 처리하지 않고 페이지를 모두 구성하고 난 후에도 가능하니 일단 그냥 Continue~
해당 팬 페이지와 관련있는 웹 사이트 정보와 팬 페이지에 대한 간략한 소개글을 입력한다.
자 이제 페이지 구성이 완료되었다. 짜잔~~~
화면의 왼편에 프로필 이미지 와 메뉴들, 그 아래 쪽에 About...
화면 중앙은 담벼락 구간이다.
이 구간에는 담벼락과 Page Tab이 표시되게 되는 구간이 되겠다.
앞에서 입력했던 정보들은 화면 우상단에 페이지 관리 (Edit Page) 버튼을 클릭하여 언제든 변경할 수 있다.
위의 화면은 페이지를 개설한 사용자이기 때문에 시작하기(Get Started ) 페이지가 우선 뜨게 되어있다.
이 부분은 이후에 메인 페이지를 변경할 수 있다.
페이지 관리 부분에 들어가면 다양한 관리 기능들이 있다. 접근할 수 있는 국가를 제한한다던지 사용자 연령대를 제한한다던지 이런 것들이 필요한 앱이라면 관리를 해주는 것이 좋겠다.
페이지 만들기는 여기까지~ ^^
3. Facebook App 등록하기
프로그래밍/SNS 관련 개발이제 페이스북 앱에 대한 등록을 해보자.
우선 페이스북 앱을 등록하기 위해서는 http://developers.facebook.com 사이트에 들어가야 한다.
화면의 상단에 앱 (Apps) 메뉴를 클릭한다.
앱을 처음 만드는 사용자라면 아래와 같이 퍼미션을 요청하는 화면을 접하게 된다.
허용(Allow)를 해주어야 앱을 등록할 수 있다.
허용이 완료되면 등록된 앱 리스트를 볼 수 있는 페이지가 나타나는데 당연히 만들어진 앱이 없다.
상단의 새 앱 만들기 (Create New App) 버튼을 클릭하면 아래와 같은 팝업 레이어가 뜨게 된다.
이곳에 앱의 등록될 이름과 네임 스페이스를 지정한다. 화면의 우측 빨강 박스에 보면 해당 이름에 대해서 유효한지 사용 가능한지를 자동으로 체크하여 보여준다. 이 부분이 Valid, Available로 표시되지 않으면 앱을 등록되지 않는다.
하단의 페이스북 플랫폼 정책을 동의하고 Continue 버튼을 누르게 되면 등록이 이어진다.
Submit을 해보지만 아래와 같이 경고 메시지를 띄운다. 이것은 개발자에 대한 인증을 하는 프로세스가 필요하다는 것이다. 핸드폰을 통해서 문자로 인증도 가능하고 신용카드를 이용한 인증도 가능하다.
다만 필자의 경우 핸드폰 인증을 여러번 시도 하였으나 문자가 오지 않아서 신용카드 인증을 통해 인증 하였다.
신용카드 인증 화면... 여기서 인증을 하게 되면 $1가 승인이 나고 바로 취소가 된다.
실제로 돈이 나가지 않는다는 의미이다.
위의 과정을 진행하고 나면 아래와 같이 비로소 앱에 대한 정보를 등록하는 등록화면이 나타난다.
위의 항목중에 우리가 테스트 해볼 3가지에 대해서 입력을 해본다.
1. Website 주소...
2. App on Facebook
이곳에서 반드시 알아야 할 내용은
App ID / API Key 값과 App Secret 값이다.
SDK를 이용하여 앱을 개발할때 반드시 위의 두 항목이 필요하게 되니 참고하시기 바란다.
위와 같이 앱이 만들어지고 나면 이제 두가지 작업이 남았다.
1. 탭과 캔버스 페이지 제작
팬 페이지의 개설과 앱의 등록에 대해서는 다음 강좌에...
우선 페이스북 앱을 등록하기 위해서는 http://developers.facebook.com 사이트에 들어가야 한다.
화면의 상단에 앱 (Apps) 메뉴를 클릭한다.
앱을 처음 만드는 사용자라면 아래와 같이 퍼미션을 요청하는 화면을 접하게 된다.
허용(Allow)를 해주어야 앱을 등록할 수 있다.
허용이 완료되면 등록된 앱 리스트를 볼 수 있는 페이지가 나타나는데 당연히 만들어진 앱이 없다.
상단의 새 앱 만들기 (Create New App) 버튼을 클릭하면 아래와 같은 팝업 레이어가 뜨게 된다.
이곳에 앱의 등록될 이름과 네임 스페이스를 지정한다. 화면의 우측 빨강 박스에 보면 해당 이름에 대해서 유효한지 사용 가능한지를 자동으로 체크하여 보여준다. 이 부분이 Valid, Available로 표시되지 않으면 앱을 등록되지 않는다.
하단의 페이스북 플랫폼 정책을 동의하고 Continue 버튼을 누르게 되면 등록이 이어진다.
등록을 하기 위해서 문자를 체크하게 된다.
Submit을 해보지만 아래와 같이 경고 메시지를 띄운다. 이것은 개발자에 대한 인증을 하는 프로세스가 필요하다는 것이다. 핸드폰을 통해서 문자로 인증도 가능하고 신용카드를 이용한 인증도 가능하다.
다만 필자의 경우 핸드폰 인증을 여러번 시도 하였으나 문자가 오지 않아서 신용카드 인증을 통해 인증 하였다.
신용카드 인증 화면... 여기서 인증을 하게 되면 $1가 승인이 나고 바로 취소가 된다.
실제로 돈이 나가지 않는다는 의미이다.
위의 과정을 진행하고 나면 아래와 같이 비로소 앱에 대한 정보를 등록하는 등록화면이 나타난다.
위의 항목중에 우리가 테스트 해볼 3가지에 대해서 입력을 해본다.
1. Website 주소...
2. App on Facebook
1) 캔버스의 주소를 입력한다. Canvas URL은 파일명이 들어갈 수 없고 도메인 또는 컨텍스트 명으로 끝나거나 폴더명으로 끝나야 한다.
2) Secure Canvas URL은 https를 이용한 URL이다. 이 부분은 2011년 10월부터 필수 항목이라고 하지만 아직은 이 부분이 없더라도 서비스에 지장은 없다. 언젠가는 지원을 갑자기 중단하는 상황이 벌어질 수 있으니 서비스를 위해서라면 https를 위한 인증서를 설치하여 준비해야만 할 것이다.
3) Canvas Page : 이후에 만들어질 캔버스 페이지의 URL이다. 해당 URL로 접근하게 되면 페이스북 UI 내에 내가 만든 캔버스 화면이 나타나게 된다.
3. Page Tab
1) Page Tab Name : 팬 페이지에 나타날 탭의 이름이다. 적당한 이름을 고민해서 입력한다.
2) Page Tab URL : 페이지 탭 프레임에 표시될 페이지의 URL이다.
3) Secure Page Tab URL : 캔버스와 마찬가지...
4) page Tab Edit URL : 페이지 탭 관리를 위한 URL. 관리 페이지를 만들었을 때 유효하다.
위와 같이 모든 등록을 마치고 저장을 하게 되면 아래와 같은 결과를 보여준다.
이곳에서 반드시 알아야 할 내용은
App ID / API Key 값과 App Secret 값이다.
SDK를 이용하여 앱을 개발할때 반드시 위의 두 항목이 필요하게 되니 참고하시기 바란다.
위와 같이 앱이 만들어지고 나면 이제 두가지 작업이 남았다.
1. 탭과 캔버스 페이지 제작
HTML, PHP, JSP 등등으로 해당 웹서버가 지원하는 형태로 아무 내용이나 입력해서 웹 페이지를 만들어 본다.
당연히 위에 등록한 URL 위치에 페이지를 만들어야 한다. ^^
당연히 위에 등록한 URL 위치에 페이지를 만들어야 한다. ^^
2. 팬 페이지 개설
개인의 담벼락에 위의 프로세스로 만들어진 앱은 등록될 수 없고 팬 페이지를 통해서만 등록하여 사용하도록 할 수 있다.
팬 페이지의 개설과 앱의 등록에 대해서는 다음 강좌에...
2. Facebook App의 종류
프로그래밍/SNS 관련 개발페이스북의 어플리케이션은 크게 여섯 가지로 나뉜다.
1. 웹사이트 (Website) : 일반 웹사이트
2. 페이지 탭 (Page Tab) : 페이스북 화면의 중앙 담벼락 내용 표시 부분을 Iframe으로 활용하는 형태의 앱
3. 페이스북 캔버스 앱 (App on Facebook) : 페이스북 화면의 좌측 메뉴와 중앙 담벼락 내용 표시 부분을 합친 구간을 캔버스로 활용하는 형태의 앱
4. 모바일 웹 (Mobile Web) : 모바일 웹페이지
5. Native iOS 앱 : iPhone을 위한 앱
6. Native Android 앱 : Android를 위한 앱
위와같이 구분이 되며 이후에는 1~3번과 관련한 내용만 언급할 예정이다.
1. 웹사이트 (Website) : 일반 웹사이트
2. 페이지 탭 (Page Tab) : 페이스북 화면의 중앙 담벼락 내용 표시 부분을 Iframe으로 활용하는 형태의 앱
3. 페이스북 캔버스 앱 (App on Facebook) : 페이스북 화면의 좌측 메뉴와 중앙 담벼락 내용 표시 부분을 합친 구간을 캔버스로 활용하는 형태의 앱
4. 모바일 웹 (Mobile Web) : 모바일 웹페이지
5. Native iOS 앱 : iPhone을 위한 앱
6. Native Android 앱 : Android를 위한 앱
위와같이 구분이 되며 이후에는 1~3번과 관련한 내용만 언급할 예정이다.
1. Facebook 개발자 사이트
프로그래밍/SNS 관련 개발페이스북 관련 개발을 위해서는 우선 이 사이트가 필수일 것이다.
http://developers.facebook.com/
페이스북 개발자 사이트이다. 이 곳에는 페북 SDK를 연동한 개발 및 소셜 플러그인 관련 정보등 다양한 정보를 담고 있다.
화면 상단에는 4가지 메뉴가 있다.
개발자 문서 (Documentation), 지원 (Support), 블로그 (Blog), 앱 (Apps)
1. 개발자 문서를 선택하게 되면 개발과 관련한 문서 SDK의 다운로드 부터 설치, 사용법까지 자세한 안내를 받을 수 있다.
2. 지원 메뉴에서는 플랫폼의 상태 정보, 버그, 커뮤니티 등의 정보를 담고 있다.
3. 블로그는 플랫폼의 업데이트 정보 등을 담는데 이곳을 주목해야 한다. 왜냐하면 개발자 문서 업데이트는 느리지만 이곳의 업데이트는 빠른 편이다. 실제로 페북 SDK는 아마추어틱하게 갑자기 기능이 사라지거나 추가되는 경우가 있는데 이런 정보가 업데이트가 잘 안되는 편이다. 개발자로써는 난감한 경우가 있으니 이 블로그를 주시하여야 한다.
4. 앱 메뉴는 내가 만든 어플리케이션을 관리하는 메뉴이다. 이 부분은 차후 다루기로 한다.
이렇게 간단히 페이스북 개발자 사이트를 소개한다.
http://developers.facebook.com/
페이스북 개발자 사이트이다. 이 곳에는 페북 SDK를 연동한 개발 및 소셜 플러그인 관련 정보등 다양한 정보를 담고 있다.
화면 상단에는 4가지 메뉴가 있다.
개발자 문서 (Documentation), 지원 (Support), 블로그 (Blog), 앱 (Apps)
1. 개발자 문서를 선택하게 되면 개발과 관련한 문서 SDK의 다운로드 부터 설치, 사용법까지 자세한 안내를 받을 수 있다.
2. 지원 메뉴에서는 플랫폼의 상태 정보, 버그, 커뮤니티 등의 정보를 담고 있다.
3. 블로그는 플랫폼의 업데이트 정보 등을 담는데 이곳을 주목해야 한다. 왜냐하면 개발자 문서 업데이트는 느리지만 이곳의 업데이트는 빠른 편이다. 실제로 페북 SDK는 아마추어틱하게 갑자기 기능이 사라지거나 추가되는 경우가 있는데 이런 정보가 업데이트가 잘 안되는 편이다. 개발자로써는 난감한 경우가 있으니 이 블로그를 주시하여야 한다.
4. 앱 메뉴는 내가 만든 어플리케이션을 관리하는 메뉴이다. 이 부분은 차후 다루기로 한다.
이렇게 간단히 페이스북 개발자 사이트를 소개한다.
댓글을 달아 주세요