-
[Facebook] 페이지에 메뉴 탭 추가하기프로그래밍/웹개발 2012. 1. 14. 01:54
이벤트가 페이지끼리 꼬여버리는 무참하고 심각한 오류가 발생하여, 조치 하였습니다... 만 계속 주시하고있겠습니다. 죄송합니다. 해당 문제와 관련하여 초기화가 이루어졌습니다.
이미지 업로드 최대 용량이 1메가로 상향되었습니다.
탭 메뉴에서 저희 배너가 댓글 아래로 이동되었습니다.
익스플로러에서 등록안되던 오류 수정되었습니다. (계속 수정중이니, 우선 구글 크롬 브라우져로 이용해주시길 추천해드립니다..ㅜ)
페이스북 페이지 메뉴추가 앱으로 만들었습니다... 의외로 간단하다면 간단하고 복잡하다면 복잡한 메뉴추가. 조금더 쉽게 하세요 ^^
아직 테스트 중으로 문제가 있을수도 있습니다. 알려주시면 최대한 빨리 수정해드리겠습니다.
급하게 하다보니 기술적으로도 약간 문제가 있었고,
편집을 쉽게 할수 있게 하려다보니 저희쪽에 어느정도 유지비가 드는 구조가 되어버려서, 우선은
탭 메뉴 하나만 추가할 수 있게돼었습니다. 죄송합니다...
아무튼 아래 쭉 한번 시험삼아 (?) 써보실분은 아래 주소로 가셔서 사용하시면 된답니다. 권한 허가하셔도,
담벼락에 아무것도 개시하지 않으니 걱정하지 마시구요. ^^
http://apps.facebook.com/rawpagemaker
* 베타중의 베타입니다. 문제가 생기면 꼭 알려주세요 ^^
번거로우신 분은 대행 해드립니다. (2012년 1월에만 합니다.)
* 마케팅 대행사 아닙니다; 페이스북 및 기타 마케팅 및 페이스북 운영/관리를 대행해드리지 않습니다.
개인/비영리단체(20명이하)의 경우만 아래 금액으로 도와드립니다. 기업체/영리목적 단체 및 20명 이상 회원의 비영리단체의 경우 별도 문의바랍니다.
www.facebook.com/rawadykorea 의 Hello! rawady 메뉴에 추가되어있는 형식대로 추가해드립니다. (이미지 + *소셜 댓글)
* 댓글은 원하실때에만
올리실 이미지 작업은 직접 해주셔야합니다 (가로 510px 미만, 세로 무관)
운영중이신 서버가 없으시면, 저희 서버에 작업해드립니다...
(페이지뷰 100회 이상 페이지에는 페이지뷰*트래픽 실비 청구합니다.. 저희 서버 관리업체 주간 리포트 페이지뷰 기준)
우선 아래대로 해보시고, c1@rawady.com 으로 메일 주세요. 제목에 '페이스북 페이지' 라고 꼭 써주세요.
대행비 페이지(메뉴)당 20,000원 10,000원 이며, (부가세 별도, 세금계산서 발행가능)위에 저희 페이지에 좋아요~! 해주시면 1,000원 빼드립니당 ~ :D
직접 하시다가 모르시는건 댓글로 써주세요 ^^ 메일로 아래 내용에 대한 질문은 참아주셔용~ 업무용 메일입니다 ^^
2월은 만원 할인의 해...~ ..
(이미지 작업 다 되어 계시면, 실 작업시간은 30분 미만입니다)
페이스북 페이지에, 담벼락 외에 이벤트라거나 다른 정보를 제공하기 위해 필요한 탭을 추가해야할 일이 왕왕있습니다.
옆의 사진을 보면, '사진' 아래의 'Hello, rawady'가 기본탭 외의 추가된 탭 메뉴입니다.
하지만 개인의 페이스북 타임라인에는 페이지 탭을 추가할 수 없고, 반드시 페이지여야 합니다.
페이지 만들기는 간단하기때문에, 테스트로 해보실분들도 하나 만드셔서 해보시면 될것 같습니다.
페이스북 페이지 만들기
위 링크로 바로 접근할 수 있습니다. 당연히 페이스북에 로그인되어 있어야 하구요 :D
아무튼, 기존에 사용하시던 페이지건, 새로 만든 테스트 페이지이건 이제 페이지는 준비 되셨다면 해봅시다!
iFrame app이나, 별도의 앱을 사용하면 페이지에 들어갔을때 제공자가 표시되어 좀 배기 싫기도 하고, 아무래도 기업에서 사용하기에는 무료도 아닌것 같습니다. 직접 만들어서 붙여도 생각보다 복잡하지 않습니다.
시작하기 전에 준비물!!
작성한 페이지를 등록할 수 있는 웹서버(웹 호스팅이라도 무관) 혹은, 구글앱스 계정 (본 글에서 구글앱스는 다루지 않습니다)
페이스북 계정
관리가능한 페이스북 페이지
새로만든 페이지입니다. 대충 아래같은 모양으로 생겼고, 귀여운 저희 회사 로고가 뜨든~
좌측 메뉴에 헬로 라와디를 추가하겠습니다. 우선 자신의 계정을 개발자 계정으로 등록해야 합니다.
개발자 등록이라고, 애플이나, 여타 소프트웨어 개발자 등록처럼 복잡한 과정은 없고, 컨펌만 해주시면 끝나니 편하게 해주세요 ^^
[페이스북 개발자 사이트 가기 ]
이게 도대체 무슨일인지... 한+영 2개국어가 짬뽕으로 나옵니다만 신경쓰지 말고 상단 메뉴중에 네번째 탭인 "앱" 을 누르세요
이미 개발자 등록되신분은, 그대로 진행하시면 되고, 아직 안하신분도 똑같이 네번째 "앱"을 선택해주세요.
아직 등록안하신분은 다음과 같은 익숙한 화면이 나타나게 됩니다.
허가만 하시면, 페이스북 개발자 등록은 끝입니다. 허가하시고 이어서 진행해주세요~
그리고 나서 "+ 새 앱 만들기" 클릭하셔요,
앱 이름을 정하라고 합니다.
App Display Name : 표시될 앱 이름을 작성해주세요, 저희는 어차피 별도로 실행할 앱이 아니라, 페이지 내에서 사용하기때문에 크게 의미는 없습니다.
App Namespace : . 앱 관리용 이름입니다. 영어 소문자로만 입력가능합니다. SKU 넘버와 비슷한 개념인듯한, 자기앱 식별용 이름일 뿐이고, 언제든지 변경가능합니다.
적당히 입력하시고 약관확인뒤에 계속하기 클릭하시고 나서, 여기저기 많이들 보셨을 확인문자 따라쓰기 잘 작성해주세요.
전 Hello, RAWADY 라고 입력했습니다. ^^
여기까지 잘 오셨나요 ??
드디어 첫 페이스북 앱이 만들어졌습니다 ~ :D 간단하지요~~~???
여전히 영어와 한글이 정신없이 혼재되어 나타납니다... 사용자 번역기능탓인지, 개발 용어들 딱히 번역할 길이 없었던 것인지 모르겠지만... 아무튼 정신없습니다. -_-;
이것저것 기능들이 많긴 하지만, 우선 다른건 다 필요없고, 페이지에 메뉴 탭을 추가하는데 집중하겠습니다.
(메뉴탭 좌측에 조그맣게 표시되는 아이콘은 앱이름 바로아래 있는 '아이콘 수정'해서 등록해주시면 됩니다.)
화면아래쪽에 "어떻게 앱을 Facebook과 통합시킬지 선택하세요" 카테고리에서 'Facebook 캔버스 앱'과 '페이지 탭' 을 설정하겠습니다.
캔버스앱은 그냥 한번 어떻게 돌아가는지 확인만 해보고 다시 삭제할겁니다. 대충 읽어만 보시고, 실제로 설정하지 않으셔도 상관없습니다.
단, 페이지 탭은 반드시 설정하셔야 합니다. 아래쪽에 이야기 하겠습니다. ^^
우선 저희는 이 두개를 설정해보겠다는것만 기억하시고, 넘어가겠습니다. (캔버스앱은 안해보셔도 무관합니다)
페이스북 페이지 탭을 추가하는 앱을 만든다. 라는 것을 다시한번 얘기하고 가야할것 같습니다.
페이스북 앱으로 페이지를 추가하기는 하지만, 이 앱이 실제로 페이지를 생성하고 꾸밀수 있게 해주지는 않습니다. 일반 웹사이트의 페이지와 같이, 사용할(여기선 보여줄) 페이지를 만들어서 별도의 서버에 올려두어야합니다.
그리고나서 위에서 만든 페이스북 앱으로 그 페이지(혹은 사이트)와 연결하게됩니다.
정리하면, 페이스북 페이지 안에서 보여주고 싶은 웹페이지를 만든뒤에, 페이스북 앱을 이용해서 페이스북 페이지 안에서 만들어둔 페이지를 보여줍니다.
대충 이런 느낌일까요 ?
그런 고로, 보여줄 페이지를 우선 만들어야 합니다.
지금 저희가 할려는 페이지앱이 사용자 정보에 접근한다거나 할일은 아직 없습니다. 단순한 일반 웹페이지로 만들면 충분합니다.
가로폭은 500px 에 body는 overflow-x:hidden; 으로 설정해주세요.
(페이스북 페이지의 컨텐츠 영역 사이즈는 510px 입니다. )
저는 대충 구글에서 주워서 편집한 이미지 하나를 보여주는 페이지를 만들었습니다.
아래는 크롬에서 만들어둔 페이지에 접속한 화면입니다. 그냥 일반적인 웹페이지와 같습니다.
(물론 만드셔서 직접 자신의 서버에 올려두셔야 합니다)
위 페이지의 html 소스입니다.
일반 페이지와 다른건 <html> 태그안에 fbml 마크업이 하나 추가된것 뿐입니다.
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Hello, RAWADY!/</title>
<meta name="viewport" content="width=510px" />
<style>
body {
font-family: 'Lucida Grande', Verdana, Arial, sans-serif; width:500px; overflow: hidden;
}
</style>
</head>
<body>
<img src="sample.png" alt=""/>
</body>
</html>
위에서 만든 페이스북 앱에 직접 웹페이지를 연결하지는 못하고, 디렉토리만 연결이 가능하기 때문에,
만들어둔 페이지를 서버에 올려두고 파일이름은 index.html / index.php / 기타 등등 바로 불러지는 index로 하셔야 합니다.
페이지에 소셜스러운 요소를 추가하는건 나중에 다시 알아보기로 하고 우선, 이대로 진행하겠습니다.
제가 페이지를 올린 주소는 http://www.rawady.com/facebook/ 입니다. 본인이 작업해서 올려둔 곳의 주소를 기억해두시고,
다시 아까 작업하던 페이스북 개발자페이지의 앱 메뉴로 돌아가주세요.
우선 Facebook canvas app을 한번 설정해보아요. (안하셔도 좋습니다)
방금 페이지를 올려두었던 곳의 주소를 캔버스 URL에 입력해주세요. 그리고 저장하면 저장되었다... 라고 나오는데 경고가 나옵니다.
2011년 10월부터 HTTPS 보안이 필수라고 합니다.
이대로 무시하고 계속 진행하면, 실제로 페이지를 연결할때 앱 내용에 따라(개발시 사용한 api에 따라서 다른것 같아 보입니다) 보안연결이 아직 지원되지 않는 앱입니다. 라며 연결되지 않습니다.
서버에 ssl 인증서가 이미 있는 분이나, 구글앱스 사용하시는분은, https://...로 시작하는 url을 적어주시면 될것 같지만, 우선 저희 서버는 ssl을 인증서를 설치하지 않았습니다.
아직 특별히 사이트로 뭔가 하고 있지도 않거니와, 결제가 이루어지거나 가입을 받는 사이트도 아니라서요 :D
그렇다고, HTTP로 시작하는 주소를, 있지도 않은 HTTPS:// 로 변경해서 그냥 입력해버리면, 페이지가 없다며, 404 에러이니 주의해주세요.
우선 비워두세요. 지금 상태의 페이지(위에서 만들어두었던 웹페이지)를 표시하는데는 문제가 없습니다.
우선 저는 페이스북의 ssl을 이용하고 있습니다. 이게 잘 되는곳도 있고 아닌곳도 있고 어정쩡한것 같지만 ...
혹시 SSL 구매없이 넘길수 있는 좋은 대안이 있다면 저도 알려주세요 ~
저장하시고, 캔버스 URL 설정하는 곳의 아래쪽에 보시면, 캔버스 페이지 주소가 표시되어 있습니다. 실제로 앱에 접근할때 쓰이는 주소입니다.
그 주소 그대로 주소창에 입력하고 이동해보세요, 지금까지 만든 앱이 보인답니다. 문제가 없었다면, 위에서 만들어서 자신의 서버에 등록해둔 페이지가 표시되어야 합니다.
위에서 만들어둔 페이지가 잘 표시되고 있네요 ^^
근데 어째 화면이 좀 남아 보입니다? 휑~ 하지요 ??
지금 보고 계시는 페이지(캔버스 페이지)에서의 가로 사이즈는 760px 입니다만, 저희가 만든 웹페이지는 이렇게 직접 별개의 앱으로 보여줄 페이지가 아니라, 페이스북 페이지 내에서 보여줘야합니다. 위에 적었던 것처럼, 페이스북 페이지안의 컨텐츠 영역 사이즈는 510px 이니 걱정하지 마셔요,
혹시 지금 보고 계신 화면에 맞추실려고 760px로 가로 사이즈를 설정하시면, 페이지탭에서 볼때에, 가로로 스크롤바가 생겨서 영 보기싫게 나옵니다.
아래는 페이지 탭을 만드시려면 반드시 설정하셔야 합니다.
처음에 "캔버스 앱" 과 "페이지 탭" 두가지를 설정해야 하고, 캔버스 앱은 다시 삭제한다. 고 말씀드렸던데로, 캔버스 앱은 이제 다시 삭제하겠습니다.
다시 개발자 페이지로 돌아가셔서 앱 선택하시고, 만들어 두신 앱의 "앱 수정" 버튼을 눌러주세요.
아까 설정해둔 캔버스 앱 우측 상단에 x 표를 눌러서 삭제합니다. 앱을 통채로 삭제하시면 처음부터 다시 하시면 됩니다. .... ;; > <
지우시고, 페이지 탭을 선택해서 정보들을 채우고 저장 하시옵소서~
페이지 탭 이름 : 페이스북 페이지의 메뉴에서 보일 이름을 적으시면 됩니다.
페이지 탭 URL : 위에 캔버스 앱 설정할때 적었던 캔버스 URL과 똑같이 ( 웹페이지 만들어서 올려둔 URL ) 적어주세요.
이대로 저장하면 또 https가 필수라며 경고가 나옵니다만... 우선 무시.
이제 아까 위에서 해봤던 http://apps.facebook/appname 주소로 들어가도 접속되지 않습니다.
주소창에 아래 URL을 입력하세요.
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL
URL 중간에 YOUR_APP_ID와 YOUR_URL을 수정해야 합니다.
YOUR_APP_ID는 개발자 페이지의 앱 메뉴에서 확인할 수 있습니다.
요약란의 "앱 ID/API 키" 라고 되어있는값을 그대로 복사해서 YOUR_APP_ID 자리에 넣으시면 됩니다.
마지막의 YOUR_URL은 페이지 등록후 돌아올 주소입니다.자기 페이지 주소로 하시면 됩니다.
수정/추가합니다!!!!
대행비를 벌기위해 파놓은 함정이었....던건 아니지만 부연설명 + 수정하겠습니다. 혼란 드려 죄송합니다 . _ _ . 부끄..
오류코드가 191일경우에만 해당합니다.
YOUR_URL 란에 입력할 URL은 반드시 앱설정에서 정의된 URL이어야 합니다.
canvas app의 페이지던 뭐던간에 말이죠,
본 글대로라면 제 경우에 가능한 URL은 페이스북 앱을 등록하는 서버인 " http://www.rawady.com/facebook "
또는, http://www.facebook.com 이 가능합니다.
만약에 위 캔버스 앱을 삭제하지 않았다면, http://app.facebook.com/hellorawady 도 가능하겠네요.
다시한번 혼란드린건 사과드리고, 대행으로 알바비 벌려던 수작은 대 실패~ 뜬! (농담입니다....;)
잘 해결되셨다면 저희 페이스북에 좋아요 한번 쾅! 해주시면 2012 가정은 평온하며, 사랑이 이루어지고,
사업도 대박나고, 흑용이 날라와서 소원을 이루어주....면 좋겠습니다! ^___^
잠시 다녀오세요. 요깁니다 ---- > http://www.facebook.com/rawadykorea(새창으로 열립니다)
귀찮으시면 우측 블로그 메뉴 중간쯤에서 콕!
입력하고 이동하면 다음화면이 나옵니다. 메뉴를 추가할려는 페이지를 선택하고 추가하시면 끝입니다~ ^^
끝났습니다~ ^^
추가되어 있는 페이지는 http://www.facebook.com/rawadykorea 에서 확인할 수 있습니다 ^^
위 글에 사용된 이미지는 마커주커버그님에 테드에 페북에... 온갖가지 상표가 포함되어있어 실제 페이지에는 변경하였습니다.
혹시나 도움이 되셨다면, 위에 가셔서 좋아용~ 한번 콕 눌러주시면 캄사드리옵니다 ~ :D
본 글에 포함된 ©RAWADY를 제외한 모든 상호/상표는 해당 기업 또는 저작권자의 등록된 상표이며, 공식 허가를 받고 사용한 이미지가 아닙니다. 서버에 등록된 이미지는 글 작성후 바로 삭제하였습니다.
'프로그래밍 > 웹개발' 카테고리의 다른 글
[3분요리] 플래시 필요없는 이미지 슬라이더 v.0.4 beta - update 0.4 (4) 2012.01.29 페이스북 메뉴 추가 - 위시랜드 (0) 2012.01.24 티스토리 모바일 광고 애드센스로 변경 코드생성기 v2 (24) 2011.11.27 [심술] 티스토리 모바에 멋대로 붙는 광고/실시간이슈 꼴배기 싫다. (2) 2011.11.25 [JavaScript] 새로운 DOM 문서 생성 (0) 2011.11.06 댓글
