태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
 

 
페이지 구독





과거 기사

Locations of visitors to this page

자바스크립트로 티스토리 모바일에 광고 넣기

IT네트워크/블로그 | 2013.01.08 18:46 | Posted by Namu(南無)

티스토리는 다음에서 제공하는 블로그 서비스입니다. 자유로운 스킨 편집으로 다들 다양한 형태로 블로그를 이용하여 즐기고 있습니다. 그런데 유독 모바일에서는 그러한 스킨 편집을 제공하지 않고 있습니다. 그래서 모바일에 광고를 넣기 위해서 본문에 광고를 강제로 넣고 표시하는 것을 하고 있지만 그런 방법은 데스크탑에서의 광고 배치를 자유롭게 하지 못 합니다.

2012/12/28 - InnerHTML을 이용하여 티스토리 모바일에 광고 넣기

그래서 역시 자바스크립트의 InnerHTML을 이용해서 티스토리 모바일에 광고를 넣는 방법을 시도해 보았지만, 크롬과 파이어폭에서는 정상적으로 동작하지만, 인터넷 익스플로러와 사파리에서는 정상 동작하지 않는 등 문제가 있어 결국 포기할 수 밖에 없었습니다. 그래서 새로운 코드로 고쳤습니다. 이번 코드는 티스토리 특유의 모바일 주소, [블로그 주소]/m라는 걸 착안해서 동작하는 코드입니다.

2013/01/08 - 티스토리 모바일에 스타일을 적용하여 꾸며보자

앞서 다른 글에서 티스토리 모바일에 CSS를 적용하는 코드도 동일한 코드를 사용하고 있습니다. 이 방법의 장점은 향후 다음 티스토리가 모바일 스킨을 지원할 경우 자바스크립트 파일의 내용만 바꾸어버리면 되기 때문에 기존의 글을 고치지 않아도 되는 장점이 있습니다.

본문 삽입을 위한 자바스크립트 파일 작성

본문에 모두 자바스크립트를 넣어도 되지만, 그럴 경우 코드의 수정이 있을 때 복잡합니다. 그래서 자바스크립트 파일인 .js 파일로 만드는 것이 좋습니다.

(function() { var currentM; currentM = location.href.split("/")[3]; //<-- // 구분자로 짤라와서 if(currentM=='m'){ document.writeln('<sc' + 'ript type="text/javascript">'); document.writeln('<!--'); document.writeln('google_ad_client = "[클라이언트 코드]";'); document.writeln('/* [광고 이름] */'); document.writeln('google_ad_slot = "[광고 슬롯]";'); document.writeln('google_ad_width = [광고 넓이];'); document.writeln('google_ad_height = [광고 높이];'); document.writeln('//-->'); document.writeln('</s' + 'cript>'); document.writeln('<sc' + 'ript type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></s' + 'cript>'); } })();

이 코드는 모바일로 티스토리가 표시될 때에만 모바일 광고가 적용되도록 하는 코드입니다. PC 모드에서는 적용되지 않는 구조입니다.

이 코드를 자바스크립트 파일로 저장한 다음 본문에서 불러 들이면 됩니다. 첨부 파일을 마우스 오른쪽 버튼을 클릭하여 메뉴를 불러낸 다음 다른 이름으로 저장한 다음[ ]로 나눈 부분에는 본인의 구글 애드센스 코드를 보고 필요한 부분을 넣으면 됩니다.

광고 자바스크립트 파일을 업로드하고 불러들이기

다른 글에서 CSS 적용을 위한 방법과 동일합니다. 자바스크립트 파일을 업로드한 다음 그것을 부르는 방식입니다.

2013/01/08 - 티스토리 모바일에 스타일을 적용하여 꾸며보자

적용할 스타일을 써넣은 자바스크립트 파일을 업로드할 차례입니다. 관리>HTML/CSS 편집>파일 업로드로 들어가서 방금 만든 AdsenseM.js 파일을 업로드합니다.

추가 버튼을 눌러 파일을 업로드하면 해당 자바스크립트 파일을 찾을 수 있습니다.

해당 파일을 찾아 마우스 오른쪽 버튼을 클릭하여 새 탭에서 링크를 열어줍니다. 그러면 그 파일의 주소를 확인할 수 있습니다. 이것은 각 블로그마다 주소가 다르니 직접 확인하여야 합니다.

다음에는 다음 코드를 넣습니다.

<div style="[광고 상자에 적용할 스타일]"> <script type="text/javascript" src="[확인한 주소]/skin/images/AdsenseM.js"></script></div>

광고를 div 태그로 묶으므로 그에 걸맞는 스타일을 적용하시면 됩니다. 예시로는 "width:300px; margin: auto;" 등이 있을 수 있습니다. 그 다음에는 이 코드를 광고를 적용할 곳에 붙여 넣습니다. 서식으로 만들어서 사용하여도 됩니다. 이것을 CSS 적용을 위한 스크립트와 통합하여 사용하여도 무방하고 따로 불러 쓰셔도 됩니다. 티스토리 모바일의 경우에는 "margin: auto;"를 넣어도 살짝 오른쪽으로 밀리므로 그걸 막기 위해서 "padding-right: 8px;"를 넣으면 맞습니다.

저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요!!

  1. 이전 댓글 더보기
  2. 2013.01.26 22:07  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.01.28 03:02 신고  댓글주소  수정/삭제

      약관상 문제 없습니다. 백업, 복원을 이용해서 일괄 적용이 불가능하진 않습니다만, XML 데이터를 직접 에디터로 열어서 하나하나 수정해야 할 겁니다. 용량상 쉽진 않을 듯 하네요.

  3. Favicon of http://jepisode.com 쥬르날 2013.01.26 22:43 신고  댓글주소  수정/삭제  댓글쓰기

    적용해 보고 있는데요.
    제가 잘 모르는 부분이 있어서 질문 드립니다. ^^;;

    'currentM = location.href.split("/")[3]; //<-- // 구분자로 짤라와서'

    요 부분에서 ' //<-- // 구분자로 짤라와서' 은 ...
    주석인가요??..
    지워도 되는 건지 ... 궁금합니다.
    잘 몰라서 드리는 질문이오니 답변 부탁드립니다. ^^;;;

  4. 2013.01.30 16:38  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. 2013.01.31 15:08  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.01.31 15:32 신고  댓글주소  수정/삭제

      [ ] 사이의 내용을 안 바꾸셨네요... ;;
      애드센스 코드에 있는 내용을 그에 채우세요.

      예를 들면 쓰시는 블로그에 넣은 구글 애드센스처럼 말이죠.

      (function() {
      var currentM;
      currentM = location.href.split("/")[3]; //<-- // 구분자로 짤라와서
      if(currentM=='m'){
      document.writeln('<sc' + 'ript type="text/javascript">');
      document.writeln('<!--');
      document.writeln('google_ad_client = "ca-pub-6337533790544553";;');
      document.writeln('/* 468X15 링크 */;');
      document.writeln('google_ad_slot = "1480205017";');
      document.writeln('google_ad_width = 468;;');
      document.writeln('google_ad_height = 15;;');
      document.writeln('//-->');
      document.writeln('</s' + 'cript>');
      document.writeln('<sc' + 'ript type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></s' + 'cript>');
      }
      })();

      예를 들면 이렇게 말입니다.

  6. 2013.02.01 17:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.02.02 01:00 신고  댓글주소  수정/삭제

      (function() {
      var currentM;
      currentM = location.href.split("/")[3]; //<-- // 구분자로 짤라와서
      if(currentM=='m'){
      document.writeln('<sc' + 'ript type='text/javascript src="http://rsense-ad.realclick.co.kr/rsense/rsense_ad.js?rid=491652350134&stamp=1359704902" charset="euc-kr">');
      document.writeln('</s' + 'cript>');
      }
      })();

      이렇게 하여보세요.

    • 2013.02.02 03:24  댓글주소  수정/삭제

      비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.02.02 12:07 신고  댓글주소  수정/삭제

      따옴표가 좀 틀렸었네요.

      (function() {
      var currentM;
      currentM = location.href.split("/")[3]; //<-- // 구분자로 짤라와서
      if(currentM=='m'){
      document.writeln('<sc' + 'ript type="text/javascript" src="http://rsense-ad.realclick.co.kr/rsense/rsense_ad.js?rid=491652350134&stamp=1359742433" charset="euc-kr">');
      document.writeln('</s' + 'cript>');
      }
      })();

      이걸 넣어서 해보시고, 실제 적용한 페이지를 알려주세요. 한번 보도록 하게요.

    • 2013.02.05 16:32  댓글주소  수정/삭제

      비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.02.06 05:26 신고  댓글주소  수정/삭제

      음... 약관을 읽지 않아서 잘 모르겠지만 모바일과 PC가 레이아웃이 다른데 같은 표시가 가느앟ㄴ지, 그런 의문부터 드네요. ;;

    • 2013.02.06 06:18  댓글주소  수정/삭제

      비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.02.06 10:00 신고  댓글주소  수정/삭제

      그렇다면 스크립트를 모바일에서만 출력되는 것을 떼어버리고, 스크립트로 데스크탑/모바일 모두에 출력되도록 하고... 나중에 모바일 스킨이 적용되면 스크립트에서 광고 출력 기능을 제거해버리면 향후 본문을 다시 수정할 일이 없어질 겁니다... 저도 그래서 스크립트를 굳이 쓰는 겁니다.

  7. 깔삼블로그 2013.02.14 11:56 신고  댓글주소  수정/삭제  댓글쓰기

    뭘해도 모바일쪽으로는 광고 출력이 안되네요 ㅠㅠ
    위에 설명하신대로 다 했는데 저는 모바일쪽에 광고가 노출이
    되지않네요 ㅠㅠ 이곳저곳 돌아다니면서 여러방법을 써 봤는데
    하나도 되는것이 없습니다 ㅠㅠ div스타일도 다 빼고 광고코드만
    넣으면 PC상에서는 보여지지만 모바일에서는 안나오고...

    • Favicon of http://ggalsam.tistory.com 깔삼블로그 2013.02.14 11:58 신고  댓글주소  수정/삭제

      (function() {
      var currentM;
      currentM = location.href.split("/")[3]; //<-- // 구분자로 짤라와서
      if(currentM=='m'){
      document.writeln('<sc' + 'ript type="text/javascript">');
      document.writeln('<!--');
      document.writeln('google_ad_client = "ca-pub-5001180312623150";');
      document.writeln('/* mobile2 */');
      document.writeln('google_ad_slot = "2199014023";');
      document.writeln('google_ad_width = 300;');
      document.writeln('google_ad_height = 250;');
      document.writeln('//-->');
      document.writeln('</s' + 'cript>');
      document.writeln('<sc' + 'ript type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></s' + 'cript>');
      }
      })();

      틀린것이 있을까요?

    • Favicon of http://studioxga.net Namu(南無) 2013.02.14 15:09 신고  댓글주소  수정/삭제

      적용한 페이지를 알려주시면 한번 봐드리도록 할게요. 주소를 알려주세요.

  8. Favicon of http://issos.tistory.com 이소스 2013.02.17 14:32 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 말씀해 주신 방법으로 적용을 해 보니 모바일에서 광고가 노출이 잘 되더라구요.
    너무 감사 드립니다!!
    그런데 한가지 문제가 있었던게 모바일에서 노출되었던 광고의 링크 문제였습니다.
    클릭해도 넘어가지 않는 경우가 많았구요.
    텍스트 광고가 노출되어 해당 페이지로 넘어가더라도 광고크기만큼 아이프레임처럼 넘어갔던 페이지가 노출이 되더라구요.
    구글의 문제인지 휴대폰의 문제인지...
    다른 블로그들의 구글광고들도 그런 문제가 보이네요.

    • Favicon of http://studioxga.net Namu(南無) 2013.05.30 12:29 신고  댓글주소  수정/삭제

      휴대폰에서 사용하는 브라우저가 무엇입니까? 제 경우에는 그런 문제가 없습니다. 구글 광고가 모두 iframe으로 구성되어 이 경우 '새탭' 또는 '새창'으로 열리도록 되어있는데 쓰시는 브라우저에서 그걸 막고 있어서 발생하는 문제 같습니다.

      사용하시는 웹 브라우저를 알려주세요.

  9. Favicon of http://blog.hansune.com 한수댁 2013.05.02 21:32 신고  댓글주소  수정/삭제  댓글쓰기

    정말 좋은데용!!! Thanks a lot!!

  10. 2013.06.13 23:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of http://studioxga.net Namu(南無) 2013.06.14 09:41 신고  댓글주소  수정/삭제

      document.writeln('내용');
      위 내용이라 있는 부분에 각 한 줄씩 추가하면 됩니다.

      이런 식이 되죠.
      document.writeln('<sc' + 'ript type="text/javascript"><!--');
      document.writeln(// XHTML should not attempt to parse these strings, declare them CDATA.');
      document.writeln(/* <![CDATA[ */');
      document.writeln(window.googleAfmcRequest = {');
      document.writeln(client: "ca-mb-pub-3764190268732756",');
      document.writeln(format: "320x50_mb",');
      document.writeln(output: "HTML",');
      document.writeln(slotname: "6088616262",');
      document.writeln(};');
      document.writeln(/* ]]> */');
      document.writeln('//--></s' + 'cript>');
      document.writeln('<sc' + 'ript type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_afmc_ads.js"></s' + 'cript>');

    • 2015.11.15 22:32  댓글주소  수정/삭제

      비밀댓글입니다

    • 2015.11.15 22:32  댓글주소  수정/삭제

      비밀댓글입니다

  11. Favicon of http://danbis.net 단비스 2013.06.16 17:12 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보덕분에 잘 사용을 하고 있고, 감사합니다...^^

    근데 오늘 든 의문인데, 나중에 문제가 된다면 해당 js 파일을 지우고, 다시 올려도 경로는 그대로인가요?

    또는 다른 웹사이트(호스팅업체)에 올려놓아도 상관은 없을까요?

    알려주시면 감사하겠고, 주말 마무리 잘하시길 바라겠습니다!

  12. 휘몰아쳐라 2013.07.27 08:44 신고  댓글주소  수정/삭제  댓글쓰기

    제가 쓴 블로톡에 답글을 달아주셔서 정말 감사드립니다
    한가지 여쭤볼게 있다면은 이렇게 pc에서 숨기는 소스를 사용하는게
    혹시 정책위반에 해당하지 않을까하는생각이들어서요..
    답변부탁드려요~

    • Favicon of http://studioxga.net Namu(南無) 2013.07.27 08:58 신고  댓글주소  수정/삭제

      논쟁의 소지가 있습니다만, 구글도 모호하게 답변을 하더군요. 근데 이미 모바일에서 애드센스 플러그인을 제공하게 되므로 이 방법은 더 이상 필요가 없게 되었습니다. 저도 더 이상 쓰지 않을 생각입니다.

  13. Favicon of http://blackheartman.tistory.com alohamania 2013.08.30 07:22 신고  댓글주소  수정/삭제  댓글쓰기

    남무님덕에 정말 잘 사용하고 있습니다.

  14. Favicon of http://blackheartman.tistory.com alohamania 2013.08.30 07:23 신고  댓글주소  수정/삭제  댓글쓰기

    남무님덕에 정말 잘 사용하고 있습니다. 정말 머라고 감사를 드려야 할지 모르겟네요. 제가 자바에대해서 아는게 전혀 없어서 이번에 구글 애드센스 반응형 광고에 적용하려고 하는데 자바를 어떻게 넣어야 할지를 몰라서 남무님께 지식좀 얻으려고 왔습니다. 코드를 넣으려고 하는데 코멘트가 차단이 되어서 코드를 넣지를 못하겠네요 ㅠ 부탁좀 드리겠씁니다.

  15. KDI어려움 2013.12.08 22:53 신고  댓글주소  수정/삭제  댓글쓰기

    js 파일 업로드해서 광고도 잘 나옵니다.
    하지만 저는 이미지 광고를 입력해서 광고 스크립트를 정확하게 입력했는데요. 광고는 [활성] 상태입니다.
    모바일 페이지로 가면 배너만 300-250 크기이고 "텍스트"광고만 배너에서 4/1정도 짤려서 나오네요. ㅠㅠ 왜그런지 굼굼하네요 ㅠ

  16. 해결 2013.12.08 23:56 신고  댓글주소  수정/삭제  댓글쓰기

    js 소스파일에 문제가 있네요. 앙래 주석파일로 광고 이름을 넣야되는데요
    저는 그냥 광고이름을 넣다보니. js에러가나면서 아래 js코드를 실행 못함

    광고가 정상적으로 안 나왔네요. ㅠㅠ 그냥 저 라인 부분을 삭제하거네
    아래 처럼 주석을 처리 해야 되나요.

    감사합니다.

    document.writeln('/* 광고 이름 */');

  17. 2014.01.24 23:41  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  18. Favicon of http://mizcashcard.tistory.com/99 윤병관 2014.02.10 02:13 신고  댓글주소  수정/삭제  댓글쓰기

    3시간 헤메다가...여쭤봅니다.
    http://mizcashcard.tistory.com/99
    ->직접입력해서 광고 표출해보았으나
    안되고...

    http://mizcashcard.tistory.com/99
    서식입력하여 광고 표출해보았으나 안되네요...뭐를 제가 잘못한것인지요...
    한번 봐주실수 있으신지요

  19. Favicon of http://nubiz.tistory.com 뭐하라 2014.04.05 22:25 신고  댓글주소  수정/삭제  댓글쓰기

    여기서 아이디어를 얻어 애드센스 크롤러 오류를 해결하게되었습니다. 감사합니다.
    http://nubiz.tistiry.com/415

  20. Favicon of http://ipad.pe.kr 장대군 2014.11.04 23:59 신고  댓글주소  수정/삭제  댓글쓰기

    글 잘봤습니다.
    죄송합니다만..

    <div style="[광고 상자에 적용할 스타일]">
    <script type="text/javascript" src="[확인한 주소]/skin/images/AdsenseM.js"></script></div>

    요건 어디에 삽입해야 하는지요?
    정확한 위치를 잘 모르겠습니다.

  21. 시싯 2014.12.11 05:42 신고  댓글주소  수정/삭제  댓글쓰기

    질문있습니다 애드센스말고 다른광고도가능하나요