티스토리 사이드바 - 페이스북 위젯 설치

 이번 글에서는 티스토리 사이드바에 페이스북 위젯을 설치하는 방법을 알려 드리겠습니다. 본인의 티스토리 운용 스타일에 맞는 페이스북 페이지를 설치하면 단 1초라도 체류시간을 늘리는 효과가 있지 않을까 싶습니다. 우측 상당 사이드바에 보시는 것이 페이스북 위젯입니다. 


 1. 페이스북 페이지 플러그인 사이트로 접속합니다. [ 링크클릭 ]

 

티스토리 페이스북 위젯


2. 위와 같은 화면이 나올겁니다. 그럼 좌측 메뉴에서 '페이지 플러그인'을 클릭합니다.


티스토리 페이스북 위젯


이런 화면이 뜨면 위젯 만들기 첫번째 준비가 끝나는 겁니다.


티스토리 페이스북 위젯


3. 위젯에 들어갈 페이스북 주소를 복사해 오면 됩니다. 저는 어제 신곡 'likey(라이키)'를 발표한 트와이스(twice) 공식 페이스북을 위젯으로 가져와 보겠습니다. 


티스토리 페이스북 위젯


4. 페이지 플러그인 중단에 있는 'Facebook 페이지 URL' 밑에 복사해 온 주소를 넣고 '엔터' 를 누르면 위와 같이 위젯에 표시될 화면이 미리 보기로 출력 됩니다. (너비와 높이를 지정해 줄수 있습니다.)


 우선은 플러그인 컨테이너 너비에 맞춤이 자동 설정 되어 있습니다. 본인의 사이드바 크기를 모르면 기본설정을 따라가시고요. 왼쪽 밑에 코드 받기를 클릭하시면 아래와 같은 코드 창이 뜹니다.


티스토리 페이스북 위젯

5. 2개의 코드가 나옵니다. step 2는 직접 body쪽에 입력 해야 하고 한번만 HTML/CSS편집에 넣어 주시면 됩니다. step 3는 사이드바에 입력 하면 됩니다. 


티스토리 페이스북 위젯


6. 우선 step 2 코드를 복사해서 </head> 밑에 붙여 넣기 후 저장을 해줍니다. [</body>에 붙여 넣으니까 출력이 안되더군요.]


티스토리 페이스북 위젯


7. 그리고 step 3의 코드를 티스토리 사이드바 메뉴에서 HTML플러그인을 생성해서 적당한 이름을 정한 후 소스를 붙여 넣기 후 확인 및 저장을 해주시면 끝입니다.


티스토리 페이스북 위젯


8. 사이드바의 위치만 알맞게 지정해 주시고, 크기가 마음에 안들면 다시 사이즈를 페이스 플러그인에서 조정해서 step 3의 코드만 가져다 붙이면 됩니다. 자동반응형 말고 직접 크기를 지정하시면 매번 페이스 플러그인에 들어가지 않고, 크기를 변경할 수 있습니다. 제 블로그의 사이드바 크기가 263px입니다. 참고 하세요.


 본인의 블로그에 제일 잘 어울리는 페이스북 위젯으로 블로그 체류 시간이 늘어 나시길 기원합니다.

댓글(0)

Designed by JB FACTORY