본문 바로가기

블로깅

미투 버튼과 애드디스 버튼을 나란히 정렬하기

시험 전에 책상 정리만 열심히 하는 아딸라가 다시 왔습니다 - ;

공부하려고 하면 여기 저기 지저분한 데가 눈에 띄고 꽃도 꽂고 싶고 메모지도 예쁜 걸로 바꾸고 싶어하는 여학생이 바로 공부못하는 학생 - 포스팅만 하려고 하면 여기저기 눈에 걸기적거리는 데가 보여 계속 만지고 또 만지고...흑...ㅜㅠ 별로 바람직한 블로거가 아닙니다만, 그래도 힘들여 하나 팠는데 공유하려고 하는 착한 블로거가 저 -

자... 지금 이 블로그 하단을 한번 봐 주시기 바랍니다. 맘이 바뀌어 다시 삭제해버릴 지도 모르므로 캡쳐 본을 하나 올려 두지요.

 

 

애드 디스 버튼입니다. 주황색  +Share 버튼이 안 보인다구요? 예, 제가 소스에서 지워서 그렇습니다. 한 두개 지울 수도, 몇 개 다른 걸로 넣을 수도 있습니다. 제일 왼쪽편의 페이스북 버튼은 보내기 버튼입니다. 자기 페이스북 계정에 담벼락에 붙일 수있는 게 '보내기'라는 거죠. 그리고 그 옆 메일모양 옆에 있는 것이 제가 전에 소개해 드렸던 졸리프린트입니다.  애드디스 사이트를 둘러 보니까 설정을 마음대로 할 수가 있더라고요.

그런데 제가 이 애드디스를 붙였다가 떼었다가 하는 이유는 이 애드디스 버튼이 익스플로러 구버전에서는 사라진다는 이유때문입니다. 버전 8 이하에서는 안 보입니다. 애드디스 홈페이지 설명으로는 6 이하에서 안 보인다고 하던데 8 이하에서 위에 믹시바나 뷰바나 뭐든지간에 상단바가 하나 걸쳐져서 들어오면 애드디스 버튼이 안 보입니다. 그 칸이 휑하니 한 줄 여백으로 나오는 것이 아니라 원래부터 그 버튼들이 없었던 것처럼 그 자리 자체가 없어져 있습니다.

그래서 수동으로 하나씩 버튼을 설정했다가 다시 애드디스버튼을 붙였다가 하고 있습니다. 졸리 프린트랑 메일 보내기등 깜찍한 기능들이 눈에 삼삼해서요.

오늘은 또 어떤 장난질을 쳤냐 하면요 - 티스토리나 다음블로그에 있는 "SNS 보내기 설정 버튼' 요 - 그거를 없애지 못하는 이유가 미투 보내기랑 페이스북 보내기 기능때문이었거든요. 좋아요 버튼은 좋아요만 되지 보내기가 안되니까요. 그리고 다음 쪽과 네이버 쪽을 연결시켜 주는 게 저 미투 버튼이잖습니까?

SNS 보내기 버튼SNS 보내기 버튼

만약 미투 버튼이랑 페이스북 보내기 버튼만 추가될 수 있다면 저 SNS 보내기 플러그인은 굳이 쓸 필요가 없다는 거죠 -

많은 분들이 뷰 박스 위에다가 추천과 구독 유도글을 적기도 하는데 아무래도 그런 글과 뷰 추천 박스가 조금 멀리 떨어지다 보면 추천 버튼에 대한 집중도도 떨어지게 마련이구요. - 나름 머리굴리고 있는 중 ;; -

그래서 오늘은 두 가지 작업을 해 보겠습니다.

먼저 미투 버튼을 만들고 -
두번째 이것을 마치 애드디스와 원래부터 하나였던 마냥 예쁘게 한 줄로 줄을 세워 보는 작업이 되겠습니다.

먼저 미투 버튼부터 소스를 구해야죠 -


 


미투 버튼 설치하기

 

http://me2day.net/  여기 가셔서요 -

1. 미투데이 로그인 - 화면 상단 바 눌러서 환경 설정 선택(혹은 미투플러그인) - 환경 설정 항목들 중 맨 아래의 소셜 플러그인 을 선택 - 소셜 플러그인 활성화 - 사용하고자 하는 도메인 입력 (http://atala.tistory.com 처럼 풀 도메인을 적어줍니다) - 그 다음 코드를 받으러 갑니다. 바로 가기가  아래, 클릭 -

미투버튼 플러그인 설치하기미투버튼 플러그인 설치하기

 

플러그인 설치하기 누릅니다.

 

미투버튼 코드받기미투버튼 코드받기

 

제대로 플러그인을 설치했다면 다음이 나올 것입니다.

 

 

로그인하지 않고 플러그인설치가 안되었다면 더보기 안의 화면을 볼 것입니다. 위에서 웹페이지 URL은 위처럼 http:// 를 포함한 전체 주소를 다 적어 줍니다. 일단 복사해서 메모장에 넣어 두세요.

 

이걸로 끝난 게 아니라 <head> 안에다가 다른 소스 두개를 더 넣어야 됩니다. 메타 소스와 스크립트 소스, 2개입니다.

위 소스를 보여주는 화면 아래 쪽으로 내려가 보면 다음이 보입니다.


이게 메타소스입니다. 옵션입니다. 안하셔도 됩니다.  위의 메타소스 아래 내려가보면 아래와 같은 스크립트 소스 부분이 보입니다. 이 두개를 붙여야 하는데요, 스크립트 소스 먼저 붙이고 그 아래 메타소스를 붙입니다. 어디다 붙이냐면요, <head> 다음에 붙입니다.




1) script 소스는 긁어 복사한 뒤에 head 뒤에다가 붙입니다. 2) 미투 메타데이터 코드 위에 붙여야 됩니다.


메타소스 수정하는 법 :  content 안에는 제 블로그의 메세지^ ^;; 가 있구요, 그 아래에는 태그로 쓸만한 것을 쉼표로 연결해서. 안 쓰고 공란으로 둬도 되요. 그리고 그 아래에는 블로그에다가 대문 사진올려두든지 아니면 프로필 사진있으면 그것 주소를 저렇게 붙여 넣으면 됩니다.


 위의 두 개를 붙인 다음 미투버튼을 붙여야죠. 앞서 메모장에 복사해 두었던 미투버튼 플러그인 소스를 붙이고 싶은 부분에 넣습니다. 본문 위에 두거나 본문 아래에 두거나 -

일단 위 스크립트 소스만 먼저 붙여 두시고요,  메모장의 미투 소스는 잠깐 놔 두세요. 애드디스와 나란히 붙일 거니까요.
 

애드디스 버튼 설치하는 방법은 여기 있습니다. ->    SNS 공유 통합버튼 AddThis 를 쓰면 뭐가 좋나요?



 

미투 버튼과 애드디스 나란히 두기



테이블을 짜서 두 개를 둘 겁니다. 두 개 나란한 테이블을 짠 뒤 애드디스는 오른쪽으로 정렬하고 미투버튼은 왼쪽으로 붙일 거에요 

 <table width="본문폭" border="0">
<tbody><tr>
<td align="right">

애드디스버튼들
</td>
<td align="left"> 

미투버튼
 </td>
</tr>
</tbody></table>

애드디스버튼들 위의 right는 오른쪽으로 본문내용을 붙이는 거고 미투버튼 위의 left는 왼쪽으로 붙인다는 뜻이지요. 어떤 식인지 테두리 border를 1로 하고 보여드리겠습니다.

 
애드디스 버튼   미투 버튼 

위의 미투버튼 자리에는 아까 메모장에 붙여 두었던 그 버튼 소스를 넣을 거예요.  애드디스 버튼 소스를 살펴 봅시다.
 

 <!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style" style="float:right; margin-right:9px">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_email"> </a>
<a class="addthis_button_joliprint"> </a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f4af8b0473cd657"></script>
<!-- AddThis Button END -->

제가 임의로 바꾼 부분들이 굵은 글자로 되어 있습니다. 페이스북보내기버튼 추가했구요, 졸리프린트 버튼을 추가했습니다. 메일버튼도 넣었어요.

그리고 맨 첫줄의 소스요. 원래 애드디스 버튼 홈페이지의 소스는 첫 줄이 다음입니다.

<div class="addthis_toolbox addthis_default_style ">

이건데 제가 뒤에 style="float:right; margin-right:9px" 를 붙였습니다.  div 안에서도 다시 오른쪽으로 붙으라고 float:right 를 붙였구요, margin-right:9px 는 그 옆의 미투버튼과 딱 달라붙지 말라고 살짝 띄운 것입니다. (구글 추천이 하나도 없을 때는 붙어 보이지 않으나, 버튼 안에 숫자가 생기기 시작하면 달라붙습니다.)

그리고 테이블 소스의 맨 첫 줄 '본문폭'을 봐 주세요. 제 블로그 본문폭은 800 입니다. 여기서 800 으로 기입해 넣으면 버튼들이 약간 오른쪽으로 치우치게 되구요. 숫자가 작아질수록 조금씩 왼쪽으로 움직입니다. 현재 위치는 730으로 셋팅해 둔 상태입니다. 미리보기 보시면서 조금씩 조정하시면 됩니다.

전체 본문폭 안에서 유동적으로 움직일 수 있게 되어 있는 거라서 혹 트윗이 만단위가 넘어가고 (헉 ;;) 좋아요가 수만단위의 숫자가 되어서 가로폭이 넓어진다고 하더라도 테이블이 깨질 위험은 없습니다. 괜한 걱정 미리 한다구요?ㅎㅎ

제 소스 한번 보여드리고 첨부 파일로도 올려 드립니다.
 

 
<br></br><!- 믹시박스와 간격을 두기 위한 줄바꿈-->

<table width="730" border="0">
<tr>
<td align="right">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" style="float:right; margin-right:9px">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_email"> </a>
<a class="addthis_button_joliprint"> </a>
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> <!--이 다음의 쉐어버튼줄은 삭제했음-->
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f4af8b0473cd657"></script>
<!-- AddThis Button END -->
</td>
<td align="left">
<!--미투버튼-->
<me2:metoo profile_images="off" color="dark" layout="small" pingback="unchecked" href="http://atala.tistory.com" plugin_key="z-KQTTasTveAvpQncAWDAA"></me2:metoo>
 </td>
</tr>
</table>

 

사실 제가 div 에 관해 잘 모릅니다. 혼자서 이리 저리 만지다가 괜찮은 결과물이 나온 거라 이것보다 더 좋은 방법이 있을 수도 있어요. ^ ^;;



부록으로 세 개 소스를 더 공개합니다.

 

■ 본문 최 상단, 뷰 애드 옆에 애드디스 버튼을 둘 때의 소스

 

뷰 애드 소스 맨 윗줄을 다음으로 교체합니다.

<div style="width:528px;height:60px;margin: 0 0 0 +3px;float:left">

width 조정하시구요, height가 높아질수록 본문과의 간격이 더 띄워집니다.

 

■ 미투 버튼 없이 애드디스 버튼만 가운데 아닌 어느 부분에 두고 싶을 때

카테고리 박스 위에 두고 싶을 때 이걸 씁니다. 광고 상자 위에 두다 보면 아무래도 헛클릭질이 생길 것이고 단정해 보이지 않으니 약간 오른쪽으로 옮기는 게 좋거든요. 이것도 소스 맨 첫 줄만 다음으로 바꿉니다.

<div class="addthis_toolbox addthis_default_style" style="width:300px; margin-left:260px">

왼쪽에서 띄우기하는 방식으로 원하는 위치에 둡니다. 260보다 커지면 왼쪽에서 더 띄워지겠지요. width는 버튼들이 들어갈 전체 폭인데 너무 좁아지면 버튼들이 세로로 겹쳐져 버립니다. 너무 넓으면 본문 폭에 꽉 차서 버튼 상자(div)가 움직일 여분 공간이 없으니 미리보기 보시면서 잘 조절하셔야합니다.


미투 버튼 없이 딱 정중앙에 두고 싶을 때

뷰 추천박스와 믹스 박스 사이에 둔다든지, 아님 추천 박스 아래 두고 그 다음 줄과 두 세 줄 이상 떨어지게 둬서 가운데에 두는 게 낫겠다 싶을 때가 있을 겁니다.

역시 첫 줄을 바꿉니다.

<div class="addthis_toolbox  addthis_default_style" style="width:200px; margin:0 auto">

위의 모든 소스들을 첨부파일로도 올려 드립니다.

애드디스버튼정렬하는몇가지방법.txt

 

이걸 뷰로 올려야 되나 마나 좀 고민을 했는데요 ;; 저로서는 송고해봐야 별 재미가 없지만 ( 재미없는 글이잖아요. ㅎ) 송고해두면 혹 필요하셨던 분들 찾아 보는 데 도움될까 하고 올려 봅니다. -  ^ ^;; 추천버튼이 옆에 붙어 있는 글은 뒤로 잘 안 빠진다고 하더라고요. 추천도 많이 해 주시면 더 눈에 잘 띌 수도 있어요 - ㅎ