지난 4월초에 [페이스북 비즈니스--페이스북 페이지 완전정복] 이라는 책을 펴내면서 부록으로 첨부한 몇가지 사용팁이 있습니다. 그 중에서 [부록2]_페이스북 페이지에 iframe탭 추가하기 라는 설명 부분이 있는데, 페이스북의 잦은 메뉴 변경으로 인해 책에 실어둔 설명과 그림이 그 사이에 또 바뀌어서 잘 안 맞는다고 설명을 다시 해달라는 요청이 그동안 몇차례 있었습니다. 시간을 내지 못해서 차일피일 미루다가 추석 연휴 끝나기 전에 올리마고 벼르다가 이제서야 시간을 냅니다...


이 글은 http://cafe.daum.net/facebookkorea/FKeK/8  에서 다룬 내용 중 일부 수정된 곳을 반영하여 재설명하는 글이므로 페이스북에 탭을 설치하기 위해 가장 먼저 필요한 1단계 작업_페이스북에 [개발자]로 등록하고 개발자 app-id를 받는 과정은 설명 생략합니다. 필요한 분은 윗 글 링크를 먼저 보시고, 아래 내용을 참고하십시오.


1. 만들어 두었던 기존 앱을 수정하거나 혹은 새로운 앱을 만들기 위해 먼저 개발자로 등록한 페이스북 계정으로 접속한 상태에서 아래의 링크 페이지로 접속!
https://developers.facebook.com/apps   


2. 우측 상단의 [+새 앱 만들기] 버튼 클릭, [App Name] 칸에 임의로 원하는 앱(탭삽입용)의 이름을 부여함.



3. [보안 확인] 팝업 창이 뜨면 요구하는 보안 그림 단어를 맞추어 입력하고 [확인] 클릭,



4. 새로 만든 앱의 이름으로 Basic 설정창이 뜨면 [기본정보] 항목란의 표시내용 및 카테고리 옵션을 필요에 따라 선택하여 설정하고, (특별히 구분하고 싶지 않으면 손대지 않아도 됨.) 네 가지 선택지 중 맨 아래 있는
[페이지 탭] 부분 링크를 클릭함!!



5. [페이지 탭] 옵션 추가 입력 항목이 아래쪽으로 슬라이드되어 펼쳐지면 여기에
[페이지 탭 이름](페이지에 삽입했을 때 해당 페이지가 노출되는 탭의 이름이 됨) 과 [페이지 탭 URL]을 입력하고, 아래 쪽 [변경내용 저장] 버튼을 클릭함.


** 중요 보너스 팁

여기서 [페이지 탭 URL]은 내가 새로 설치한 앱을 통해 원하는 페이지의 탭 링크를 클릭했을 때 페이스북 본문 창에 뜨는 웹페이지 주소를 의미합니다. 통상 특정한 블로그의 페이지를 연동시키고 싶다고 가정할 경우, 해당 페이지의 URL주소를 그대로 카피해서 붙여넣기 해주면 무방합니다.
만약, 티스토리 블로그의 특정 페이지를 탭으로 연동시켜 보여주고 싶다면, 통상 아래와 같이 자신의 블로그명 뒤에 해당 포스트의 제목이나 넘버를 붙여주면 됩니다.
http://letsgo.tistory.com/219 
 
그런데 이런 경우 티스토리 블로그의 스킨 구조상 통상 대부분 가로 본문 사이즈가 600픽셀을 넘어가는 경우가 많기 때문에 페이스북의 기본 앱의 캔버스 사이즈의 가로 제한폭(520 픽셀)을 넘어가기 때문에 블로그의 우측 일부가 잘려서 보기 흉한 경우가 많습니다. 이것을 방지하기 위한 좋은 팁의 하나로, 똑같은 페이지의 모바일 버전 컨버팅 페이지를 대신 집어 넣어주면 페이스북의 본문창 사이즈인 520픽셀에 거의 근접하는 모습으로 텍스트와 이미지가 자동적으로 축소되고 맞추어서 재배열되기 때문에 보기가 무척 깔끔해집니다.

이렇게 하려면 원래의 티스토리 블로그 페이지의 주소 대신 해당 포스트의 모바일 페이지 주소를 대신 넣어주어야 합니다.
http://letsgo.tistory.com/m/post/view/id/219

위의 링크 주소와 같이  자신의 블로그 주소 http://letsgo.tistory.com 와 특정 포스트의 글주소(숫자) 219 사이에
 /m/post/view/id/ 를 삽입해 주시면 됩니다.


6. 위와 같이 설정하고 [변경내용 저장]을 클릭하면 간단하게 탭 페이지 하나를 삽입하는 앱이 뚝딱 만들어집니다.
이제 만든 페이지 앱을 원하는 페이스북 페이지에 붙이려면
왼쪽 사이드 메뉴 중 [앱 페이지 보기] 링크를 클릭!


[참고사항]
윗쪽에 있는 [경고문](warning)을 보시면 2011년 10월 1일부터는 페이지탭 URL (HTTPS보안)이 요구될 것이라고 합니다. 아마도 페이스북이 사용자(개발자)들이 자유롭게 올리는 어플리케이션들에 대해 보안 장치를 강화하지 않아서 테스트성, 혹은 스팸성이나 바이러스성 앱들이 많이 만들어지는 것에 대한 항의 요구를 수용하기 위해 앞으로는 보안 서버를 경유하지 않은 임의의 페이지(https://로 시작하지 않고 그냥 http://로 시작되는 페이지)는 허용하지 않겠다는 의지로 보입니다..

7. 새로 만든 앱 소개 페이지가 뜨면, 여기서 왼쪽 사이드 메뉴 중
[내 페이지에 추가] 링크를 클릭,


8. 아래와 같이 [회원님의 페이지에 OOO 추가하기] 팝업창이 뜨면, 해당
탭페이지를 추가하고 싶은 자신의 페이스북 페이지를 선택하고 [페이지에 추가] 버튼을 클릭!



9. 이제 해당 페이지에 탭이 추가되었을 것이므로, 확인을 해보려면, 페이스북 [계정]-[페이지 이름으로 facebook 사용] 메뉴를 클릭해서 뜨는 페이지 리스트 팝업 창에서 새 탭을 설치한 팬페이지를 선택하여 클릭!


10. 해당 팬페이지에 제대로 탭페이지가 삽입 되었는지 확인해보려면, 좌측 사이드 메뉴 중에 새로 설치한 탭의 이름을 확인해서 클릭하여 (기본 노출 목록 중에 보이지 않으면 [더보기] 링크를 클릭) 본문 창에 520픽셀에 맞춤된 해당 URL 페이지가 제대로 뜨는지 확인하면 끝!!


이상과 같이 하시면 앞서 배우셨던 페이스북 페이지에 외부 페이지를 탭으로 추가하는 작업이 간단하게 끝납니다.
특히 티스토리 블로그의 포스트를 삽입해서 옮겨오고 싶은 경우, 티스토리 모바일 컨버팅 페이지 주소를 이용하시면 더욱 깔끔하게 연출됩니다... 한번 따라서 시도해 보시지요....^^ 

한 가지 아쉬운 점은 10월부터 보안 서버를 적용한 페이지를 의무적으로 달게 하게 된다면 아마도 보안 페이지 처리가 안된 페이지들을 삽입하는 일은 좀 곤란해질 수도 있을 듯 싶습니다...
 

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 렛츠고

한동안 블로그를 거의 비워두다시피 [페이스북]에 빠져서 살고 있습니다.
이유는 실제로 페이스북을 하다보면 블로그 활동이 거의 필요가 없다 싶을 정도로 다른 친구들의 좋은 정보나 기사들이 수시로 공유되고 나누어지기 때문에, 굳이 제가 따로 글을 적어야 할 필요를 그만큼 덜 느끼게 되는 탓입니다.

물론 원천 정보의 생산자이자 퍼블리싱의 근원으로서 자신의 개인 홈페이지나 블로그의 중요성은 사라지지 않겠지만 상대적으로 예전처럼 블로그나 메타블로그에 의존해 누군가가 내 글을 읽어주도록 '유인'하는 소극적인 행동만으로는 소셜미디어에 대한 적절한 대응전략이라 하기 어렵습니다.

트위터가 되었든 페이스북이 되었든, 직접 SNS 계정을 갖고 적극적인 대외 활동을 통해 좀더 다양하고 많은 친구와 팔로워들을 사귀고 교류하여 그들을 나의 친구나 지지 후원군으로 만들 수 있는 "커뮤니케이션" 능력이 없이는 아무리 고급 정보나 데이터를 많이 소장하고 뛰어난 글을 포스팅해도 그 명성이 "실명의 브랜드"로 남기보다는 "익명 혹은 예명의 파워블로거"에 머무를 수 있기 때문입니다. (물론 그 예명도 유명해지면 개인 브랜드가 되긴 합니다만...)

그런 만큼 SNS시대에는 자신의 지적 생산 능력 뿐만 아니라 네트워크 커뮤니케이션 능력의 중요성이 더 커지고 있습니다.
제 블로그를 찾아 주시는 분들을 위해 모처럼만에 포스트 하나 남겨 드립니다...

요지는 [페이스북 페이지]에 처음 오는 친구들을 위해 환영의 인사를 전하는 첫 만남 페이지를 통상 [웰컴 페이지] 혹은 [랜딩 탭]이라 부르는데, 얼마 전부터 페이지의 구조가 일반 개인 프로필과 유사하게 바뀌면서 이제는 [탭] 구조가 사라지고 그냥 [홈]의 좌측 사이드 메뉴에 앱 리스트로 바뀌어서 [탭]이라는 표현보다는 그냥 [웰컴 페이지] 또는 [랜딩페이지]라는 말로 많이 쓰입니다.

그동안에는 FBML이라는 페이스북 특유의 HTML확장 랭귀지를 통해 개인들이 이 탭(페이지)를 구현할 수 있도록 지원했는데, 지난주(3월 11일)부터는 페이스북 내에서만 사용할 수 있었던 FBML 페이지의 추가 생성을 지원하지 않고 일반 html페이지에서 사용되는 iframe 이나 css, java script 등의 코드를 그대로 사용할 수 있도록 언어 환경이 바뀌었습니다. 

따라서, 이들 프로그래밍 언어에 익숙한 분들이라면 좀더 다양하고 액티브한 표현이나 화면 구성이 가능하게 되었는데요, 특히 유튜브와 같은 동영상 소스는 대부분 iframe 태그를 이용한 코드를 이용하여 공유하거나 퍼갈 수 있도록 지원되기 때문에 한두 가지 팁만 배우면 아주 쉽게 내 페이스북의 페이지에서 동영상을 웰컴 페이지로 활용하는 게 가능했졌습니다..

여기서는 유튜브 동영상 소스를 이용해서, 내 페이스북 페이지에 노래 하나를 [웰컴 페이지]로 만드는 과정을 그림으로 보여드릴 터이니, "무작정 따라하기"로 와 보세요... 이 과정만 성공적으로 따라오실 수 있다면 앞으로는 자신의 비디오 캠이나 스마트폰으로 페이지를 찾은 분들에게 환영인사를 전하는 동영상을 셀프로 찍어 편집하여 유튜브에 올려두고, 환영인사 동영상의 소스를 카피하여 자신의 페이지에다 붙여둘 수도 있겠지요...~~

자, 그럼 가 봅니다....

1. iframe 소스를 바로 탭으로 만들어주는 앱에디터 툴 탭프레스 설치하기

먼저 페이스북 페이지에 웰컴페이지를 만들려면 [랜딩탭]의 역할을 해주는 [환영페이지] 탭을 하나의 낱장 짜리 담벼락처럼 하나의 앱(탭)으로 만들어두고 자신의 페이지에 아직 [좋아요]를 하지 않은 사람이나 혹은 [좋아요]를 클릭해서 팬이 된 사람들에게 자신의 페이지 접속시 처음으로 보여지도록 해당 탭(페이지)를 첫 화면으로 셋팅해주어야 합니다.

그러려면 맨 먼저 필요한 작업은 바로 그같은 앱 에디터 역할을 통해 첫 페이지 탭을 자동으로 생성해주는 툴(앱)들을 찾아서 설치하는 일인데요... 최근에 여러 군데서 iframe 코드를 탭으로 만들어주는 툴들이 제공되고 있는데, 그 중 간편하게 사용할 수 있는 것으로 탭프레스(Tap press) 라는 앱을 권합니다. 여기서는 탭프레스 를 이용해서 환영페이지를 만들어 보겠습니다. 일단 탭 프레스를 설치하셔야겠지요...

1-1. 아래 주소를 클릭-->탭프레스 안내화면 접속 --> [CLICK HERE] 클릭
https://apps.facebook.com/tabpress/


1-2. 상단의 [좋아요]를 누르는 것은 선택사항이고, [앱으로 가기]를 누르면 위의 화면으로 되돌아갈 터이니 무시해버리고, 왼편 아래쪽 메뉴 리스트 하단에 [내 페이지에 추가] 링크를 클릭!! 


1-3. 아래와 같이 자신이 만든 페이지의 목록이 뜨면 그 중에서 [웰컴 페이지]를 설치하고 싶은 페이지를 선택하여 [페이지에 추가] 버튼을 클릭



2. 해당 페이지로 이동하여 웰컴페이지(탭) 생성 확인하기
 

위의 과정만 거치면 선택한 페이지에 간단하게 랜딩탭 삽입용 어플의 설치가 끝나게 되므로, 이제는 해당 페이지로 이동하여 삽입된 [웰컴 탭]을 편집하고 첫 화면으로 셋팅하는 작업을 해주면 됨.

2-1. [계정]-[페이지 이름으로 Facebook 사용] 클릭 


2-2. 앞서 1단계에서 탭프레스를 설치했던 페이지를 선택하여 [페이지로 전환] 버튼 클릭


2-3. 해당 페이지 왼편 아래쪽 메뉴를 보면 [탭프레스] 아이콘이 붙은 [Welcome] 링크가 보일 것임. 이것을 클릭!


2-4. 아래와 같은 탭프레스 화면의 코드 편집기 화면이 나올 것임.
윗쪽 입력박스는 [좋아요]를 하지 않아서 아직 팬이 아닌 사람들에게 보여지는 페이지에 들어갈 코드를 넣고,
아래쪽 입력박스는 [좋아요]를 눌러서 이미 팬이 된 사람들에게 보여지는 페이지용 코드를 넣으라는 이야기임.


3. 웰컴페이지(탭) 입력창에 유튜브 동영상 소스 복사해서 넣기

만약 위의 페이지의 첫 화면에서 외부(유튜브) 사이트에서 퍼온 동영상을 보여주려면 해당 동영상의 소스 주소를 먼저 알아야 합니다. 따라서, 일단 유튜브 사이트로 들어가서 퍼오고 싶은 동영상을 먼저 찾아서, 해당하는 동영상의 소스 주소를 확인하여 카피해 옵니다.

3-1. 별도의 브러우저 탭에서 유튜브 사이트에 접속, 원하는 곡을 검색해서 곡의 이미지나 제목을 클릭


3-2. 해당 동영상 화면 아래쪽의 [소스코드] 버튼을 클릭, 하단에 펼쳐지는 <iframe> ..... </iframe> 까지의 동영상 소스를 컨트롤+C키 또는 마우스 오른쪽버튼을 클릭하여 [복사]로 메모리에 카피해둠. 


3-3. 복사한 소스코드를 다시 2단계의 탭프레스 웰컴페이지 코드 입력박스 안에 [붙여넣기]함.


3-4. 아래와 같이 복사해온 코드가 정상적으로 박스 안에 나타나면 제대로 복사-붙여넣기가 완료된 것임.


3-5. 만약 [좋아요]한 팬과 하지 않은 팬에게 보여질 화면을 달리 하고 싶다면 이 단계에서 다른 소스 코드를 입력하고 입력박스 하단에 있는 [Save/Update Contents] 버튼을 클릭하면 됨.
(여기서는 테스트 편의상 두 경우 모두 똑같은 소스 코드를 붙여넣기 했음.)


4. 탭프레스 탭을 페이지 첫 화면으로 셋팅하고 확인하기
 

위와 같이 셋팅하고 저장하면 이제는 이렇게 편집한 탭프레스의 웰컴페이지를 해당 페이지의 첫 화면으로 셋팅만 하면 됩니다.

4-1. 해당 페이지의 우측 상단에 [페이지 관리] 버튼 클릭
(이 버튼이 안보이면 최상단 메뉴줄의 [프로필] 링크를 눌러볼 것)

([페이지 관리] 메뉴는 [페이지 이름으로 사용하기] 상태에서 [홈]을 누르면 왼쪽 페이지 프로필 쪽사진 옆에 링크로 나타나기도 함.) 


4-2. [권한 관리] 항목 중에서 [기본 랜딩 탭] 항목의 디폴트 옵션(담벼락)을 새로 생긴 [Welcome] 항목으로 변경 선택하고 아래쪽의 [변경내용 저장] 버튼을 클릭!


4-3. 이제 첫 화면 셋팅이 끝났으므로 해당 페이지로 가서 확인을 해보려면 다시 우측 상단에 있는 [페이지 보기] 버튼을 클릭하여 해당 페이지로 돌아갈 것.


4-4. 해당 페이지가 25명 이상의 [좋아요] 팬을 이미 갖고 있고 페이지 URL을 따로 등록했을 경우 해당 페이지의 주소가 웹브라우저 주소창 안에 표시될 것임. (아직 25명의 팬이 없거나 url등록을 하지 않았을 경우 아래와 같이 페이지의 고유주소가 나타날 것임) 이 페이지를 카피해 놓을 것

* 왜나하면, 나는 이 페이지의 관리자이므로 [로그인] 된 상태에서 [페이지 보기]를 누르면 이 페이지에 대한 관리화면으로 들어가게 되므로 페이지를 이용하는 친구의 첫화면에 보이는 모습을 볼 수 없슴. 따라서 새로운 사람들에게 해당 페이지의 첫 화면이 정상적으로 보이는지 확인해보려면 [계정]-[로그아웃]을 통해 로그아웃한 상태에서 이 주소를 웹브라우저 창에 넣고 접속을 시도해보아야 함.



4-5. 해당 주소를 [로그아웃] 상태에서 웹브라우저 창에 붙여넣기 하고 클릭했을 때 아래와 같이 따온 유튜브 동영상의 첫 화면이 [좋아요] 버튼과 함께 제대로 뜬다면 성공적으로 설치가 끝난 것임!!
이제 동영상 플레이 버튼을 눌러보시라...
이 테스트 페이지에서 여러분들은 산울림의 [아니벌써]를 만나게 될것이다...^^

 http://www.facebook.com/pages/Ilike%EC%82%B0%EC%9A%B8%EB%A6%BC/180773375294228

(물론 여러분이 다른 동영상 소스를 갖다 붙였다면 여러분의 친구들은 그 동영상을 만나게 될 것이다.
이런 방법을 이용하면 이제는 여러분의 환영인사 동영상을 셀카로 만들어서 붙여 두어도 좋을 것이다.)


 * 주의사항: 참고로, [탭프레스]는 팬의 숫자가 2500명 이내일 때까지만 무료로 사용할 수 있답니다.
                  그 이상 되면 유료로 구매해야 한다니까, 페이지의 인원이 늘어나면 그 점은 고려하시길!! 


저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by 렛츠고