티스토리의 소셜웹 반응글! 자바스크립트로 꾸며본다

티스토리에는 트위터 등 SNS에 링크 또는 리트윗 된 경우를 소셜웹 반응글로 보여주고 있습니다. 하단에 5개의 소셜 웹 반응글이 보이고, 더 보거나 접을 수 있어서 SNS에서의 블로그 글의 반향을 볼 수 있는 좋은 플러그인입니다. 플러그인을 통해 활성화하면 하단에 표시되고, 검정/회색/파랑/빨강으로 색상을 선택할 수 있습니다. 그러나 스타일을 적용할 수 있는 방법은 없습니다.

왜 소셜웹 반응글에 스타일을 적용할 수 없는가?

소셜웹 반응글은 div 태그에 id가 적용되어 있지만, 이 id가 글마다 다릅니다. <div id="container_socialPost[특정 숫자]" …></div>로 각 글마다 id가 다르기 때문에 그걸 지정해서 스타일을 넣을 수가 없는 것입니다. 티스토리에서 제공하는 플러그인은 특성이 괜찮지만 이렇게 자신이 원하는 대로 커스터마이징 할 수 없는 문제가 있습니다. 이 소셜웹 반응글 역시 마찬가지입니다.

제 블로그의 경우에도 다른 CSS와 충돌하여 정상적으로 표시되지 않는 문제가 있습니다. 그래서 역시 자바스크립트를 이용하여 CSS를 적용할 수 있도록 코드를 준비하였습니다.

자바스크립트로 소셜웹 반응글에 스타일 시트 적용

원리는 가능합니다. div 태그를 검색하여 소셜웹 반응글에 쓰이는 div 태그의 id를 받아오는 방식입니다.

2013/01/08 - 자바스크립트로 티스토리 모바일에 광고 넣기
2013/01/10 - 자바스크립트로 다음 view 추천 버튼을 원하는 곳에 넣을 수 있다면?

기존에 모바일에 광고를 넣는다던가, 다음 view 추천 버튼을 넣는 것과 같은 방식입니다.

<script language="JavaScript"> <!-- var i; var div_social=document.getElementsByTagName('div'); for(i=0;i<div_social.length;i++) { var div_id=div_social[i].getAttribute('id'); if(div_id==null) {} else { if(div_id.substr(0,20)=="container_socialPost") { var div_post=div_id.substr(10,div_id.length-10) document.writeln('<style> '); document.writeln('#container_'+div_post+' { [외부상자] }'); document.writeln('#container_'+div_post+' ul { [글항목] }'); document.writeln('#container_'+div_post+' li { [글항목] }'); document.writeln('#wrap_'+div_post+' { [내부상자] }'); document.writeln('#toggleBtn_'+div_post+' { [접기버튼] }'); document.writeln('#moreViewBtn_'+div_post+' { [더 보기 버튼] }'); document.writeln('</style>'); } } } //--> </script>

샘플 코드입니다. 소셜웹 반응글에 쓰이는 태그의 목록이며 그에 맞추어 스타일 시트를 적용하시기 바랍니다.