티스토리에 네이버와 구글 플러스 공유 기능 적용하기_나름 간단

이제는 선사시대 이야기처럼 들리겠지만, 20년 전만 해도 홈페이지가 많이 활성화되어 있지 않아서 개인 홈페이지도 얼마 없었다.

 

그러다 보니, 야후 등 당시 주요 검색 엔진에 카테고리 안에 등록만 되어도 상당한 방문자들이 홈페이지를 찾았다.

물론 다른 사이트에서 알아서 찾아와 링크 등록도 해 주고 말이다. 

 

하지만, 지금은 너도 나도 블로그 몇 개쯤은 가지고 있고, 비슷한 콘텐츠를 다루는 사이트들이 넘쳐 난다.

 

이런 사이트의 홍수 속에서, 경우에 따라서는 양질의 콘텐츠를 가지고 있는 사이트가 제대로 검색되거나 알려지지 못해서, 상대적으로 내용은 부실하지만 상단에 검색되거나 공감 등을 많이 받은 사이트에 밀려, 묻히고 마는 경우도 다반사인 것으로 알고 있다. 

 

 

에드센스 광고 베너를 티스토리 사이드바에 적용하는 방법과 관련하여 정리를 하면서 블로그 게시물의 Quality 와 Quantity가 기본임을 언급하긴 했지만, 그럼에도 불구하고 블로그 자체가 노출이 많이 되도록 하려는 고민이 바로 위와 같은 이유 때문이다. 

 

2018/04/08 - [세상이야기/홈페이지, 블로그] - 티스토리 사이드바에 에드센스(Adsense) 광고 배너 적용하는 방법

 

 

고기가 입질도 하고 잡혀야 그 중에 월척도 있는 거지, 입질도 전혀 없는데... 어느 날 고래만 한 고기를 잡기를 기대하는 것이 과연 합리적이겠는가?? 

 

 

그래서 노출을 늘리는 방법으로 다른 블로거들은 무엇을 하나 둘러보다 보니...

 

티스토리 유저들이 아쉬워 하는 기능 중에 하나... 바로 네이버와의 공유, 이웃 등록 등의 기능이 티스토리 자체적으로는 지원되지 않는다는 것이다.

 

솔직히 네이버가 마음에 들지는 않지만, 국내에서 포탈로 상당한 입지를 가지고 있는 것은 부인할 수 없다.

그런데, 경쟁관계에 있는 다음의 입장에서는 티스토리에 네이버와 공유하는 기능을 제공하는 것은 여러 가지 이유에서 가능하지 않을 것이다.

 

그렇다면... 티스토리 내에 이웃기능 정도는 있어도 나쁘지 않을 텐데...

(아쉽지만, 사용자들이 원한다고 모두 다 반영될 수는 없는 거니까... 그리고 다른 우회적인 방법도 없진 않나 보다.)

 

 

아무튼 그래서, 위의 이미지에서 볼 수 있는 것처럼 네이버에 게시물을 공유할 수 있는 기능을 덧붙이다가 보니, 구글+라는 것도 생겼다고 해서 함께 붙여 보았다.

 

사실은 [카카오스토리] [트위터] [페이스북]이 있는 위치에 함께 모아 놓고 싶었는데... 해당 기능은 티스토리가 모듈로 지원하고 있어서 내가 거기까지는 어떻게 할 방법을 찾지 못했다.

 

그러다 보니 엉뚱하게 네이버 공유 이미지가 밑으로 떨어져 혼자 내려왔는데... 거기에 옆으로 [구글+]와 [구글+팔로우]를 붙여 넣으니 모양새가 그마다 혼자 있는 것보단 나아졌다.

 

 

그럼 본격적으로 어떻게 적용하는지 정리해 보면 다음과 같다.

 

 

1. 티스토리에 네이버 공유 기능 적용하기

 

https://developers.naver.com/docs/share/navershare/ 

 

위에 네이버 공유하기 개발 가이드 사이트에 가 보면... 인터넷에 있는 게시물을 네이버로 공유하는 여러 가지 방법들이 안내되어 있다. 그런데, 나도 솔직히 좀 헛갈렸다. 이럴 땐 이렇게 저럴 땐 저렇게... 이렇게 해야 하는 건지, 저렇게 해야 하는 건지 잘 알아들을 수 없다.

 

그래서, 나처럼 위와 같이 적용하려면 어떻게 하는지만 설명하려고 한다.

 

먼저 [블로그 관리]에서 [꾸미기]에 있는 [스킨 편집]을 선택하여, 해당 화면에서 우측 상단에 있는 [HTML 편집]을 눌러 html 소스를 본다. 거기에서 Ctrl + F 키로 'rep_desc'를 검색하여 

이제는 선사시대 이야기처럼 들리겠지만, 20년 전만 해도 홈페이지가 많이 활성화되어 있지 않아서 개인 홈페이지도 얼마 없었다.

 

그러다 보니, 야후 등 당시 주요 검색 엔진에 카테고리 안에 등록만 되어도 상당한 방문자들이 홈페이지를 찾았다.

물론 다른 사이트에서 알아서 찾아와 링크 등록도 해 주고 말이다. 

 

하지만, 지금은 너도 나도 블로그 몇 개쯤은 가지고 있고, 비슷한 콘텐츠를 다루는 사이트들이 넘쳐 난다.

 

이런 사이트의 홍수 속에서, 경우에 따라서는 양질의 콘텐츠를 가지고 있는 사이트가 제대로 검색되거나 알려지지 못해서, 상대적으로 내용은 부실하지만 상단에 검색되거나 공감 등을 많이 받은 사이트에 밀려, 묻히고 마는 경우도 다반사인 것으로 알고 있다. 

 

 

에드센스 광고 베너를 티스토리 사이드바에 적용하는 방법과 관련하여 정리를 하면서 블로그 게시물의 Quality 와 Quantity가 기본임을 언급하긴 했지만, 그럼에도 불구하고 블로그 자체가 노출이 많이 되도록 하려는 고민이 바로 위와 같은 이유 때문이다. 

 

2018/04/08 - [세상이야기/홈페이지, 블로그] - 티스토리 사이드바에 에드센스(Adsense) 광고 배너 적용하는 방법

 

 

고기가 입질도 하고 잡혀야 그 중에 월척도 있는 거지, 입질도 전혀 없는데... 어느 날 고래만 한 고기를 잡기를 기대하는 것이 과연 합리적이겠는가?? 

 

 

그래서 노출을 늘리는 방법으로 다른 블로거들은 무엇을 하나 둘러보다 보니...

 

티스토리 유저들이 아쉬워 하는 기능 중에 하나... 바로 네이버와의 공유, 이웃 등록 등의 기능이 티스토리 자체적으로는 지원되지 않는다는 것이다.

 

솔직히 네이버가 마음에 들지는 않지만, 국내에서 포탈로 상당한 입지를 가지고 있는 것은 부인할 수 없다.

그런데, 경쟁관계에 있는 다음의 입장에서는 티스토리에 네이버와 공유하는 기능을 제공하는 것은 여러 가지 이유에서 가능하지 않을 것이다.

 

그렇다면... 티스토리 내에 이웃기능 정도는 있어도 나쁘지 않을 텐데...

(아쉽지만, 사용자들이 원한다고 모두 다 반영될 수는 없는 거니까... 그리고 다른 우회적인 방법도 없진 않나 보다.)

 

 

아무튼 그래서, 위의 이미지에서 볼 수 있는 것처럼 네이버에 게시물을 공유할 수 있는 기능을 덧붙이다가 보니, 구글+라는 것도 생겼다고 해서 함께 붙여 보았다.

 

사실은 [카카오스토리] [트위터] [페이스북]이 있는 위치에 함께 모아 놓고 싶었는데... 해당 기능은 티스토리가 모듈로 지원하고 있어서 내가 거기까지는 어떻게 할 방법을 찾지 못했다.

 

그러다 보니 엉뚱하게 네이버 공유 이미지가 밑으로 떨어져 혼자 내려왔는데... 거기에 옆으로 [구글+]와 [구글+팔로우]를 붙여 넣으니 모양새가 그마다 혼자 있는 것보단 나아졌다.

 

 

그럼 본격적으로 어떻게 적용하는지 정리해 보면 다음과 같다.

 

 

1. 티스토리에 네이버 공유 기능 적용하기

 

https://developers.naver.com/docs/share/navershare/ 

 

위에 네이버 공유하기 개발 가이드 사이트에 가 보면... 인터넷에 있는 게시물을 네이버로 공유하는 여러 가지 방법들이 안내되어 있다. 그런데, 나도 솔직히 좀 헛갈렸다. 이럴 땐 이렇게 저럴 땐 저렇게... 이렇게 해야 하는 건지, 저렇게 해야 하는 건지 잘 알아들을 수 없다.

 

그래서, 나처럼 위와 같이 적용하려면 어떻게 하는지만 설명하려고 한다.

 

먼저 [블로그 관리]에서 [꾸미기]에 있는 [스킨 편집]을 선택하여, 해당 화면에서 우측 상단에 있는 [HTML 편집]을 눌러 html 소스를 본다. 거기에서 Ctrl + F 키로 'rep_desc'를 검색하여 을 찾는다.

 

그리고 다음 줄에 아래의 코드를 입력하는데... 첨부된 txt 파일에서 본인의 블로그 아이디 주소만 입력해서, 복사해 붙이면 되겠다.

 

<a href="http://share.naver.com/web/shareView.nhn?url=http://블로그아이디.tistory.com
&title=" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,
menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=600,height=600'); return false;">

<img src="./images/naver_square_24x24.png" alt=""></a>

 

 

네이버공유코드.txt

다운로드

 

 

 

 

2. 티스토리에 구글 플러스 공유와 구글 팔로우 적용하기

 

 

https://developers.google.com/+/web/share/

 

 

구글 플러스 공유 기능과 팔로우를 적용하기 위해서는 <head>와 </head>에 아래의 스크립트를 넣어야 하는데, 둘 다 하나의 스크립트로 적용이 되기 때문에 나의 경우도 'Google +'만 하려고 했다가, 'Google Follow'도 같이 적용시켰다. html 코드에 익숙하지 않다면 </head> 앞에 아래 코드를 붙여 놓는 것이 쉬울 것이다. 

 

마찬가지로 아래에 txt 파일에 해당 코드를 넣어 두었으니, 복사해서 적용하면 되고... 팔로우 코드를 적용하려면 우선 Google Follow에 가입을 해야 하기 때문에 가입을 하고서 로그인 상태로 위의 사이트에 들어가면 자동으로 자신의 팔로우 ID가 적용된 코드를 붙여 넣으면 되겠다.

 

 

<script src="https://apis.google.com/js/platform.js" async defer> </script>

 

 

다음으로는 <body>와 </body> 사이에 각각 아래의 코드를 넣는다. 이번에는  <body> 밑에 코드를 넣는 것이 쉽겠다.

 

<!-- Google +에 게시물 퍼가기 코드 --!>

 

<div class="g-plusone" data-size="standard"></div>

 

 

<!-- Google + 팔로우 코드 --!>

 

<div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/자신의 팔로우 코드" data- rel="author"></div>

 

 

 

구글플러스공유코드.txt

다운로드

 

 

 

반응형

을 찾는다.

 

그리고 다음 줄에 아래의 코드를 입력하는데... 첨부된 txt 파일에서 본인의 블로그 아이디 주소만 입력해서, 복사해 붙이면 되겠다.

 

<a href="http://share.naver.com/web/shareView.nhn?url=http://블로그아이디.tistory.com
/162&title=티스토리에 네이버와 구글 플러스 공유 기능 적용하기_나름 간단" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,
menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=600,height=600'); return false;">

<img src="./images/naver_square_24x24.png" alt=""></a>

 

 

네이버공유코드.txt

다운로드

 

 

 

 

2. 티스토리에 구글 플러스 공유와 구글 팔로우 적용하기

 

 

https://developers.google.com/+/web/share/

 

 

구글 플러스 공유 기능과 팔로우를 적용하기 위해서는 <head>와 </head>에 아래의 스크립트를 넣어야 하는데, 둘 다 하나의 스크립트로 적용이 되기 때문에 나의 경우도 'Google +'만 하려고 했다가, 'Google Follow'도 같이 적용시켰다. html 코드에 익숙하지 않다면 </head> 앞에 아래 코드를 붙여 놓는 것이 쉬울 것이다. 

 

마찬가지로 아래에 txt 파일에 해당 코드를 넣어 두었으니, 복사해서 적용하면 되고... 팔로우 코드를 적용하려면 우선 Google Follow에 가입을 해야 하기 때문에 가입을 하고서 로그인 상태로 위의 사이트에 들어가면 자동으로 자신의 팔로우 ID가 적용된 코드를 붙여 넣으면 되겠다.

 

 

<script src="https://apis.google.com/js/platform.js" async defer> </script>

 

 

다음으로는 <body>와 </body> 사이에 각각 아래의 코드를 넣는다. 이번에는  <body> 밑에 코드를 넣는 것이 쉽겠다.

 

<!-- Google +에 게시물 퍼가기 코드 --!>

 

<div class="g-plusone" data-size="standard"></div>

 

 

<!-- Google + 팔로우 코드 --!>

 

<div class="g-follow" data-annotation="bubble" data-height="24" data-href="//plus.google.com/u/0/자신의 팔로우 코드" data- rel="author"></div>

 

 

 

구글플러스공유코드.txt

다운로드