티스토리 사이드바 페이스북 좋아요 박스 적용 하는 방법 입니다.

점점 국내에 페이스북 이용자가 나날이 늘고 있는 가운데 페이스북의 소셜 플러그인중 Like Box 라 하여 일명 좋아요 박스! 여러분들도 사이트를 많이 이용하고 돌아 다니면서 종종 좋아요 버튼을 보셨을겁니다. 물론 저도 페이지를 만들어서 따로 운영중이지만 이 좋아요 버튼 박스가 도대체 무엇인지 알아보고 어떻게 소스를 얻고 삽입하는지 알아보도록 하겠습니다.


Facebook 의 Like Box 소셜 플러그인은 저도 페이지를 운영함으로써 양질의 콘텐츠를 통해 좋아요 버튼을 누르면 친구끼리도 알려지고 프로필 사진이 보여지면서 지인끼리 알려지고 자동으로 홍보까지 되는 강력한 페이스북 으로 이용자가 많아 회사 마케팅용으로도 회사 홍보용으로도 등등 많이 쓰이고 있는 페이스북 입니다.


페이스북 좋아요 박스 소스 생성

1) 아래 Facebook Like Box 사이트로 가서 페이스북 페이지 주소를 입력원하는 스타일을 선택 Get Code 버튼을 누릅니다.

https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=ko_KR


2) 자 그럼 여기선 좀 더 쉽게 쉽게 하기 위해 IFRAME(아이프레임) 소스를 복사합니다.


사이드바 페이스북 좋아요 박스 적용

3) 티스토리 블로그 관리자 페이지에서 사이드바 메뉴를 선택합니다.


4) 기본 모듈중에 HTML 배너출력을 사용중인 사이드바 로 드래그 한후 편집 버튼을 누릅니다.


5) 이름은 임의로 한후 일반 고정형 블로그는 그냥 소스를 붙여넣어도 상관없지만, 반응형 블로그의 경우 동적으로 넣기 위해 div 박스를 아래와 같이 만들어서 그 사이에 아까 복사한 소스를 붙여넣습니다.


동적으로 만드는 이유반응형의 경우 사이즈 별로 전체적인 레이아웃과 메뉴중 사이즈가 변하기 때문에 이것 역시 사이즈가 고정되니 동적으로 사이즈가 조절 되게 만들기 위해서 입니다.


자 여기서 부턴 일반 블로그는 확인 버튼을 누르고 7) 10) 번으로 가셔서 끝내시면 되겠습니다.!


6) 그럼 div 소스 안에 복사한 소스를 붙여넣었다면 확인 버튼을 누릅니다.


7) 그럼 상단에 저장 버튼을 누릅니다.


8) 그리고 다시 관리자 메뉴 중 꾸미기 항목의 HTML/CSS 편집 메뉴를 선택합니다.


9) Sytle.css 에 아래와 같은 동적으로 움직이는 소스를 삽입한 후 저장 버튼을 누릅니다.


#likebox * {

   width: 100% !important;

}


아까 div 중 id 를 보면 likebox 부분을 보시면 css 를 통해 동적으로 가로사이즈가 100% 로 움직이는 소스로 사이즈별로 고정이 되지 않고 움직입니다.


저장 버튼을 눌러 마치도록 합니다.


10) 그럼 사이드바(Sidbar)에 페이스북 좋아요 박스 가 적용된것을 확인 할 수 있습니다.


이로써 티스토리 사이드바 에 페이스북 좋아요 박스 동적 적용 하는 방법 을 알아보았습니다.

저작자 표시 비영리 변경 금지
신고
공유OK! 불펌NO!

트위터

페이스북

구글
플러스

카카오
스토리

네이버

네이버
밴드

핀터
레스트

카카오톡