본문 바로가기

IT네트워크/블로그

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

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

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;"를 넣으면 맞습니다.