티스토리 본문에 자동으로 애드센스 광고 넣는 방법1. 이미지 뒤에 붙이기

제가 정말로 찾고싶었던 내용을 이래저래 보다가 알게되서 감동과 함께 글을 작성하게되었습니다. 

글을 쓰기전에 정말 토마토(블로그 보러가기)님께 대단하시며, 감사드린다는 말씀드리고 싶습니다. 

티스토리에 애드센스 광고 삽입과 관련된 내용을 검색하면 광고를 넣을 수 있는 방법은 아래와 같이 3가지 내용입니다. 

1. 티스토리 구글 애드센스 "플러그인을 활용해서 삽입"
2. 티스토리 "글쓰기의 메뉴중에 외부컨텐츠를 활용해 HTML에 구글 애드센스 코드 삽입"
3. 티스토리 서식에 애드센스 "광고 서식을 만들어서 서식불러오기로 사용"

글쓰기 메뉴중 외부컨텐츠 사용 관리자메뉴 서식에 등록해서 사용

근데 애드센스를 티스토리 내에 넣는 방법 중 2번하고 3번은 큰 문제가 있습니다. (현재까지 저도 그렇게 썼고 대부분의 분들이 그렇게 쓰셨을 꺼지만..)  

바로 아래의 그림과 같이 포스팅 글안에 광고소스코드가 박혀버린다는 것입니다. 머 광고만 나오면되지머 상관없지 생각하시는 분들도 계실텐데요. 

포스팅 글 안에 광고소스코드가 박혀있다.

일단 포스팅 글 자체가 엄청 지저분해지고, 포스팅안에 박혀버리면 일괄적인 수정이 어렵습니다. 

나중에 하나하나 광고 박힌거 찾아서 일일히 다 수정을 해줘야하는 거죠

또는 포스팅을 변경하거나 수정하다가 코드 잘못건드리면 뻑이나기도 하고 또다시 넣어줘야 한다거나, 

애드센스 정책이 바뀌어서 해당 광고를 못쓴다거나 할때 해당 광고가 들어가 있는 포스팅을 다 찾아서 수정하는 개노가다를 해줘야합니다. 

1번에(티스토리 플러그인)처럼 넣었다 뺐다를 모든 포스팅에 동시에 할 수가 없는 것이지요. 

그렇다고 플러그인을 쓰자니 단점은 글 초반과 막판에 나와서 중간에 못넣는다는 것이지요. 글 중간에도 넣고 싶고 여기저기 붙이고 싶은데...

2번(외부컨텐츠)와 3번(서식삽입)의 방법은 수동으로 해야하고 수정할일 생기면 개노가다가 발생한다는 것입니다. 

그런데 이를 해결할 수 있는 방법이 있습니다.

티스토리 글 중간에 애드센스를 자동으로 넣어보자

이 모든 단점을 해결할 수 있는 방법은 바로 HTML과 스크립트(Script)로 가능하게 만들수 있습니다. 

할줄을 몰라서 그렇지.. 할줄 아시는 분들은 정말 지금 잘 활용하셔서 애드센스 수익이 많이많이 나오실 것이라고 생각이 듭니다. 

저도 진작에 알았으면 좋았을 껄하면서 후회도 하지만 지금이라도 알았으니 어서 적용해야지 하는 생각입니다. 

그런데 이걸 티스토리 블로거 토마토님이 아주 쉬운 설명과 함께 소스코드를 오픈해주셨습니다. 바로 포스팅 글의 첫번째 이미지나 두번째 이미지 이미지 위나 아래에 바로 연속해서 광고가 자동으로 붙을 수 있도록 하는 소스코드입니다. (https://sometimes-n.tistory.com/30) 여기 가셔서 소스코드를 복사하신 후에 개인의 블로그에 적용하시기 바랍니다. 

※ 제가 글을 복사할 수 있게 하는 방법을 몰라서 링크를 걸었습니다. ^^;

하지만 IT전공자인지라 (10년넘게 IT관련일은 안함 ㅎㅎ) 코드를 대충보고 해석은 할 수 있을 것 같은데요.. 주석만 조금 추가해서 설명을 넣어보도록 하겠습니다. 활용하시는데 도움이 되셨으면 합니다. 

<토마님이 제공하는 티스토리 내 애드센스 자동삽입하는 소스코드 해석하기> <div id="adsenselink1" style="display:none;"> 여기가 1번 광고를 넣는 곳입니다.  <!-- 애드센스 [링크 반응형1] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형1 --> <ins class="adsbygoogle"      style="display:block"      data-ad-client="ca-pub-xxxxxxxxxxxxxxx"      data-ad-slot="xxxxxxxxxx"      data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형1] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요.  --> </div> <div id="adsenselink2" style="display:none;"> 여기가 2번 광고를 넣는 곳입니다.  <!-- 애드센스 [링크 반응형2] 코드를 복사해서 여기부터 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 링크 반응형2 --> <ins class="adsbygoogle"      style="display:block"      data-ad-client="ca-pub-xxxxxxxxxxxxxxx"      data-ad-slot="xxxxxxxxxx"      data-ad-format="link"></ins> <!-- 여기까지 [링크 반응형2] 코드를 붙여넣으시되, <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 위 코드는 빼고 넣으세요.  --> </div> <script type="text/javascript"> $(function(){ 이미지의 갯수를 numimg에 저장해라   var numimg = parseInt($(".imageblock").length,10); 넓이가 200으로 일단 초기 셋팅해라   var ibwidth = 200;   if(numimg>0){     if(numimg==1){ 이미지갯수가 1개면 2번광고는 하지마라       $("#adsenselink2").remove();     }     if(numimg>0){ 첫번째 이미지의 넓이를 받아와라       ibwidth = $(".imageblock:first").css("width"); 첫번째 이미지의 넓이가 728px보다 작으면 광고 1번을 가로 200에 맞춰서 보여줘라       if(parseInt(ibwidth) < 728){         $("#adsenselink1").css({"display":"block","min-height":"18px","width":"200px"});       }else{ 첫번째 이미지의 넓이가 728px보다 크다면 광고 1번을 가로 728사이즈로 보여줘라         $("#adsenselink1").css({"display":"block","min-height":"18px","width":"728px"});       } 첫번째 이미지 다음에 광고 1번을 붙여라       $(".imageblock:first").append($("#adsenselink1"));       (adsbygoogle = window.adsbygoogle || []).push({});     } 이미지갯수가 1개보다 많냐?     if(numimg>1){ 이하 로직은 1개일때와 동일합니다.       ibwidth = $(".imageblock:eq(1)").css("width");       // [링크 반응형2]를 두번째 이미지 아래에 넣고 싶으면 .imageblock:eq(1)       // [링크 반응형2]를 마지막 이미지 아래에 넣고 싶으면 .imageblock:last       if(parseInt(ibwidth) < 728){         $("#adsenselink2").css({"display":"block","min-height":"18px","width":"200px"});       }else{         $("#adsenselink2").css({"display":"block","min-height":"18px","width":"728px"});       } 두번째 이미지 다음에 광고 2번을 붙여라       $(".imageblock:eq(1)").append($("#adsenselink2"));       // [링크 반응형2]를 두번째 이미지 아래에 넣고 싶으면 .imageblock:eq(1)       // [링크 반응형2]를 마지막 이미지 아래에 넣고 싶으면 .imageblock:last       (adsbygoogle = window.adsbygoogle || []).push({});     }   }else{ 이미지갯수가 0이면 나오지 마라     $("#adsenselink1").remove();     $("#adsenselink2").remove();   } }); </script> 출처: https://sometimes-n.tistory.com/30?category=175607 [종종 올리는 블로그]

위에도 설명드렸지만 해당 코드(HTML)를 이용해서 조금 활용할 줄 알면, 내가 원하는 위치에 자동으로 광고가 나오게끔 설정을 해놓고, 본문 포스팅하는데만 집중하고 글을 쓸수가 있습니다.