사이드바에 Facebook Like Box 달기
2015.02.15 00:59
사이드바에 Facebook Like Box 달기

전 Facebook을 한동안 사용하다 폐쇠했습니다. (페이스북 탈퇴하기) 이유를 말씀드리긴 뭐하지만 그냥 그렇게 했습니다.

 

그러다 오늘 새롭게 Facebook 가입을 했습니다. 가입 후 연락처에 있는 모든 사람들을 추가 안했습니다.^^

 

새롭게 시작한거 일단 새롭게 출발해 보자는 마음에...

 

아무것도 없는 텅 빈 Facebook 페이지에 이 글이 첫글이 되겠네요.

 

제가 페이스북을 열심히 안해봐서 호응(?)도, 기타 어찌 운영되는지 모르겠지만 일단 사이드바에 Facebook Like Box를 설치해 운영해 보기로 마음 먹었습니다.

 

그래서 그 과정을 글로 남기고 혹시나 필요하신분 계신다면 도움이 되셨음 하네요.

 

Facebook Like Box 사이드바에 설치하기.

 

Facebook Like Box를 사용하기위해서는 페이스북에 가입이 되어 있어야겠지요. (페이스북(Facebook) 가입하기)

 

Facebook Like Box를 설치하기 위해 아래 주소로 접속하세요.

 

 

링크로 접속하면 위 화면이 나오는데 자신의 페이스북 주소, 블로그 사이드바에 맞는 Facebook Like Box 가로, 세로 사이즈를 입력하고 자잘할 옵션을 선택하시면 됩니다.

 

미리보기 화면이 제공되니 옵션 설정은 힘들지 않습니다. 다 설정하셨다면 ' Get Code"를 클릭 하세요.

 

블로그에 적용할 소스를 보여 주는데 상단 메뉴에서 'IFRAME'를 클릭하세요.

 

그럼 'IFRAME'용 소스가 나오는데 복사해 주세요.

 

티스토리 관리 -> 꾸미기 -> 사이드바를 선택 하셔서 왼쪽 메뉴중 '태그 입력기'를 선택 하시면 오른쪽에 태그 입력기가 생성되는데 '편집'을 눌러 주세요.

 

이름란에는 알아볼수있는 이름을 넣으시면 됩니다. 중요한것은 '치환자'인데 위에서 얻은 'IFRAME'소스를 넣어주면 되는데 바로 넣기 하지 마시고

 

<div id="flbox">

'IFRAME'소스

</div>

 

를 넣고 '확인'을 눌러 주세요.  이렇게 하는 이유는 하단에서 알려 드리겠습니다.

 

적용을 하셨다면 '저장'을 눌러 주세요.

 

티스토리 관리 -> 꾸미기 -> HTML/CSS 편집을 선택하셔서 하단 'style.css' 마지막 줄에 아래 소스를 넣어 주세요.

 

#flbox * {
   width: 100% !important;
}

 

그리고 '저장'을 눌러주시면 마무리 됩니다.

 

티스토리 관리 -> 꾸미기 -> 사이드바 에

<div id="flbox">

'IFRAME'소스

</div> 를

 

티스토리 관리 -> 꾸미기 -> HTML/CSS 편집 -> style.css 에

 

#flbox * {
   width: 100% !important;
}를 넣어주는 이유는 제 블로그처럼 일반 스킨을 사용하는 블로그에는 효과가 없습니다.

 

그러나 요즘 많이 사용하는 반응형 스킨에는 아주 필요한 부분입니다.

 

반응형스킨은 접속하는 기기에 따라, 사용하는 브라우저 사이즈에 따라 블로그 화면이 변하는데 위 소스를 사용하면 거기에 맞게 반응하는 소스 입니다.

저작자 표시 비영리 변경 금지
신고

, , , , , ,