본문 바로가기
Blog Tip/Design

떠다니는 다음 뷰 / RSS구독버튼 달기(플로팅 배너)

by 카쿠覺 2013. 1. 23.

 

다른 블로그를 둘러보면 좌측이나 우측에 뷰 온 버튼과 함께 RSS 구독 등 여러 버튼이 스크롤과 함께 떠있는 경우를 많이 살펴볼 수 있습니다. 개인적으로는 포스트를 읽어보지도 않은 방문객에게 뷰 버튼을 누르게끔 강요하고 글의 내용에 집중하지 못하게끔 한다고 생각해서 블로그에 다른것을 꺼려하고 있었습니다. 물론 그 밖의 다른 기술적인 이슈도 있긴 있었습니다. - 포스트 하단 정리를 하기 위해 작업하던 도중 다음 뷰온 버튼이 정상적으로 작동하지 않아 이것저것 확인하던 도중에 문제점이 있는것을 발견해서 플로팅 배너 역시 작업하려고 생각하지 않았습니다. 이 내용은 아래에서 다시 설명드리겠습니다.

 

하지만 크기를 작게 하고 본문에 연관없게끔 플로팅 배너를 달아 놓으면 방문객에 쉽게 구독할 수 있게끔 편의를 제공하면서도 내용을 읽은데에 지장이 없겠다 싶어서 시간을 내어 하나 만들어 달아봤습니다. 내용을 읽는데에 큰 방해가 되지 않도록 우측에 배치했고, 아이콘도 내용을 전달할 수 있는 수준의 작은 형태로 만들어 넣었습니다.

 

저 같은 경우는 그랬지만, 사실 하나라도 더 뷰온을 받고, 한 명의 구독자라도 더 늘어나는 것이 모든 블로거들이 바라는 것이 아닐까 합니다. 전적으로 그런 효과를 위해서 플로팅 배너를 달고자 하신다면 우측이 아닌 좌측에 다는것이 더 효과적일것입니다. 사람들은 대부분 왼쪽에서 오른쪽으로 글을 읽기 때문에, 좌측에 배치해놓는다면 한번쯤은 분명 쳐다볼 수 밖에 없을테니까요.

 

오늘은 이런 플로팅 배너를 다는 방법에 대해서 알아보겠습니다. 바쁘시거나, 결과만 알고 싶으신 분들은 노란색으로 처리해놓은 부분만 보시면 됩니다.

 

삽입하고자 하는 아이콘 준비

 

 

플로팅 배너를 다는 목적은 1. 뷰온 버튼을 눈에 띄는 곳에 배치함으로써 더 높은 뷰온을 받기 위함일 수 있고 2. 방문객들이 다른 소셜서비스로 글을 내보내도록 하기 위해서 3. 블로그를 구독하게끔 유도하기 위해서라고 할 수 있습니다. 그렇다면 우리가 준비해야 할 아이콘들은 뷰온 버튼과, 페이스북이나 트위터로 글을 보낼 수 있게끔 하는 소셜플러그인, 그리고 한RSS와 같은 서비스라고 할 수 있습니다.

 

(해당 본문에서는 페이스북 좋아요 버튼이나 트위터의 리트윗 버튼에 대해서는 언급하지 않겠습니다. 해당 내용은 추후에 포스팅 하도록 하겠고, 이번 글에서는 다음 뷰 버튼과 다음 뷰 구독 버튼, 한RSS 구독 버튼, 그리고 네이버 이웃커넥트 추가 버튼에 대해서 다루겠습니다.)

 

모든 구독시스템은 구독이 가능한 URL로 이동함으로써 이뤄지며, 다음 뷰온은 뷰온을 높일 수 있는 위젯을 임베디드 하는 방식입니다. 때문에 구독하는 곳(다음 뷰, 한RSS, 네이버)은 블로거가 아이콘을 자유롭게 만들어 적용할 수 있으나 다음 뷰온의 경우에는 정해진 방식만 사용해야 합니다. 총 4가지의 위젯 형태를 지원하는데, 그 중 플로팅 배너에 많이 사용되는 뷰온 버튼은 버튼형, 작은 버튼형입니다.

 

개인적으로 만들어서 사용하고자 하시는 분은 직접 만드셔도 되고, 다른 웹사이트에 올라와 있는 것을 사용하셔도 좋습니다. 아이콘의 품질은 떨어지지만 제가 만들어서 사용하고 있는 아이콘을 첨부파일로 추가하겠으니 사용하실 분은 사용하셔도 좋습니다.icon.zip

 

아이콘을 사용할 수 있게 준비하기

 

 

DAUM View On

<embed src='http://api.v.daum.net/static/recombox4.swf?nurl=[BLOGURL]/[ ##_article_rep_id_## ]' quality="high" bgcolor="#ffffff" type="application/x-shockwave-flash"></embed>

 

DAUM View 구독

<a href='http://v.daum.net/user/plus?blogurl=[BLOGURL]' target='_new'><img src='[IMGURL]'></a>

 

한RSS 구독

<a href="http://www.hanrss.com/add_sub.qst?url=[BLOGURL]" title="한RSS에 추가" target='_new'><img src="[IMGURL]" border="0" /></a>

 

네이버 이웃커넥트

<a href=http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=[사용자코드] target="_blank"><img src="[IMGURL]" border="0" alt="이웃추가"></a>

 

떠다니는 다음 뷰 RSS구독버튼 달기(플로팅 배너).txt

 

* recombox3.swf는 버튼형, recombox4.swf는 작은버튼형 입니다.

* BLOGURL에는 블로그 주소를 적어주세요( ex ) http://kakku.tistory.com )

* IMGURL에는 업로드한 이미지의 주소를 적어주세요 ( ex ) ./images/8221naver.png )

* 사용자코드를 받기 위해서는, 이웃커넥트 관리화면 > 위젯 관리 > 위젯 관리 하단의 '심플 위젯 코드 복사'를 선택하신 후 blogId뒤로 오는 곳을 복사하여 넣으시면 됩니다.

 

플로팅 레이어 띄우기

 

아이콘을 준비하셨으니 이제는 해당 아이콘들이 들어갈 플로팅 레이어를 본문내에 삽입해야 합니다. 다른 블로그에서도 플로팅 레이어에 대해서 많이들 다루고 있으나, 제가 찾아서 직접 이용해본 것들의 경우에는 해상도가 변할 경우 플로팅 레이어의 위치가 이동하는 경향이 있었습니다. (부모 레이어에 아들 레이어를 넣는 것도, 사용자의 해상도 값을 받아 조정하는 경우도 같았습니다.)

 

물론 블로그 레이아웃이 좌측정렬이나 우측정렬로 되어 있는 경우에는 크게 상관이 없습니다. 절대 위치를 지정해 준다면 해상도가 변해도 어차피 그 위치에만 출력될테니 말입니다. 다만 해상도에 따라서 유동적으로 블로그 레이아웃의 위치가 변하는 중앙정렬의 경우에는 다소 차이가 있습니다. 이쪽 방면의 전문가가 아니다 보니 고민을 했는데, 부모 레이어의 크기를 블로그의 레이아웃보다 약간 크게 주고 그 안의 내용들을 우측정렬 하면 되지 않을까, 해서 적용해 봤더니 해상도가 변해도 위치가 그대로 유지되었습니다.

 

 

<div style="width:592px;height:0px; position:fixed; relative; left:50%;">
<div id="float" style="text-align:right;margin-top:275px">

 

(플로팅 레이어 내부)


</div>
</div>

 

떠다니는 다음 뷰 RSS구독버튼 달기(플로팅 배너).txt

 

좌측에 아이콘을 추가하고자 할 때에는 left를 right로, right를 left로 변경해주시면 됩니다.

(position:left->right, text-align:right->left)

* margin-top에는 레이어가 상단에서 얼마나 이격할 것인지를 적어주세요.

* width에는 화면 레이아웃의 절반 값 + 레이아웃과 플로팅 레이어와의 간격 + 플로팅 레이어의 넓이를 적어주시면 됩니다.

* 레이어 내부의 내용을 좌우측 정렬, 또는 가운데 정렬을 하시려면 테이블을 만들어서 내용물을 담아놓고 내부에서 정렬해주시면 됩니다. 이 때 테이블의 너비를 지정해주셔야 합니다.

 

결과물 예시, 그리고 추가하기

 

 

<div style="width:592px;height:0px; position:fixed; relative; left:50%;">
<div id="STATICMENU" style="text-align:right;margin-top:275px">


<embed src='http://api.v.daum.net/static/recombox4.swf?nurl=http://kakku.tistory.com/[ ##_article_rep_id_## ]' quality="high" bgcolor="#ffffff" width="83" height="21" type="application/x-shockwave-flash"></embed><br>

 

<a href='http://v.daum.net/user/plus?blogurl=http://kakku.tistory.com' target='_new'><img src='http://cfs.tistory.com/custom/blog/22/221632/skin/images/8221view.png?=17602897950.725495256522315' width="82"></a><br>


<a href="http://www.hanrss.com/add_sub.qst?url=http%3A%2F%2Fkakku.tistory.com" title="한RSS에 추가" target='_new'><img src="http://cfs.tistory.com/custom/blog/22/221632/skin/images/8221hanrss.png?=18631271370.34255623352439607" border="0" /></a><br>


<a href="http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?blogId=redherring_t&widgetSeq=1118497&sender=code" target="_blank"><img src="http://cfs.tistory.com/custom/blog/22/221632/skin/images/8221naver.png?=14284711660.9679731515891269" border="0" alt="이웃추가"></a>

</div>

</div>

 

떠다니는 다음 뷰 RSS구독버튼 달기(플로팅 배너).txt

* 현재 실제로 본 블로그에서 사용중인 소스입니다.

 

합쳐진 소스를 티스토리 관리자 페이지 > HTML/CSS편집으로 들어가 skin.html에서 '[ ##_article_rep_desc_## ]'를 찾아 그 위에 넣어주시면 됩니다. 본문 위가 아닌 그 외의 다른 곳에 삽입할 경우 [ ##_article_rep_id_## ] 치환자가 해당 포스트의 정확한 주소를 가져오지 못해서 뷰온 버튼이 작동하지 않을 수 있습니다.

 

다음 뷰에서 일시적인 시스템 장애가 발생할 경우

 

 

1. 현재 블로그 포스트를 제목으로 발행하고 계실 경우 문제가 발생할 수 있습니다. 영문으로 된 짧은 주소로 변경하여 발행하는 경우에 정상작동 하는지 그 여부는 확인하지 못했습니다만, 긴 제목을 가진 한글 주소로 글을 발행하게 될 경우 뷰온 버튼이 정상적으로 작동하지 않을 수 있습니다. 이 경우에는 숫자로 글을 발행해주시면 됩니다. 블로그 초기값이 숫자 발행이므로 헤메실 일은 없으실겁니다. (이미 한글URL로 발행되어 정상적으로 작동하지 않을 경우에 대해 다음측에 문의해봤으나 재발행 하는 방법밖에 없다고 하네요.)

 

2. 스킨마다 다르긴 합니다만 앞서 언급했듯이 본문 내용이 포함되어 있는 레이어 밖에 다음 뷰온 버튼을 추가할 경우 정상 작동하지 않을 수 있습니다. ( 포스트 주소를 가져오는 치환자가 정상작동하지 않기 때문입니다)

3. 글 발행시에 카테고리를 정확히 설정하지 않은 경우에 문제가 발생할 수 있습니다.

 

(추가) 레이어 내부 내용 정렬방법

 

<TABLE style="BORDER-COLLAPSE: collapse" width="84px" align=right>
<TBODY>
<TR>
<TD align=center>

(내용)

</TD>
</TR>
</TBODY>
</TABLE>

 

 

테이블소스.txt


* 레이어 내부에 오게되는 내용의 정렬을 위해서 테이블을 이용합니다.
* 테이블 크기를 '꼭' 지정해주셔야 됩니다. 내용의 크기만큼만 지정하면 됩니다. (width='크기')
* 플로팅 배너가 왼쪽에 뜬다면 table아래의 align을 left로, 우측이면 align을 right로 주세요.
* td아래의 align이 내용물의 정렬 방식입니다. 가운데정렬을 하시려면 center로 하시면 됩니다.

 

좀 더 쉽게 설명드려야 하는데 장황하게 설명드린것 같아 죄송합니다. 궁금하신 점은 댓글로 남겨주세요.

반응형

댓글