페이스북 좋아요 상자(Like Box) 반응형으로 설치하기

블로그/블로그 꾸미기

페이스북 페이지를 운영하고 있다면 좋아요 상자(Like Box)를 웹페이지나 블로그에 설치하여 더 많은 팬을 확보할 수 있습니다. 많은 팬을 확보한다면 비용을 들이지 않고도 웹사이트나 블로그를 손쉽게 홍보할 수 있으므로 적극적으로 활용하는 것이 방문자를 확보하는 지름길입니다.

페이스북 좋아요 상자 반응형으로 설치하기

최근 태블릿 PC나 스마트 폰 등 모바일 기기의 이용이 늘어나면서 반응형 웹이 뜨고 있습니다. 이에 발맞추어 페이스북의 좋아요 상자(Like Box)를 반응형으로 설치하는 방법에 대하여 알아보도록 하겠습니다.

좋아요 상자(Like Box) 만들기

페이스북 소셜 플러그인 좋아요 상자(Like Box) 만들기 페이지로 이동합니다. 이동하면 아래와 같은 화면이 나타나는데 몇 가지 정보만 입력하면 간단하게 위젯을 생성할 수 있습니다. 값을 입력하거나 항목에 표시를 하면 실시간으로 업데이트가 이루어지므로 위젯을 보면서 취향에 맞게 설정하시면 됩니다.

  • Facebook Page URL : 자신의 페이스북 페이지 주소
  • Width : 위젯의 가로 크기 지정
  • Height : 위젯의 세로 크기 지정
  • Color Scheme : 위젯 색상 지정
  • Show Friend's Faces : 친구들의 사진을 보여줄지 말지 결정
  • Show Header : 상단 헤더 부분을 보여줄지 말지 결정
  • Show Posts : 콘텐츠의 내용을 보여줄지 말지 결정
  • Show Border : 외곽선을 사용할지 말지 결정

※ 저는 WidthHeight를 설정하지 않았습니다. Border 또한 설정하지 않고 스타일시트에서 따로 설정했습니다.

Facebook Like Box

좋아요 상자(Like Box) 설치하기

설정을 모두 마쳤다면 하단에 있는 Get Code를 클릭하고 아래처럼 HTML5를 선택하여 설치 코드를 생성합니다. 두개의 설치 코드가 나오는데 상단에 있는 소스 코드는 블로그 스킨의 HTML 영역에서 </body> 태그 앞에 복사하여 붙여 넣어주고, 하단에 있는 소스 코드는 위젯을 설치하고 싶은 위치에 복사하여 붙여 넣어줍니다.
※ 티스토리에서는 여기에 상단 소스 코드를 넣어줌 </s_t3></body></html>

Facebook Like Box-2

티스토리 블로그 사이드바에 설치하기

티스토리 블로그에서 좋아요 상자(Like Box)를 우측 사이드바에 설치하려면 관리자 메뉴 ▶ 꾸미기 사이드바 ▶ 태그 입력기 ▶ 하단에 있는 소스 코드를 복사하여 붙여넣기 ▶ 아래 그림 참조

tistory sidebar

tistory sidebar-2

이것으로 좋아요 상자(Like Box) 설치 작업은 끝이 났지만 아직 반응형으로 작동하지는 않습니다. 반응형으로 작동하려면 반응형 소스 코드를 style.css에 넣어 주어야 합니다. 관리자 메뉴 ▶ HTML/CSS 편집 ▶ style.css 하단에 반응형 소스 코드를 복사하여 붙여 넣어줍니다.

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

반응형 좋아요 상자

위의 그림은 좋아요 상자가 반응형으로 변한 모습입니다. 여러분의 블로그 운영에 조금이나마 도움이 되기를 바라며 페이스북 좋아요 상자(Like Box) 반응형으로 설치하기를 마칩니다.

+ 댓글은 큰 힘이 됩니다.
  • default-image
    BlogIcon 진실된 2014.11.18 16:06 신고

    히야~~~블로그 스킨 정말 깔끔하네요. ^^

    • default-image
      BlogIcon 블로마리 2014.11.18 19:31 신고

      방문해 주셔서 감사합니다~~
      좋은 시간 되시고, 궁금한 것이 있으면 언제든지 질문해 주세요!!

  • default-image
    BlogIcon 백전백승 2014.11.19 11:37 신고

    페이스북 페이지 좋아요 상자를 반응형으로 하는 것을 생각하지 못했네요. 페이스북 댓글창을 반응형으로 하는 것만 생각했거든요. 반응형으로 블로그를 운영하면 무언가 다른것 같아요.

    • default-image
      BlogIcon 블로마리 2014.11.19 14:15 신고

      백전백승님~~반갑습니다.
      제가 처음 반응형으로 스킨을 제작하면서 이것 때문에 고생을 좀 많이 했었습니다.ㅎㅎ
      아직까지 좋아요 상자를 반응형으로 하신 분들은 거의 없더군요.
      바빠서 미루고 있다가 고생하실 분들을 위해 포스팅했습니다.

  • default-image
    BlogIcon 고행 2015.01.15 23:27 신고

    좋은글 봤습니다. 덕분에 잘 적용시켰습니다. 고맙습니다.

    • default-image
      BlogIcon 블로마리 2015.01.15 23:49 신고

      감사합니다. 잘 적용시겼다니~~ 저도 기쁘네요^^
      좋은 시간되십시오!