티스토리 블로그에 네이버 이웃커넥터 설치하기

블로그/블로그 운영
2018. 9. 9. 00:30

안녕하세요. 오늘은 티스토리 블로그에 네이버 이웃커넥터 설치하기에 대해 알아보겠습니다. 이웃의 방문자 수를 늘리는 방법에는 다작을 하고 많은 검색 사이트에 자신의 블로그를 올리는 방법도 있지만 블로거끼리 네이버 이웃을 신청해서 이웃들이 사이트를 방문하도록 유도하는 방법이 있습니다. 유튜브에 구독하기 처럼요.

네이버에는 이웃을 연결할 수 있는 이웃 커넥터를 제공하는데 이 이웃커넥터는 꼭 네이버 블로그가 아니여도 사용할 수 있습니다. 대표 블로그를 티스토리 블로그로 설정하고 새글 및 알람이 올라오게 되면 방문을 유도하게 됩니다.

따라서 새로 블로그를 만드신 블로거분들은 방문자수를 증가시키기 위해서 이웃커넥터를 사이드바에 설치하는 것이 좋겠죠? 그렇다면 Fastboot에 최적화한 네이버 이웃커넥터를 설치해볼까요? 자 그럼 지금부터 네이버 이웃 커넥터 설치해보겠습니다.

네코망고의 소소한 일상 꿀팁,

따라하기만 해도 득이되는 블로그~!

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

1. 우선 결과화면부터 보자.

최대한 fastboot 디자인에 잘 섞여들도록 사이드바를 만들었습니다. 네이버에서 제공하는 스크립트를 바로 적용하는 경우 디자인이 fastboot 스타일로 나오지 않기 때문에 스크립트 수정이 조금 필요합니다. 아래와 같은 사이드바를 만들고 싶다면 아래글을 읽어주세요.

그럼 이제부터 네이버 이웃커넥터를 등록하고 티스토리 블로그에 설치해보도록 하겠습니다.

2. 네이버에서 네이버 이웃 커넥터 등록하기

네이버 로그인을 한 후에 아래 사진과 같이 블로그 탭을 누르고 네이버 블로그로 들어갑니다.

그다음 이웃 목록 탭에 들어가 이웃관리를 눌러줍니다.

그러면 아래와 같은 화면이 뜨게 되는데 이때 '이웃커넥트 관리하기'에 들어갑니다. 들어가기 어려우신 분들은 아래 링크를 따라가시면 한번에 접속할 수 있습니다.

http://section.blog.naver.com/sub/InstallConnectWidget.nhn

자 그럼 위젯관리에서 자신의 티스토리 블로그 주소를 입력하고 저장을 누릅니다. 그리고 꼭 대표 블로그가 티스토리 블로그로 체크되어 있어야합니다. 저장을 누르면 네이버 이웃커넥트 위젯코드가 나오는데 이 코드는 복사를 해서 따로 저장해둡시다. 티스토리에 설치할때 사용해야 하니까요.

위젯 디자인 관리로 넘어와서 위젯 디자인을 변경합니다. 위젯 디자인 메뉴에서는 위젯의 디자인을 변경할 수 있는데 자기 취향대로 선택하시기 바랍니다. 저는 하늘색 계역의 색을 추가한 위젯을 만들었습니다.

3. 티스토리에 위젯 설치하기

다음은 티스토리 블로그 로그인 후 블로그 관리에서 꾸미기 > 사이드바 메뉴로 들어갑니다. 태그 입력기를 추가한 후에 편집에서 아까 네이버에서 복사한 코드를 아래와 같은 형식으로 변형하여 넣어줍니다.

아래 코드는 fastboot에 잘섞이도록 제가 디자인 태그를 추가하였으니 참고하시기 바랍니다. 그리고 아이콘 모양은 사람 모양이 나오도록 했구요.

티스트로 블로그 태그 입력기에 넣을 스크립트입니다. 기본 형식에 아이콘이 사람모양이 나오도록 'fa-users'로 변경했다.

<script src="https://blog.naver.com/connect/WidgetRender.nhn?blogId=고유 위젯 번호"></script>

아래 스크립트 부분에서 자신의 위젯 스크립트로 변경하고 태그 입력기에 적용한다.

1
2
3
4
5
6
7
8
9
10
11
<s_sidebar_element>
<!-- 네이버 이웃 -->
<div class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-users"></i> Neighbor</h4>
<div class="panel-body">
<div align="center">
<script src="https://blog.naver.com/connect/WidgetRender.nhn?blogId=위젯 고유 번호"></script>
</div>
</div>
</div>
</s_sidebar_element>
Colored by Color Scripter
cs