텍스트큐브닷컴에서 스킨 수정을 정식으로 제공함으로써 본 포스팅은 유효하지 않게  되었습니다. (2009.04.25)

텍스트큐브(textcube.com)에 위젯을 이용하여 구글 애드센스(AdSense, 구글 광고) 설치하기

[IE 8, IE 7, FF 3, 크롬 1, Opera 9, safari 4(528.16)에서 테스트 완료됨]

 

[버전 관리]

  • 1.0 2009.02.23 최초 공개
  • 1.1 2009.02.23 성능 개선: 모든 엘리먼트를 탐색하며 배열화 시키는 로직에서 한개라도 원하는 대상이 수집되면 바로 리턴 되도록 개선
  • 1.2 2009.03.02 버그 수정: 방명록에서 발생하는 adsText 객체 null 스크립트 오류 수정
  • 1.3.1 2009.03.22 IE8 호환성 향상: IE8에서 overflow:auto;스타일이 IE7을 포함하여 다른 브라우저와 다르게 표현됨으로 인해 해당 속성 제거 및 보완을 위해 광고를 화면에 보이기 위해 사용했던 display = 'block'를 'table'으로 교체(IE버전에 따라 처리)

 

 

서비스형 블로그 텍스트큐브에서는 스킨 수정기능이 지원되지 않고 있습니다.
그래서 본문이든 제목이든 마음에 드는 곳 에 구글의 애드센스 코드를 html코드로 바로 삽입 할 수는 없습니다.

그나마 사이드바에 위젯기능을 이용하여 조그만 하게는 삽입이 가능하겠지만 위치상 클릭으로 이어지기에는
너무나 먼 당신이지요.


그래서 어쩔 수 없이 javascrip을 이용하기로 결심하고 2시간 뻘짓해서 코드를 만들어 보았습니다. 방법 자체는 심플합니다.
텍큐 위젯에 포스팅 화면을 구성하는 엘리먼트(div 등)를 일일이 검색하여 원하는 div의 위치를 찾아 광고를 삽입하는 자바스크립트 코드를 넣어 준다는 아주 원시적이고 비 효율적이며 망측한 방법 입니다.(어쩔 수 없이 방문자의 브라우저에 부하가 약간~ 걸리게 됩니다.)

 

 

각설하고 예제를 통하여 설명하겠습니다.

 

하단의 예제는 위와 같이 제목 아래에 큰 2개의 사각형 텍스트 광고와 본문의 하단에 한 줄짜리 링크 광고를 넣는다는 전제의 예제입니다.

 

 

1. 먼저 애드센스를 사용 하시려면 반드시 텍큐의 꾸미기에서 한 화면에 1개의 포스팅만 나오도록 설정을 변경하세요.(이유는 차후 설명)
  - 꾸미기/스킨설정/한 페이지당 보이는 글 개수를 한개로 조정

2. 자신의 애드센스 계정으로 로그인 하여 광고를 생성한다.

  - 애드센스 설정/광고 가져오기… 생략.

  - 그림과 같이 3가지 크기와 종류로 만든다.

 

3. 애드센스의 삽입용 코드를 가지고 온다.

 

4. 하단의 소스에 자신의 애드센스 단위 코드를 조합한다.

  - 소스를 다운 받고 메모장이나 아무 텍스트 에디터로 파일을 연다.

    소스

  - <!-- 이곳에 상단 좌측의 텍스트 광고 코드를 삽입합니다. --> 를 수정

  - <!-- 이곳에 상단 우측의 텍스트 광고 코드를 삽입합니다. --> 를 수정

  - <!-- 이곳에 하단의 링크 광고 코드를 삽입합니다. --> 를 수정

 

5. 조합된 코드를 블로그에 HTML 위젯으로 설정한다.

  - 꾸미기/위젯/ 위젯추가 버튼 클릭 / HTML 코드 위젯 선택

  - 새로 생성된 HTML 코드 위젯에 설정버튼 클릭/ 4.에서 만든 코드를 붙여넣고 확인 클릭

  - 저장된 HTML 코드 위젯을 사이드바 1 이나 사이드바 2로 옮긴다.(사이드바 2의 가장하단 추천)

  - 저장 버튼을 클릭하여 위젯의 배치를 저장한다.

 

6. 자신의 블로그에서 정상 작동 여부에 대하여 확인한다.

 

여기까지 잘 따라 하셨으면 wake가 사용하고 있는 레이아웃으로 광고가 삽입됩니다.
디자인 측면의 레이아웃 설명은 제외 시켰습니다. (너무 방대하고 이 포스팅의 포인트는 아닙니다.)

 

 

여기부터는 위의 소스코드에 대한 푸념(?) 혹은 팁입니다.

 

방법 자체가 화면의 모든 엘리먼트들이 로드가 된 후(애드센스광고 포함) 애드센스를 우리가 원하는 위치로 옮기는 방식입니다. 그러다 보니 삽입된 위치에서 주변의 텍스트를 감지하기에는 좀 어려운지 광고와 본문 내용과의 정확도는 약간 떨어지는 듯 합니다. 그렇지만 애드센스의 경우 브라우저 타이틀명(title 태그의 속성, 즉 포스팅 제목이 되겠죠.)이 애드센스의 광고내용에 가장 큰 영향을 미치게 됨으로 대부분 별 문제 없이 광고가 출력됩니다.
(텍큐에서 포스팅 제목을 클릭하거나 글 목록에서 제목을 클릭하여 글을 읽을 때에 브라우저 타이틀바의 명칭이 바뀝니다. )

 

이런 원시적이고 비 효율적인 코드가 나온 이유는 텍스트큐브의 포스팅 화면의 html에는 본문이나 제목의 div에 id값이 없습니다. (물론 id 속성의 값은 document 내에서 유일해야 한다라는 기본적인 룰이 있기 때문이겠지요.)
그래서 눈을 돌려 찾아보니 스킨을 위해 정의되어 있는 class name 속성이 보였습니다. 그 class name 속성을 활용 하기로 마음먹고 결국 어쩔 수 없이 모든 엘리먼트를 검색하며 최초의 각 class name의 속성이 admin과 entry-content를 찾아 그것들의 자식 노드로 애드센스 코드를 삽입하기에 이르렀다는 것 입니다.

여기에서  검색 대상의 class name 속성이 admin과 entry-content 가 된 이유는 제가 원하는 광고 삽입의 위치가 이들의 자식(서브)노드로 제일 마지막에 광고를 추가를 하고 싶었기 때문입니다. 광고를 삽입하기 원하는 위치에 따라 바뀔 수 있을 것입니다. 이런 Customizing을 원하신다면 소스에 달린 주석을 참고하시어 작업 하시면 큰 어려움 없이 작업 가능하시리라 봅니다.

 

1.에서 한 페이지당 보이는 글 갯수를 1으로 조정한 이유는 애드센스는 하나의 화면에 같은 광고를 2번 이상 삽입이 불가능 하기때문에 가장 처음의 admin과 entry-content에 대하여서만 광고를 삽입하게 하였습니다. 결국 한 화면에 포스팅이 2개 이상 보여질 경우 가장 상단에 표시되는 포스팅에만 광고가 삽입되고 그 하단에 위치한 포스팅 들에는 광고가 출력되지 않습니다.

 

푸념으로 좀더 크로스 브라우징에 대한 지식이 있었다면 몇 십분 정도면 나왔을 코드가 참 어렵게 만들어졌구나 하는 생각이 작업을 마치고 나서 문뜩 들었습니다. 개발자란 어쩔 수 없군요.. ^^; 아는 것과 개발시간은 반비례 ㅎㄷㄷ..;

 

 

신고
YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST
  1. BlogIcon COCO 2009.02.25 23:19 신고  댓글주소  수정/삭제  댓글쓰기

    저 역시 비슷한 방식으로 만들려고 마음먹고 혹시나 싶어 구글을 돌리니 이곳을 가리켜 왔습니다. 덕분에 삽질(?)의 시간이 많이 줄었네요. 도움 감사합니다.

  2. BlogIcon swamp 2009.03.02 12:42 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 글 감사합니다

  3. BlogIcon 난빨라 2009.03.03 01:06 신고  댓글주소  수정/삭제  댓글쓰기

    죄송한데 질문을 해도 되나요?

    - 꾸미기/위젯/ 위젯추가 버튼 클릭 / HTML 코드 위젯 선택

    여기서 위젯 추가 버튼이 어디에 있나요?....

    • BlogIcon wake 2009.03.03 01:43 신고  댓글주소  수정/삭제

      꾸미기/위젯/ 위젯 추가 버튼 클릭 하시면
      위젯을 고르는 창이 뜹니다. 거기에서
      HTML 코드 위젯위젯 쪽에 있는 선택 버튼을 누르시면
      창이 사라지고 위젯 추가 버튼을 눌렀던 화면에서
      가장 하단을 보시면 추가하신 HTML위젯이 나옵니다.

      거기에서 설정 버튼을 누르시면 HTML코드를 입력 하실 수 있는 창이 나옵니다.

      도움이 되셨을 까요 ^^;
      (자려다 들어와서 답글다는.. ㅎㅎ)

    • BlogIcon 난빨라 2009.03.03 22:46 신고  댓글주소  수정/삭제

      아닐수도 있지만.. 아니면 창피해요.. 버튼명이 '모듈 추가'라고 써있고 오페라에서 창을 열면 보이다가 창이 다 열리면 없어져버리는.. 어제 살짝 봤는데 이름을 못봤어요..

      우선 파폭이나 IE로 도전해봐야겠군요

      답글 감사합니다

    • BlogIcon 난빨라 2009.03.03 22:53 신고  댓글주소  수정/삭제

      IE에서도 없어지는군요.....

      IE에서 버튼이 없어지기 전에 언능 눌러봤더니..

      '모듈 추가' 버튼은 아닌 것 같습니다..

      제가 바보(?) 라서 이해를 못 하는거 같은데..

      이미지 가능하신지요..

    • BlogIcon wake 2009.03.04 00:17 신고  댓글주소  수정/삭제

      난빨라님의 블로그를 방문하여 보니 아마도
      설치형 텍스트큐브(http://www.textcube.org)를 사용하시고 계신것 같네요.

      본 예제는 서비스형 텍스트큐브(www.textcube.com)에서의 구글 애드센스 적용방법을 다루고 있습니다.

      난빨라님이 찾고 계시는 것은 하단의 주소로 방문하시어 플러그인을 설치하시면 될 듯 합니다.(더 쉽죠)
      http://www.textcube.org/plugin/search/애드센스
      혹은
      http://www.textcube.org/plugin/579

    • BlogIcon 난빨라 2009.03.05 00:36 신고  댓글주소  수정/삭제

      블로그로 온지 얼마 안되서요..

      텍스트큐브가 서비스형도 있군요!..

      답변 감사합니다!

    • BlogIcon wake 2009.03.05 09:57 신고  댓글주소  수정/삭제

      도움이 되셨다니 다행입니다. ^^

  4. BlogIcon 세르엘 2009.03.22 22:55 신고  댓글주소  수정/삭제  댓글쓰기

    애드스마트는 방법이 없나요?(헉)

    • BlogIcon wake 2009.03.22 23:42 신고  댓글주소  수정/삭제

      애드스마트 방법은 있어보이나..
      브라우저에 부하가 좀 더 걸릴 거 같네요.
      (물론 지금 상태도 좀 걸립니다만;;)

      사실 애드스마트를 처음 들어봤답니다;
      (수익률이 애드센스보다 좋은가요? ㅎㅎ)

  5. BlogIcon 청명 2009.03.31 15:55 신고  댓글주소  수정/삭제  댓글쓰기

    애드클릭스에 이 방법을 사용했습니다. ^^ 상단 광고를 하나로 합쳤는데 잘 되네요
    감사합니다

  6. BlogIcon 대도월풍 2009.04.08 21:10 신고  댓글주소  수정/삭제  댓글쓰기

    소스 고맙습니다.

    덕분에 애드센스 코드 추가를 편하게 했네요.^^

    좋은하루되세요~

  7. BlogIcon 청명 2009.04.11 21:34 신고  댓글주소  수정/삭제  댓글쓰기

    갑자기 교차 사이트 스크립팅 차단이라면서 애드클릭스가 안뜨네요. 애드클릭스 자체의 문제일까요? wake님의 애드센스는 잘 뜨는걸 보면 말이죠...

    근데 왜 하단의 에디터링크는 잘만 되는지 ;;;

    • BlogIcon wake 2009.04.12 01:19 신고  댓글주소  수정/삭제

      익스프롤러 쪽에서 뜬건가요? 흠;;
      경험을 해 보지 못한...
      자세한 정보(OS, 브라우저 버전)을 주시면 도움이 될 수도 있을 것 같네요 ^^

      (다만 지금으로써는 딱히 대안이 없습니다 ㅠㅠ)

  8. BlogIcon 청명 2009.04.12 14:11 신고  댓글주소  수정/삭제  댓글쓰기

    윈도우 7 에 IE 8 입니다. 애드클릭스의 js파일 두개를 차단하더군요. 애드클릭스 자체의 문제인것 같아요. 제가 보기엔 ;;;

    • BlogIcon wake 2009.04.12 15:19 신고  댓글주소  수정/삭제

      저도 그런느낌이 좀 듭니다.

      일단 테스트를 위해서는 제가 올린 스크립트가 아니라 그냥 텍큐의 HTML위젯으로 광고를 넣어 보시고 그래도 문제가 나는지 확인 하셔야 할 것 같습니다.

      교차스크립팅이 악의적으로 사용자의 정보를 빼가는 것을 말하는 듯 한데요.. 아마도 익스프롤러8의 XSS(교차스크립팅)필터에서 해당 함수가 있는 js를 막나 봅니다.
      음.. 윈도우 7 + IE8에서만 일어나는 문제일 수도 있으니
      가능하면 윈도우 XP나 비스타의 IE8에서도 확인이 되어야 할 것 같습니다.

  9. BlogIcon 지돌스타 2009.05.19 00:51 신고  댓글주소  수정/삭제  댓글쓰기

    다행히 지금은 잘된다는 ^^;;