요즘 페이스북 ‘좋아요’ 버튼을 여기저기 많이들 사용하는데, 이게 facebook 에 있는 social plugin 을 활용한 거라, 맘대로 크기조정이 잘 안 된다. 특히, 안드로이드나 iOS 모두 버튼이라면 7mm~10mm 사이의 physical dimension 을 요구하고 있는데, 실제 facebook 에서 제공하는 ‘좋아요’ 버튼은 모바일에 올려놓으면 3~4mm 수준으로 밖에 안 나오게 되는 경우가 많다.
iframe 안에 들어가 있는 놈이라 css 건드린다고 width 나 height 조절이 안 된다.
▲ 누르기가 좀 답답한 facebook 좋아요 버튼.
방법 1 – viewport 에서 target-densitydpi 조정하기 (비추)
처음엔 이 방법을 썼는데, target-densitydpi 를 low – medium – high 로 조정함에 따라, 좋아요 버튼의 크기를 크게 3가지로 조정하는 것이다. 보통 모바일웹이 medium-density 를 다들 쓰고 있으니, 더 크게 하고 싶으면 천상 low-density 를 쓰던가 initial-scale 을 조정해야 하는데, 이건 작업 픽셀과 실제 구현 픽셀이 다르게 계산되는 거다보니 건드리면 복잡해진다.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" target-densitydpi=medium-dpi">
암튼, 별로 추천하지 않는 방법.
▲ 왼쪽부터 low-medium-high density 뷰포트에 따른 좋아요 버튼의 크기 변화.
이미 작업 다 해놓고 좋아요 버튼 하나 키우자고, 다른 것들을 죄다 조정한다? 에… 별로
방법 2 – CSS에서 transfrom:scale() 사용하기 (추천)
두 번째 방법은 좋아요 버튼을 감싸는 div 에 transform 을 먹여서 scale 을 불려버리는 방법이다. 이렇게 작업하면, 좋아요 버튼만 내 맘대로 키웠다 줄였다 할 수 있으니 편리하다.
.like_button{
transform: scale(2);
-moz-transform: scale(2); /* firefox 용 */
-webkit-transform: scale(2); /* webkit 브라우저 */
-o-transform: scale(2); /* opera용 */
-ms-transform: scale(2); /* IE용 */
}
▲ 좀 큰가? 아무튼, 누르기 큼지막한 ‘좋아요’ 버튼
