<![CDATA[
<div class="txc-textbox" style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(121, 165, 228); border-right-color: rgb(121, 165, 228); border-bottom-color: rgb(121, 165, 228); border-left-color: rgb(121, 165, 228); background-color: rgb(219, 232, 251); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><p><span style="color: rgb(0, 0, 0);"><br>3월 중순부터 페이스북이 그동안 독자적으로 제공해오던 FBML 랭귀지를 이용한 어플리케이션 신규 지원을 중지하면서 개발환경에 중요한 변화가 생겼지요... 오래동안 페이스북 페이지를 꾸미기 위해 주로 사용되던 <정적 FBML>을 이용한 탭 설치 기능이 불가능해지면서, 이를 아이프레임으로 대체할 수 있는 방법에 대한 요청이 대두되고 있습니다. </span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">특히 개인적으로 페이지에 웰컴 랜딩탭을 스스로 만들어서 사용해오던 분들이 이에 대한 요청이 더 많아진 셈인데, 정작 개인 앱을 만들어 탭을 생성하는 방법을 잘 모르시는 분들께서는 FBML도 뭔 소리인지 모르겠는데, iframe은 또 뭐냐고 하실 분도 계실 것 같습니다. 이에 대해서 몇몇 분께서 좋은 소개 글들을 올려주셔서 앱을 잘 모르시는 분들도 웬만큼은 그림을 보시면 따라 하실 수 있게 되었습니다. </span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">문제는 아무래도 사람들이 프로그래밍 경험이 없다보면 그래도 역시 뭔 말인지 따라하기 힘든 구석들이 많다는 점이지요. 저같은 비프로그래머들은 남들이 써놓은 설명서를 그대로 따라해보다가도 안되는 대목에서 콱 막히곤 하지요. 그래서 여기서는 안되는 대목이 뭔지까지 캡쳐해서 보여드리는 게 최선이지 않을까 싶어서, 제 앱 설치 경험담을 써 올려 드립니다...<br></span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">이 글은 김진선 님이 자신의 블로그 안에 남겨주신 페이스북에 iframe 방식을 이용한 앱 설치 방법 설명을 읽으면서 그대로 따라해 보면서 설명에서 생략한 부분이나 누락된 화면그림을 보완하는 방식으로 쓴 것입니다. 그러므로, 아래 제 설치 경험담을 보시기 전에 기본적인 컨셉은 아래 링크 글을 먼저 보면 더 쉽고 빠르게 따라오실 수 있을 겁니다....</span></p></div><p><span style="color: rgb(0, 0, 0);"><br></span></p><div class="txc-textbox" style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(254, 137, 67); border-right-color: rgb(254, 137, 67); border-bottom-color: rgb(254, 137, 67); border-left-color: rgb(254, 137, 67); background-color: rgb(254, 222, 199); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><p><span style="color: rgb(0, 0, 0);">김진선 님의 글을 보시려면 아래 링크를 클릭해 주세요. 제가 전재에 대한 허락을 받지 않았기에 그냥 링크만 남겨 드립니다.<br></span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><a href="http://virtualmarket.tistory.com/29"><span style="color: rgb(204, 61, 61);"><span style="font-weight: bold;"><span style="font-size: 14pt; ">http://virtualmarket.tistory.com/2</span><span style="font-size: 14pt; ">9</span></span></span></a></p></div><p><span style="color: rgb(0, 0, 0); "><br></span></p><div class="txc-textbox" style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(159, 211, 49); border-right-color: rgb(159, 211, 49); border-bottom-color: rgb(159, 211, 49); border-left-color: rgb(159, 211, 49); background-color: rgb(231, 253, 181); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><p><span style="color: rgb(0, 0, 0);">그럼 지금부터 제 따라하기 경험담을 들려 드립지요...</span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">먼저 알아두시면 좋은 점은,</span></p><p><span style="color: rgb(0, 0, 0);">페이스북 페이지 안에 나만의 앱을 직접 개발하여 붙이시려면, 기본적으로 [개발자]로 등록하고, 개발자 id를 얻어야 합니다.</span></p><p><span style="color: rgb(0, 0, 0);">그리고 앱을 만들 때마다 app 의 고유 넘버를 따셔야 합니다. 등록이라고 해서 직접 등록하는 것이 아니라 앱의 타이틀과 옵션들을 입력하면 자동으로 생성되는 것들입니다. 이 개발자 등록 과정에서 [사람 인증]을 위해서 [휴대폰] 또는 [신용카드] 인증을 통해서 본인 확인을 거치게 됩니다. 여기서는 그 과정부터 알려드립니다....아래 그림을 순서대로 잘 따라와 보시지요...</span></p><p><font color="#000000"><br></font></p><p><span style="font-weight: bold; color: rgb(204, 61, 61);"><span style="font-size: 18pt; ">1. 앱 개발자로 등록하기</span></span></p><p><font color="#000000" style="font-weight: bold;"><br></font></p><p><font color="#000000" style="font-weight: bold;">1-1. 개발자 등록 사이트 접속 : http://www.facebook.com/developers/ </font></p><p><font color="#000000">웹</font><font color="#000000">브라우저 주소창에 위 주소를 입력 후 엔터, </font><span style="color: rgb(0, 0, 0); ">아래 화면이 나오면 [허가하기] 버튼 클릭!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1920863E4D9752D337" class="txc-image" actualwidth="792" hspace="1" vspace="1" border="0" width="792" style="clear:none;float:none;" id="A_1920863E4D9752D3375C2B"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-2. 최근 페이스북이 개발 언어를 FBML방식에서 iframe 방식으로 대체 이전하면서 생기는 </span><span style="color: rgb(255, 0, 0);">일시적인 에러(?)로</span><span style="color: rgb(0, 0, 0);"> 보이는데, 한글 환경에서 [허가하기] 버튼을 누르면 거의 모든 앱에서 아래와 같은 [에러 메시지] 경고가 뜨고 있슴.</span><span style="color: rgb(204, 61, 61);"> (단지 이 앱만이 아니라 신규 앱을 설치하려고 하면 대부분 나오는 에러 페이지로, 일시적인 현상으로 보이므로 해결되면 안 나타나게 될 것임.)</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1140D23E4D9752D311" class="txc-image" actualwidth="789" hspace="1" vspace="1" border="0" width="789" style="clear:none;float:none;" id="A_1140D23E4D9752D311849C"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-3. 위의 1-2 에서 나오는 에러화면 메시지를 무시하고 앞서 처음 클릭했던 개발자 등록 페이지 주소 </span><span style="color: rgb(0, 0, 0); ">http://www.facebook.com/developers/ 로 되돌아가거나 다시 한번 클릭하면 이번에는 [허가하기] 를 따로 묻지 않고</span></p><p><span style="color: rgb(0, 0, 0);">아래와 같이 [개발자] 등록 페이지가 정상적으로 보이게 됨. ==>여기서 </span><span style="font-weight: bold; color: rgb(204, 61, 61);">[새 애플리케이션 만들기] 버튼 클릭!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1945713E4D9752D30C" class="txc-image" actualwidth="866" hspace="1" vspace="1" border="0" width="866" style="clear:none;float:none;" id="A_1945713E4D9752D30C321D"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-4. 여러분이 지금까지 페이스북에 한번도 앱 개발자로 등록한 적이 없는 생초짜 신참으로 자신의 계정으로 앱 개발자</span></p><p><span style="color: rgb(0, 0, 0);">아이디가 없을 경우 아래와 같이 [회원님의 계정을 확인] 하라는 경고 화면이 뜰 것임.</span></p><p><span style="color: rgb(0, 0, 0);">자신이 사용하고 있는 페이스북 계정이 외부의 타인에 의해 도용되지는 않을지 미리 예방하기 위해서 현재 접속자가</span></p><p><span style="color: rgb(0, 0, 0);">본인인지를 다시 한번 확인하는 형식 절차입니다. 휴대폰, 신용카드 두 가지 방법으로 본인 인증을 거치게됨.</span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">여기서는 우리 모두에게 익숙한 [휴대폰] 인증 과정을 보여드림...</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/162CFD3E4D9752D328" class="txc-image" actualwidth="787" hspace="1" vspace="1" border="0" width="787" style="clear:none;float:none;" id="A_162CFD3E4D9752D32821A3"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-5. 문자수신이 가능한 휴대폰을 옆에 두시고(본인 실명을 확인하는 것은 아니니까, 자신이 인증 정보를 1:1로 등록할 수 있는</span></p><p><span style="color: rgb(0, 0, 0);">휴대폰만 있으면 가능! 위의 화면에서 [휴대폰]을 클릭하면 아래와 같은 화면이 뜸. 국가번호는 대한민국(+82)이 </span></p><p><span style="color: rgb(0, 0, 0);">기본 </span><span style="color: rgb(0, 0, 0); ">설정으로 뜰 터이니 건드릴 필요 없고, 아래쪽의 휴대폰 번호만 입력하고 [확인] 버튼 누르고 인증번호 올 때까지 준비해</span></p><p><span style="color: rgb(0, 0, 0); ">둔 휴대폰의 액정을 뚫어져라 쳐다보고 계시면 됨.</span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">* 주의할 점은 [휴대폰 번호:]를 입력할 때, 휴대폰 식별번호 "010" 중 앞에 있는 0 은 입력하시면 안됩니다. 그냥 "10" 만 입력!! (물론 010 국번을 쓰지 않고 011 을 아직까지 쓰시는 분이라면 "11"을 입력...)</span></p><p style="text-align: left; "><img src="https://t1.daumcdn.net/cfile/cafe/1233AF3E4D9752D41F" class="txc-image" actualwidth="530" hspace="1" vspace="1" border="0" width="530" style="clear: none; float: none; " id="A_1233AF3E4D9752D41F1E7E"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-6. 위에서 [확인]을 누르면 아래와 같이 [확인 번호가 전송되었습니다] 라는 안내 메시지가 뜨면서, </span></p><p><span style="color: rgb(0, 0, 0);">인증코드 입력창이 딱 나타남...</span></p><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(210, 230, 247); "><img src="https://t1.daumcdn.net/cfile/cafe/1628253E4D9752D52F" class="txc-image" actualwidth="532" hspace="1" vspace="1" border="0" width="532" style="clear: none; float: none; " id="A_1628253E4D9752D52F6DE4"/></span></span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-7. 잠시 기다리시면 자신이 입력한 번호의 휴대폰으로 아래와 같이 암호문자 같은 메시지가 도착할 것임....</span></p><p><span style="color: rgb(0, 0, 0);">여기서 메시지 글자가 깨졌든 말든 신경 쓰지 마시고, </span></p><p><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(204, 61, 61);"><span style="font-weight: bold; ">F</span><span style="font-weight: bold; ">a</span></span><span style="color: rgb(204, 61, 61); font-weight: bold;">cebook... ???? : 뒤의 영문자+숫자 조합으로 된 [6자리 인증코드]를 찾아서 입력해주면 끝!</span></p><p style="text-align: left; "><span style="color: rgb(0, 0, 0);"><img src="https://t1.daumcdn.net/cfile/cafe/131EC03C4D97593D2F" class="txc-image" actualwidth="460" hspace="1" vspace="1" border="0" width="460" style="clear: none; float: none; " id="A_131EC03C4D97593D2F5FB7"/></span></p><p style="text-align: center; "><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-8. 인증번호가 정확하게 일치하면 아래와 같이 [계정이 인증되었습니다] 라는 인증 성공 메시지가 뜹니다..</span></p><p style="text-align: left; "><img src="https://t1.daumcdn.net/cfile/cafe/112DC53E4D9752D627" class="txc-image" actualwidth="532" hspace="1" vspace="1" border="0" width="532" style="clear: none; float: none; " id="A_112DC53E4D9752D627423A"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">1-9. 앞서 1-4 단계로 되돌아가 휴대폰 인증을 시도하면 아래와 같이 이미 성공적으로 확인되었다는 메시지가 </span><span style="color: rgb(0, 0, 0); ">뜰 것임.. </span></p><p><span style="color: rgb(0, 0, 0); ">(이 인증만 성공하면 이제 페이스북 앱 설치 과정의 절반은 끝난 거나 마찬가지인 셈...^^)</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/134E8C3E4D9752D605" class="txc-image" actualwidth="846" hspace="1" vspace="1" border="0" width="846" style="clear:none;float:none;" id="A_134E8C3E4D9752D605DF8B"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(204, 61, 61); font-size: 24px; font-weight: bold; line-height: 38px; ">2. 내 어플리케이션 만들기</span></span></p><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(204, 61, 61); font-size: 24px; font-weight: bold; line-height: 38px; "><br></span></span></p><div class="txc-textbox" style="border-top-style: dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(254, 137, 67); border-right-color: rgb(254, 137, 67); border-bottom-color: rgb(254, 137, 67); border-left-color: rgb(254, 137, 67); background-color: rgb(254, 222, 199); padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; "><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(204, 61, 61); font-size: 24px; font-weight: bold; line-height: 38px; "><span style="font-size: 14pt; ">[주의] 글을 올린 뒤 페이스북의 앱 메뉴 개편으로 인해 일부 사용자 인터페이스가 수정되었습니다. 관련한 내용은 아래 개인블로그에 추가 변경판 설명을 올려드렸으니 아래 링크 글을 참고하십시오! (2011.9.15)</span></span></span></p><p><a href="http://letsgo.tistory.com/222" style="color: rgb(255, 0, 0);" target="_blank" class="tx-link"><span style="font-size: 24pt; ">http://letsgo.tistory.com/222</span></a></p></div><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-1. 앞서 1-4 항목의 </span><span style="font-weight: bold; color: rgb(204, 61, 61);">[어플리케이션 만들기</span><span style="color: rgb(0, 0, 0);">] 화면으로 되돌아가서 </span><span style="color: rgb(204, 61, 61); font-weight: bold;">[Back to My Apps] 링크</span><span style="color: rgb(0, 0, 0);">를 클릭...</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/16347B404D9752D626" class="txc-image" actualwidth="788" hspace="1" vspace="1" border="0" width="788" style="clear:none;float:none;" id="A_16347B404D9752D626503F"/></p><p><span style="color: rgb(0, 0, 0); "><br></span></p><p><span style="color: rgb(0, 0, 0); ">2-2. [내 어플리케이션] 이라는 창이 나오면 뒷쪽에 있는</span><span style="color: rgb(204, 61, 61); font-weight: bold;"> [+ 새 애플리케이션 만들기] </span><span style="color: rgb(0, 0, 0); ">버튼 또는 아래 중앙의 문장</span></p><p><span style="color: rgb(0, 0, 0); ">Y</span><span style="color: rgb(204, 61, 61);">ou have no apps 뒤에 있는 [만들기] 링크를 클릭! (전에 app을 만든 경험이 있다면 이 메시지는 안 뜰 것임.)</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/124C04404D9752D60C" class="txc-image" actualwidth="784" hspace="1" vspace="1" border="0" width="784" style="clear:none;float:none;" id="A_124C04404D9752D60C32C3"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-3. 다음과 같이 [필수정보] 항목이 나오면 임의로 자신이 만들고 싶은 앱의 성격에 따라 </span><span style="color: rgb(204, 61, 61); font-weight: bold;">적당하게 [어플리케이션 이름]을</span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">지어 입력해주고 [약관에 동의] 쪽에 체크를 하고 나서 하단의 [어플리케이션 만들기] 버튼을 클릭!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/202BED404D9752D739" class="txc-image" actualwidth="776" hspace="1" vspace="1" border="0" width="776" style="clear:none;float:none;" id="A_202BED404D9752D7399D30"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-4. 아래와 같은 [보안 확인] 창이 나타나면 윗창에 보이는 그림문자를 그대로 아래쪽 [상자 안의 글자:] 창에 그대로 입력한</span></p><p><span style="color: rgb(0, 0, 0);">뒤 [확인]을 클릭!!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1144FB404D9752D715" class="txc-image" actualwidth="801" hspace="1" vspace="1" border="0" width="801" style="clear:none;float:none;" id="A_1144FB404D9752D715ECB8"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-5. 지어 입력해준 이름을 가진 앱이 생성되면서 아래와 같은 추가 입력할 수 있는 [***(앱 이름) 를 수정] 하는 입력창이 뜨고,</span></p><p><span style="color: rgb(0, 0, 0);">디폴트 화면이 [About] 탭화면으로 나올 것임.</span></p><p><span style="color: rgb(0, 0, 0);">설명을 좀 더 보완하고 앱 아이콘을 바꾸고 싶으면 [change your icon]를 눌러 기본 아이콘 이미지를 바꾸고, </span></p><p><span style="color: rgb(0, 0, 0);">로고 및 언어 설정 등을 </span><span style="color: rgb(0, 0, 0);">설정한 뒤,</span><span style="color: rgb(204, 61, 61); font-weight: bold;"> [변경내용 저장] 버튼을 클릭!! </span><span style="color: rgb(204, 61, 61); ">(다른 설정 항목들은 꼭 입력하지 않아도 무방함)</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1946CD404D9752D712" class="txc-image" actualwidth="982" hspace="1" vspace="1" border="0" width="982" style="clear:none;float:none;" id="A_1946CD404D9752D7124B2D"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-6. </span><span style="color: rgb(0, 0, 0); ">왼쪽 사이드 메뉴의 다음 항목인 [Web Site] 탭을 눌러서 자동으로 주어진 앱의 ID를 확인해 놓기 바람.</span></p><p><span style="color: rgb(0, 0, 0);">아이프레임 탭을 설정할 때는 필요치 않지만, </span><span style="color: rgb(204, 61, 61);">나중에 다른 곳에서 앱을 사용하려 할 경우 코드 생성을 위해 앱 고유 id를</span></p><p><span style="color: rgb(204, 61, 61);">요구하는 경우가 자주 생기기 때문에 알아두는 게 필요함.</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/146DAA464D9752D70E" class="txc-image" actualwidth="986" hspace="1" vspace="1" border="0" width="986" style="clear:none;float:none;" id="A_146DAA464D9752D70E22A8"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-7. 왼쪽 메뉴판 중 [Facebook Integration] 설정화면을 클릭하여, </span><span style="color: rgb(204, 61, 61); font-weight: bold;">[C</span><span style="color: rgb(204, 61, 61); font-weight: bold;">anvas URL]주소를 입력해 주어야 함.</span></p><p><span style="color: rgb(0, 0, 0);">캔버스 유알엘은 아이프레임 방식을 통해 만들어진 페이스북의 새 탭 속에 들어오게 될 외부 웹페이지의 메인 도메인을 뜻함.</span></p><p><span style="color: rgb(0, 0, 0);">자신이 운영하는 웹서버가 있다면 웹서버의 메인화면 주소를 넣어주면 됨. 만약 </span><span style="color: rgb(204, 61, 61); font-weight: bold;">자신이 운영하는 블로그의 주소가 </span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">있다면 뒷부분 개별 .html 페이지 주소를 뺀 블로그 주소를 넣으면 된다. 뒤에 / 기호를 꼭 붙여야 함!! </span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">(예: http://letsgo/tistory.com/ )</span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">그리고 캔버스 유형(Canvas Type)은 [iframe]을 선택해줌. (중요함!)</span></p><p><img src="https://t1.daumcdn.net/cfile/cafe/184BCB464D9752D83F" class="txc-image" actualwidth="943" hspace="1" vspace="1" border="0" width="943" style="clear:none;float:none;" id="A_184BCB464D9752D83F0059"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">2-8. 위의 화면 아래쪽에 있는 [Page Tabs] 설정창에서는 페이스북 왼쪽 메뉴판에 노출될 해당 탭의 이름을 입력해주고,</span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">페이지 탭 유형은 아이프레임으로 선택한 뒤, [탭URL] 안에 보여주고 싶은 첫 웹페이지의 주소를 입력한 뒤,</span></p><p><span style="color: rgb(204, 61, 61);">(테스트 편의상 여기서는 제 티스토리 개인 블로그에 올려진 가장 최신 포스트글을 매칭시켰음....) <span style="font-weight: bold;">[변경내용 저장] 클릭!!</span></span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1172D9464D9752D809" class="txc-image" actualwidth="522" hspace="1" vspace="1" border="0" width="522" style="clear:none;float:none;" id="A_1172D9464D9752D8098390"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(204, 61, 61); font-size: 24px; font-weight: bold; line-height: 38px; "><br></span></span></p><p><span style="color: rgb(0, 0, 0);"><span style="color: rgb(204, 61, 61); font-size: 24px; font-weight: bold; line-height: 38px; ">3. 내 어플리케이션을 페이지에 탭으로 붙이기</span></span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-1. 위의 과정을 거치면 이제 내 어플리케이션 생성은 끝난 셈이고, 이렇게 </span><span style="color: rgb(204, 61, 61);">만든 앱을 원하는 페이지에 [탭]으로 추가하고</span></p><p><span style="color: rgb(204, 61, 61);">잘 붙었는지만 확인하면 됨. 오른쪽 앱 메뉴 중 설정관리 아래 쪽의 <span style="font-weight: bold;">[어플리케이션 프로필 페이지]를 클릭!!</span></span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1356A3464D9752D826" class="txc-image" actualwidth="763" hspace="1" vspace="1" border="0" width="763" style="clear:none;float:none;" id="A_1356A3464D9752D8267EE1"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-2. 새 앱에 대해 전반적으로 소개한 [앱 프로필] 화면으로 연결됨. 여기서 왼쪽 메뉴판 중 아래쪽에 있는 메뉴 항목 중</span></p><p><span style="color: rgb(204, 61, 61); font-weight: bold;">[내 페이지에 추가] 링크를 클릭!!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1475CF464D9752D906" class="txc-image" actualwidth="720" hspace="1" vspace="1" border="0" width="720" style="clear:none;float:none;" id="A_1475CF464D9752D906E7F4"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-3. 이렇게 하면 해당 계정으로 만들어두었던 [페이지]가 있을 경우 아래와 같이 관련 페이지 리스트들이 죽 뜰 것임.</span></p><p><span style="color: rgb(0, 0, 0);">이 중에서 내가 해당 앱(탭)이 </span><span style="color: rgb(204, 61, 61); font-weight: bold;">나타나도록 하고 싶은 페이지를 선택해 [페이지에 추가] 버튼을 클릭!!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/13598F464D9752D922" class="txc-image" actualwidth="728" hspace="1" vspace="1" border="0" width="728" style="clear:none;float:none;" id="A_13598F464D9752D922BD67"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-4. 지정해준 페이지에 해당 앱의 탭이 잘 설치되었는지를 보려면 </span></p><p><span style="color: rgb(0, 0, 0);">[계정]-[페이지 이름으로 Facebook 사용]을 눌러 아래와 같은 [팝업 창]이 뜨면 </span></p><p><span style="color: rgb(0, 0, 0);">확인하고 싶은 페이지를 선택하여 [페이지로 전환]을 클릭함.</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/124A34464D9752D936" class="txc-image" actualwidth="732" hspace="1" vspace="1" border="0" width="732" style="clear:none;float:none;" id="A_124A34464D9752D936BC22"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-5. 해당 페이지의 프로필 화면 왼쪽 메인 메뉴판 아래쪽으로 앞서 2-8 단계에서 설정해주었던 이름의 앱(탭)이 나오는지 보고,</span></p><p><span style="font-weight: bold; color: rgb(204, 61, 61);">해당 탭을 클릭하여 지정한 웹페이지 내용이 맞게 호출되는지를 확인!</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/196B08464D9752D90F" class="txc-image" actualwidth="989" hspace="1" vspace="1" border="0" width="989" style="clear:none;float:none;" id="A_196B08464D9752D90F5425"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-6. <span style="font-weight: bold;">해당 탭에 원래 지정했던 주소의 웹페이지가 아이프레임 속으로 잘 불려져 나오면 성공적으로 설치된 것임.</span></span></p><p><span style="color: rgb(0, 0, 0);"><span style="font-weight: bold;">나만의 앱을 만들어 </span></span><span style="font-weight: bold; color: rgb(0, 0, 0); ">아이프레임 방식 탭을 삽입하고, 그 탭 속에 내가 원하는 웹페이지를 매칭시키는 데 성공!! </span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/1826E7444D9752DA29" class="txc-image" actualwidth="1017" hspace="1" vspace="1" border="0" width="1017" style="clear:none;float:none;" id="A_1826E7444D9752DA292956"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-7. 위와 같은 방식으로 만약 새로운 페이지 탭을 만들기를 원한다면 언제든 다시 [개발자] 페이지로 되돌아가,</span></p><p><span style="color: rgb(0, 0, 0);">[My apps] 메뉴 화면을 찾아서 [새 애플리케이션 만들기] 버튼을 클릭하여 새 앱을 추가로 생성하면 됨....</span></p><p style="text-align: left; "><img src="https://t1.daumcdn.net/cfile/cafe/184A2A444D98F5BA35" class="txc-image" actualwidth="916" hspace="1" vspace="1" border="0" width="916" style="clear: none; float: none; " id="A_184A2A444D98F5BA35124C"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-8. 위에서 보았던 2-3 부터의 과정이 다시 시작되면서 새 어플 만들기가 가능함..</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/164171444D9752DA02" class="txc-image" actualwidth="783" hspace="1" vspace="1" border="0" width="783" style="clear:none;float:none;" id="A_164171444D9752DA02AFFA"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">3-9. 아래와 같은 [보안 확인]이 다시 요구되지만... 이번에는 휴대폰 인증을 또 요구하지는 않음....</span></p><p style="text-align: center; "><img src="https://t1.daumcdn.net/cfile/cafe/112790444D9752DA1E" class="txc-image" actualwidth="799" hspace="1" vspace="1" border="0" width="799" style="clear:none;float:none;" id="A_112790444D9752DA1EBF1A"/></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">이상입니다...</span></p><p><span style="color: rgb(0, 0, 0);">좀 복잡해 보이긴 하지만, 이런 식으로만 따라오실 수 있으면 조금만 응용하면, 내가 불러오고 싶은 어떤 페이지든지</span></p><p><span style="color: rgb(0, 0, 0);">나만의 아이프레임 탭 속으로 불러와서 보여줄 수가 있게 됩니다... </span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);">이제 앱의 개념이나 탭의 개념이 좀 잡히시나요?? 몇 번 해보시면 어떤 개념인지 대충 파악이 되실 듯....</span></p><p><span style="color: rgb(0, 0, 0);"><br></span></p><p><span style="color: rgb(0, 0, 0);"><span style="font-weight: bold;">[추가 정보] </span></span></p><p><span style="font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 11px; line-height: normal; "><span style="color: rgb(255, 0, 0);"><span style="font-size: 12pt; ">혹시 탭 설치하고 페이지를 불러왔는데...너무 가로폭이 커서 스크롤바가 나타나는 게 보기 싫을때는 다음과 같이 스크립트를 추가해서 수정할 수 있다고 합니다...</span><span style="font-size: 12pt; "> </span><br></span><a href="http://www.fbml.co.kr/2011/03/09/facebook-iframe-scrollbar/" rel="nofollow" target="_blank" style="cursor: pointer; text-decoration: none; "><span style="color: rgb(255, 0, 0);"><span style="font-size: 12pt; ">http://www.fbml.co.kr/2011</span><span style="font-size: 12pt; "><wbr></span></span><span class="word_break" style="display: block; float: left; margin-left: -10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 12pt; "></span><span style="color: rgb(255, 0, 0);"><span style="font-size: 12pt; ">/03/09/facebook-iframe-scr</span><span style="font-size: 12pt; "><wbr></span></span><span class="word_break" style="display: block; float: left; margin-left: -10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-size: 12pt; "></span><span style="color: rgb(255, 0, 0);"><span style="font-size: 12pt; ">ollbar/</span></span></a></span></p></div><div id="__KO_DIC_LAYER__" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: fixed; z-index: 999999999; overflow-x: hidden; overflow-y: hidden; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(51, 51, 119); border-right-color: rgb(51, 51, 119); border-bottom-color: rgb(51, 51, 119); border-left-color: rgb(51, 51, 119); display: none; "><iframe frameborder="0" scrolling="yes" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255); "></iframe></div><p><br></p>
<!-- -->
]]>
카페 게시글
개발자 정보
체험기
[iframe]탭 추가용 자가 앱 설치 도전기
렛츠고
추천 0
조회 1,332
11.04.03 01:47
댓글 8
북마크 번역하기 공유하기 기능 더보기
다음검색
첫댓글 따라하기를 통해서 처음으로 아이프레임을 이용한 앱을 만들고 탭속으로 집어넣어 보았습니다.
친절한 포스팅 만드시느라 수고가 많으셨습니다.
감사합니다!!!
ㅎㅎ 잘 되셨다니 다행입니다.... 저도 처음에는 앱 개발자 아이디 등록하고 찾느라 고생한 적이 있어서 개념 잡는게 좀 힘들었더랬습니다... 단계별 개념만 대충 서도 그리 힘들지는 않을 터인데... 자기가 운영하는 웹서버까지 있으면 단지 기존에 있는 페이지를 불러오는 수준을 넘어서 게임이나 엑셀 시트같은 프로그램까지 집어 넣을 수 있더라고요...^^
우와 이건 아까 본거보다 더좋네요~ 이건 페북 official document같은걸로 추천했으면 좋겟네요.
좋은 글이네요~ 인터넷 다 뒤져도 안나오던 제대로 된 팁이네요 ^^
감솨합니다 렛츠고님 ^^
감솨요ㅎ 해보고 안되면 문의해도되나요..?ㅎ
음... 왜 저는 화면이 다른게 나올까요??
저도 다른 화면이 나와요~인터페이스화면이 또 수정되었나봐요 앱만들기 하면
app display name 적으라고 하고 app space name 적으라고 하는데 뭘 적어야 하나요?
제발 알려주세요~