'랜딩탭'에 해당되는 글 1건

  1. 2011.03.20 [페이스북] 페이지에 유튜브 동영상 랜딩페이지 만들기

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

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

트위터가 되었든 페이스북이 되었든, 직접 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 렛츠고
,