Tistory 모바일 페이지에서 만 보이는 서식을 작성하려면??

 tistory에서 구글 애드센스 또는 별도의 공유 버튼 또는 이벤트를 모바일 페이지에만 달고 싶을 경우가 있을 겁니다. 그럴 경우에 어떻게 하면 보바일 페이지에만 보이게 할 수 있을까요?

 일단 저 같은 경우에는 본문 하단에 모바일페이지에서 제가 사용하는 공유버튼을 달기 위해서 한번 만들어 봤습니다. javascript 코드를 사용해서 만들었고, 코드 자체는 간단합니다. 일단 제가 원하는 결과물은 아래와 같습니다. 모바일 페이지일 때와 데스크탑 페이지 일때를 구분하여 보여주고 싶었기 때문입니다. 그리고 중복되는 내용이기도 합니다.

 모바일 페이지에서만 보이는 광고 또는 기타 내용을 보여주기 위해서는 tistory에서 제공하는 "HTML/CSS 편집" 메뉴에 해당 내용을 추가한다고해서 보여지지 않습니다. 모바일 페이지 자체에서 보여주기 위해서는 글을 쓰는 해당 글 내용 중간에 직접 해당 코드를 작성하시거나, 서식등에 등록 해두고 사용하셔야 합니다.

데스크탑 페이지(일반 PC에서 보는 페이지)

 일단 단순히 제가 필요한 코드를 아래와 같이 적용한 모습입니다.  아래와 같이 하단에 적용하였고, 모바일 페이지에서만 보여주고 싶지만 그냥 다 보이게 됩니다.

 역시 데스크탑 페이지입니다. 하지만 위에처럼 더이상 보여지지 않고 있습니다. 모바일 페이지에서만 보여주길 원했던 내용이기에 데스크탑페이지에서는 더이상 보여지지 않습니다. 광고 부분도 역시 포함입니다.

 그렇다면 모바일페이지에서 보여지는지 다시 확인을 해봐야겠죠? 아래와 같이 모바일 페이지에선 코드와 상관없이 모두 잘 보여지고 있습니다.

코드를 어떻게 적용해야 할까?

 모바일 페이지에서만 보여주기 위한 코드를 작성해야 합니다. 코드는 간단합니다. 약간의 javascript 문법만 알고 있으시면 쉽게 적용할 수 있습니다. 그전에 알아두셔야 할 내용이 있습니다. 모바일 페이지의 주소가 무엇일까를 살펴봐야합니다.

 모바일 페이지는 2차 도메인과 상관이 없고, 1차 도메인 만을 사용해서 설명을 하겠습니다. 일단 자신이 도메인을 따로 구입하지 않았다면 모두 1차 도메인에 해당됩니다.

 저의 경우 1차 도메인은 : http://sadcafek.tistory.com 입니다. 2차 도메인은 http://thdev.net 입니다.

 이제 이 도메인을 가지고 간단한 스크립트를 작성합니다. 아래와 같이 코드를 작성하시면 됩니다. 제가 /* 1차 도메인 주소 */  라고 작성해 놓은 곳이 있습니다. 해당 부분에는 자기 자신의 도메인 주소를 작성해 넣으시면 됩니다.

 아래와 같이 작성을 해주셔야 합니다.

주의점

 - if 문 뒤에는 모두 javascript 문으로 구성이 되어야 합니다. 그렇지 않을 경우 if 문과 상관 없이 if 문 다음 코드들은 실행이 됩니다.

 - document 안에서 " 표를 사용해야 하는 경우가 있을 겁니다. 힘드시겠지만 " -> ' 로 변경해주셔야 합니다.

 - html/css 인 페이지에서 적용한 중복 코드더라도 해당 페이지에서 사용하기 위해서는 모두 다시 불러와야 합니다.(하단의 제 코드를 보시면 이해하실지도..)

코드 살펴보기

 - location.host = 호스트 주소를 불러옵니다. 만약 http://thdev.net/111 이라고 하면 thdev.net 만 불러오게 됩니다.

 - location.pathname = http://thdev.net/111 에서 /111 만 불러오게 됩니다.

 - indexOf("/m/") 을 찾아서 몇 번째에 위치하는지 값을 넘겨줍니다. http://thdev.net/m/ 이라고 하면 /m/을 불러와서 /m/의 시작값을 넘겨줍니다.

 - document.write() 문서에 값을 쓰기 위해서 사용하는 코드입니다.

if(location.host == "/* 1차 도메인 주소 */" && location.pathname.indexOf("/m/") == 0) {
	//아래 부분에 필요한 코드들을 작성하시면 됩니다.
	document.write("여기에 html 코드를 넣으시거나, 텍스트를 넣으시면 됩니다.")

        //document.write() 에서 script 를 불러와야 할 경우 아래와 같은 방법을 사용하셔야 합니다.
       document.write("<script type='text/javascript' src='파일 이름.js'><"+"/script>");
}

 작성한 코드는 글쓰기에서 서식으로 등록을 해두시면 편리합니다. 서식으로 등록해 두시면 복사하거나 붙여넣으실 필요 없이 간단히 추가할 수 있습니다.

 저는 아래와 같이 Mobile add 라는 이름으로 서식을 등록 해두고 사용하고 있습니다.

 그리고 제가 사용한 코드의 전문입니다. 개인 정보가 포함되기에 해당 부분은 제거하고 올려드립니다. 그리고 저같은 경우 별도의 서버로 사용할 수 있는 부분이 있어서 서식에는 아래와 같은 코드를 추가해두었습니다. 언제든 파일만 변경해서 사용할 수 있도록 하기 위해서 입니다.

 서식에 적용한 코드 - 아래와 같이 적용한 이유는 간단합니다. 언제든 코드를 변경하기 쉽게 하기 위해서 아래와 같이 변경하였습니다. 지난번에는 그냥 모든 페이지 하단에 .js 파일에 있는 내용을 그대로 사용했었습니다. 수정이 한번 생기니.. 200개가 넘는 글에 모두 변경해야 하는 상황이 까다로웠습니다. 그래서 아래와 같은 스크립트 불러오는 코드를 작성해서 사용했습니다.

 - tistory에 스킨에 올려두면 되지 않을까 해서 올려봤습니다. 올릴때 마다 파일 이름이 변경되더군요. 그리고 ./images/m.js 이렇게 적용해도 되는지는 해보지 않았습니다.

<link rel="stylesheet" type="text/css" href="/mobileView.css">
<script type="text/javascript" src="/mobileView.js"></script>

 별도의 서버에 저장해둔 .js 파일

if(location.host == "sadcafek.tistory.com" && location.pathname.indexOf("/m/") == 0) {
	<!--
	google_ad_client = "  ";
	/* 모바일 광고 */
	google_ad_slot = "  ";
	google_ad_width = 320;
	google_ad_height = 50;
	//-->

	//ShareThis JS include
	document.write("<script type='text/javascript'>var switchTo5x=false;<"+"/script>");
	document.write("<script type='text/javascript' src='http://w.sharethis.com/button/buttons.js'><"+"/script>");
	document.write("<script type='text/javascript'>stLight.options({publisher: '  '});<"+"/script>");
	//ShareThis JS include End

	//ShareThis Button BEGIN
	document.write("<div class='share_this'>")
	document.write("<span class='st_googleplus_large' displayText='Google +'></span>")
	document.write("<span class='st_facebook_large' displayText='Facebook'></span>")
	document.write("<span class='st_twitter_large' displayText='Tweet'></span>")
	document.write("<span class='st_email_large' displayText='Email'></span>")
	document.write("<span class='st_sharethis_large' displayText='ShareThis'></span>")
	document.write("</div>")

	//Google Adsense
	document.write("<div class='center'>")
	document.write("<script type='text/javascript' src='http://pagead2.googlesyndication.com/pagead/show_ads.js'><"+"/script>");
	document.write("</div>")
}