페이스북 탭을 여러 번 만들다 보면 한 번식 부딪히는 관문 중의 하나가 바로 탭 안쪽의 스크롤바 문제일 것입니다. 페이스북 탭 내의 가로 사이즈는 810 픽셀로, 이 사이즈 내로 이미지를 제작하면 해결이 됩니다. 그러나 페이스북 탭의 세로 사이즈는?

아마도 여기서 아래와 같은 의문점이 생길지도 모릅니다.

  • 만약 댓글 플러그인이 달려 있는데 ‘댓글 더 보기’ 버튼을 눌렀을 경우는?
  • 그렇다고 810픽셀로 만든 이미지를 스크롤바 때문에 다시 790에서 800 픽셀로 제작해야 하는 건가?
  • 스크롤바 때문에 내가 만든 예술 작품 같은 페이스북 탭이 보기 싫어지는데? 스크롤바를 없앨수는 없을까?

페이스북 탭 내에 스크롤바가 생긴다면 페이스북 자체에 대한 스크롤바와 탭에 대한 스크롤바가 2개가 생겨서 페이스북 탭 자체가 지저분해 보이는 문제가 생깁니다.

그래서 어떻게 하면 페이스북 탭 내에 스크롤바를 없앨까? 하다가 여러 곳의 소스를 모아 정리해봤습니다.

페이스북 탭 내의 스크롤바를 없애는 방법에는 크게 두 가지가 있습니다. 첫 번째 방법은 캔버스 사이즈를 지정해주는 것이고 두 번째 방법은 캔버스 사이즈를 콘텐츠 길이에 따라 자동으로 변화하는 것입니다. 가장 적당한 방법을 사용해주시면 됩니다.

1. 캔버스 사이즈 지정

아래 코드는 캔버스 사이즈를 고정시켜, 지정된 사이즈 이하의 경우 스크롤바가 나타나지 않게 됩니다.

아래 코드와 같이 height를 1500으로 지정한 경우, 만약 탭 내의 이미지가 1500 픽셀 이하인 경우에는 스크롤바가 나타나지 않지만 댓글 플러그인이 새로운 댓글을 계속해서 불러올 경우 스크롤바가 나타날 수 있습니다.

[php]

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId  : ‘YOUR_APP_ID’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setSize({ width: 810, height: 1500});
}
</script>

[/php]

혹시 그래도 스크롤바가 나타나시나요? 그럴 경우 아래 코드를 css 파일에 추가 또는 style 지정을 해주시면 됩니다. 여기서 한 가지 유념하셔야 할 것은 아래 코드를 넣을 경우 스크롤바가 가로, 세로 모두 나타나지 않는 다는 것입니다. 혹시 페이스북 댓글 플러그인으로 새로운 댓글이 계속해서 늘어날 경우에는 해당 태그를 사용하지 마시길 권합니다(아마 직접 써보시면 무슨 뜻인지 아실거예요^^).

[php]

body {overflow:hidden;}

[/php]

2. 자동 사이즈

아래 코드는 캔버스 사이즈를 고정 시키지 않고 늘어나는 만큼 자동으로 캔버스가 늘어나는 코드 입니다. 위 코드와 비교해 ‘FB.Canvas’ 부분이 다르다는 사실 쉽게 구분하실 수 있을 것입니다.

[php]
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘YOUR_APP_ID’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow();
}
</script>

[/php]

위의 두 코드 모두 body 태그를 닫기 전 부분에 넣어주시면 됩니다. 한 가지 주의해주셔야 할 것은 appId 부분을 여러분이 만든 앱의 ID로 바꿔주셔야 한다는 것입니다.

페이스북 탭 제작에서 무엇보다 중요한 것은 직접 해보는 것입니다. 직접 해보는 것 만큼 좋은 방법은 없습니다. 궁금하신 사항은 아래 댓글 창에 남겨주시기 바랍니다! :)

그래도 안 될 경우 아래 코드를 사용해보세요!

[php]

<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({
appId: ‘YOUR_APP_ID’,
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
}

(function () {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol + ‘//connect.facebook.net/ko_KR/all.js’;
document.getElementById(‘fb-root’).appendChild(e);

} ());
</script>

<script type="mce-text/javascript">// <![CDATA[
window.fbAsyncInit = function () {
FB.init({
appId: ‘YOUR_APP_ID’,
status: true,
cookie: true,
xfbml: true,
oauth: true
});
//FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
}

(function () {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol + ‘//connect.facebook.net/ko_KR/all.js’;
document.getElementById(‘fb-root’).appendChild(e);

} ());
// ]]></script>[/php]