삽입된 현재 문서의 제목과 주소를 알아서 처리하는 기능이며, 공개된 공식 삽입 소스가 없어서 자바스크립트로 대충 만듦. 원래는 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 |