본문 바로가기

네이버 메인화면에 내 블로그 추가하기 [워드프레스 & 티스토리]

2018. 10. 22. 댓글 6

네이버에서 제공하는 '네이버 오픈메인' 서비스를 이용하여 블로그에 네이버 메인화면에 내 홈페이지를 추가하는 버튼을 추가할 수 있습니다.

네이버 메인화면에 내 블로그 추가하기네이버 메인화면에 내 블로그 링크 추가하기. 사진 출처: 네이버.

방법은 비교적 간단합니다. 네이버 오픈메인 페이지에서 자세한 방법이 설명되어 있습니다.

네이버 메인화면에 내 블로그를 추가하는 방법

먼저 환경 선택에서 "서비스 환경"을 선택하고 코드를 복사합니다.

네이버 오픈메인

이 코드를 사이트의 적절한 곳에 추가해야 합니다. 워드프레스의 경우 footer.php 파일의 </body> 바로 위에 붙여넣기할 수 있습니다.

티스토리의 경우 스킨 편집 화면에서 마찬가지로 </body> 태그 바로 위에 붙여넣기하면 됩니다.

다음으로 버튼 모양을 설정합니다.

네이버 오픈메인

이름, URL, 버튼 디자인 부분을 적절히 선택하거나 설정합니다. 그런 다음 미리보기 및 코드복사 섹션에서 코드를 복사합니다.

네이버 오픈메인 - 티스토리, 워드프레스

이제 이 코드를 실제 버튼이 표시될 곳에 붙여넣기해야 합니다.

워드프레스의 경우 single.php 파일이나 적절한 파일에 추가할 수 있습니다. 혹은 테마의 함수 파일에 다음 코드를 추가할 수 있습니다. (자식테마를 사용하도록 합니다.)

add_filter('the_content','add_my_content');
function add_my_content($content) {
$my_custom_text = '<div class="nv-openmain" data-title="아바다" data-url="https://avada.tistory.com/" data-type="W2"></div>'; //
if(is_single() && !is_home()) {
$content .= $my_custom_text;
}
return $content;
}

티스토리의 경우 보통 [##_article_rep_desc_##] 라인 아래에 붙여넣기 하면 될 것 같습니다. HTML 파일 내의 적절한 곳에 붙여넣기 하도록 합니다.

그리고 다음 CSS 코드를 추가합니다. 그러면 네이버 메인화면 추가 버튼이 가운데 정렬됩니다. (잘 안 되면 테마나 스킨에 맞는 적절한 코드를 찾도록 합니다.)

.nv-openmain {
    text-align: center !important;
}

이제 사이트를 확인해보면 개별 글 하단에 내 블로그 링크를 네이버 메인화면에 추가할 수 있는 버튼이 표시됩니다. 이 버튼은 네이버 앱에서만 작동하는 것 같습니다.

모바일에서 버튼을 클릭하면 네이버 메인에 사이트 링크를 추가할 것인지 묻는 팝업이 표시됩니다.

네이버 오픈메인

메인에 추가를 클릭하면 몇 번 더 팝업 화면이 표시되면서 네이버 메인화면에 내 블로그가 추가됩니다.

티스토리에서는 꾸미기 > 모바일에서 티스토리 모바일웹 자동 연결을 '사용하지 않습니다'로 설정해야 모바일에서 버튼이 표시됩니다.

네이버 오픈메인 - 티스토리

이 티스토리 블로그는 네이버를 통한 유입이 거의 없지 않기 때문에 코드를 추가했다가 그냥 삭제했습니다. 테스트를 해보니 예상대로 잘 작동하네요. 다만 스크립트를 로드하는 데 약간의 딜레이가 있는 것 같습니다. 굳이 필요한 기능이 아니라면 사용하지 않아도 될 것 같습니다.

워드프레스의 경우 코스모스팜에서 제공하는 무료 플러그인을 사용하는 것도 가능합니다. 참고로 소셜 공유 플러그인은 사이트 속도에 부정적인 영향을 미칠 수 있으므로 가능하면 테마에서 제공하는 기능을 사용하거나 직접 코드를 추가하는 것이 사이트 성능에 좋을 수 있습니다.

  • https://ko.wordpress.org/plugins/cosmosfarm-share-buttons/

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글6