티스토리는 다음에서 태터툴즈를 발전시켜 독립 서비스로 제공하고 있는 블로그 서비스입니다. 태터툴즈의 각종 플러그인과 위젯, 그리고 다음 서비스와의 연동으로 각광 받는 블로그 서비스 중 하나입니다. 스킨의 자유로운 편집은 다음, 네이버 등 포탈 내에 있는 블로그 서비스와 다른 티스토리만의 강점입니다.
그러나, 다음 티스토리는 모바일 모드를 오픈하면서 그런 티스토라만의 장점이라 할 수 있는 스킨 수정 기능을 제공하지 않고 있습니다. 모바일 장치의 호환성을 위해서라지만, 각 블로그의 특성을 고려하지 않고 광고를 넣는 블로거를 막는 방식이라 할 수 있습니다. 그래서 많은 이들이 블로그 본문에 광고 코드를 삽입하여 티스토리 모바일에서도 광고를 표시하도록 하고 있습니다.
티스토리에 모바일 광고를 넣는 방법을 찾아보다
구글에서도 티스토리에 모바일 광고 게재를 알려주고 있습니다. 그러나, 이 방식은 데스크탑으로 접속했을 때의 광고를 특정 형태로 강제하고 이렇게 수정하지 않은 글에서는 광고가 나오지 않는 문제점이 있습니다. 그래서 찾아보았더니 다른 방식이 있었습니다. 데스크탑으로 접속했을 때는 모바일 광고가 보이지 않도록 하는 것이죠. 이렇게 하면 데스크탑과 모바일의 광고 배치가 서로 영향을 받지 않는 장점이 있습니다.
일종에 꼼수(?)를 사용하여 티스토리 모바일 페이지에 광고 집어넣기! / Previrtu
이 방식은 모바일 광고를 넣기 위해서 각 본문에 광고 스크립트를 넣는 것은 동일합니다. 그것을 div의 class를 이용하여 CSS3의 display: none을 이용하는 방식입니다. 그래서 “바로 이거다!” 싶어 이것을 제 블로그에 적용하였습니다. 그런데 문제가 있었습니다.
구글 애드센스는 하나의 페이지에 컨텐츠 광고를 3개까지 넣을 수 있도록 하고 있습니다. 만약 3개를 초과할 경우 그 광고는 표시되지 않습니다. 그런데 이렇게 본문에 몇 개의 광고를 넣고 단지 CSS를 통해 보이지 않도록 하더라도 해당 코드는 남아있게 됩니다. 그러므로 본문 이후에 출력되는 광고가 나오지 않는 것입니다. 제 블로그의 경우에는 본문 다음에 이어지는 하단 광고와 우측 막대 영역의 광고가 표시되지 않는 것입니다. 근본적인 코드의 문제에 닥친 것입니다.
HTML 코드를 바꾸어 문제를 해결하다
그래서 저는 자바스크립트의 InnerHTML을 이용하여 티스토리 모바일에 광고를 넣는 방식을 생각해 보았습니다. 자바스크립트의 InnerHTML은 객체 ID를 얻어 그 해당 아이디 내부의 내용을 다른 HTML로 바꾸어 주는 것입니다. 설명은 넘어가고 해당 방식을 안내해 드리죠.
1. 광고 코드 추출
적절한 광고 코드를 추출합니다. 300x250 또는 250x250의 사각형 배너 또는 320x50의 긴 배너가 아니면 모바일에서는 추천하지 않습니다.
2. 광고 코드를 넣을 DIV 준비하기
저는 300x250의 광고를 넣기로 준비하여서 위와 같은 코드를 준비하였습니다. 넓이가 다른 것을 사용하시는 분들은 width: 뒤의 숫자를 바꾸시고 1개를 넘는 광고를 사용하실 분은 필요한 만큼 숫자를 늘려서 준비하시기 바랍니다.
3. 글에 광고 코드 넣기
모든 글에서 HTML을 누르고 같이 코드를 하나 하나 저장합니다. 우선 새로 발행되는 글을 중심으로 하셔도 됩니다.
4. 스킨의 HTML에 코드 추가
HTML/CSS 편집으로 들어가서 HTML 부분에 다음을 추가 합니다.
위 스크립트를 추가할 위치는 HTML의 본문이 시작하는 <body> 다음과 끝나는 </body> 바로 앞에 추가하시면 됩니다. 또한 추가하는 광고가 많으면 그 만큼 document.getElementByID(“AdsenseMn”).innerHTML = ''을 추가하시기 바랍니다. 이 방식으로 데스크탑에서는 모바일 광고 코드를 지워버리도록 하고 모바일에서만 광고 코드가 출력되게 합니다.
실제 적용된 모습은 위와 같습니다. 반대로 데스크탑에서는 광고가 표시되지 않습니다.
InnerHTML을 이용한 방식의 장점, 단점
이와 같은 방식으로 했을 경우 나중에 티스토리가 모바일 스킨을 제공하게 되더라도 거기에도 InnerHTML 코드를 그대로 삽입하여 광고를 표시되지 않도록 하기만 하면 기존 글의 광고 코드를 무조건 삭제할 필요가 없다는 장점이 있습니다.
다만, 역시 문제는 기존 글의 본문에 광고 코드를 넣어야 한다는 단점은 해결되지 않습니다. 이 문제는 누군가 프로그램으로 BlogAPI를 써서 본문의 내용을 모두 추가해주는 기능을 제공해주지 않는다면 해결되지 않습니다. 이 점은 제가 불가능한 점이라 다른 분들이 추가하여 주신다면, 참 좋을 거 같습니다.
※ 브라우저 별 호환성 문제가 있습니다. 브라우저 별로 InnerHTML의 해석이 다릅니다. 그래서 새로운 방법입니다. 자바스크립트로 티스토리 모바일에 광고 넣기를 이용하여 적용하는 것이 좋습니다.
'IT네트워크 > 블로그' 카테고리의 다른 글
| 자바스크립트로 티스토리 모바일에 광고 넣기 (63) | 2013.01.08 |
|---|---|
| 티스토리 모바일에 스타일을 적용하여 꾸며보자 (5) | 2013.01.08 |
| 이글루스, 6년의 세월을 지나 SK 품에서 독립 (0) | 2012.12.28 |
| view 블로그 주소 이전? 태터툴즈 주소 이전일 뿐 (3) | 2010.05.16 |
| 태터데스크와 티에디션, 무엇이 더 좋을까? (0) | 2010.05.16 |
