본문 바로가기

프로그래밍/Web

미투데이 버튼 그리고 요즘 버튼

반응형

삽입된 현재 문서의 제목과 주소를 알아서 처리하는 기능이며, 공개된 공식 삽입 소스가 없어서 자바스크립트로 대충 만듦. 원래는 PHP로 소스를 뿌려주는 방식으로 짠건데 보기 좋게 살짝 손 봐서 올립니다. 

웹 페이지의 적당한 삽입 위치에 <a> 태그를 지정해두고 스크립트가 실행되면 각각의 id를 찾아서 링크 주소 및 해당 이미지를 처리함.


웹페이지

<!-- yozm -->

<a id="yozm-button">yozm</a>

<!-- me2day -->

<a id="me2day-button">me2day</a>

<script type="text/javascript" src="/scripts/socialButtons.js"></script>


자바스크립트

/* 

/scripts/socialButtons.js 

*/

var sPost = encodeURI(document.title);

var sLink = encodeURI(window.location.href);

var sTag = encodeURI("미투데이 태그");


me2day(sPost, sLink, sTag);

yozm(sPost, sLink);


function me2day(me2Post, me2Link, me2Tag) {

var me2day = document.getElementById("me2day-button");

me2day.setAttribute("href", 'http://me2day.net/plugins/post/new?new_post[body]="' + me2Post + '":' + me2Link + '&new_post[tags]=' + me2Tag);

me2day.setAttribute("target", "_blank");

me2day.innerHTML = '<img src="/images/me2-button.png" />';

}


function yozm(yozmPost, yozmLink) {

var yozm = document.getElementById("yozm-button");

yozm.setAttribute("href", 'http://yozm.daum.net/api/popup/prePost?link=' + yozmLink + '&prefix=' + yozmPost);

yozm.setAttribute("target", "_blank");

yozm.innerHTML = '<img src="/images/yozm-button.png" />';

}

버튼 이미지는 각 브랜드의 CI를 받아서 대략.. 20픽셀로 그렸음.



주소 및 매개변수는 예전에 쓴 글을 참고하세요.

2011/08/09 - [프로그래밍/Web] - SNS 버튼 달기


반응형

'프로그래밍 > Web' 카테고리의 다른 글

jQuery Mobile 사용법  (2) 2011.11.10
HTML 5 : 섹션 그리고 글의 구조  (0) 2011.10.30
첫번째 핑백 받은 이야기  (2) 2011.08.19
QR 코드를 쉽게 만들 수 있습니다.  (0) 2011.08.15
SNS 버튼 달기  (0) 2011.08.09