지난 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월부터 보안 서버를 적용한 페이지를 의무적으로 달게 하게 된다면 아마도 보안 페이지 처리가 안된 페이지들을 삽입하는 일은 좀 곤란해질 수도 있을 듯 싶습니다...
'페이스북짱' 카테고리의 다른 글
| [황해 대박] 고... 고갱뉨? 다.. 당황하셨어요? (0) | 2013.08.24 |
|---|---|
| [시평] 한나라당이 '트위터 버리고 페이스북으로 갈아탄다'고?? (0) | 2012.01.09 |
| [페이스북] 페이지에 유튜브 동영상 랜딩페이지 만들기 (0) | 2011.03.20 |
| [페이스북 통계_01] 페이스북의 경쟁상대가 싸이월드? (1) | 2011.01.27 |
| [고급팁] 페이스북 포트스 댓글까지 몽땅 공유하는 방법 (1) | 2010.12.30 |
