본문 바로가기

프로그래밍/Web

SNS 버튼 달기

반응형

웹페이지에 SNS 버튼들을 달아보도록 하자. 다음의 주소를 참고한다.


Google +1

우선, 

<!-- 아래 태그를 헤더나 </body> 태그 앞에 붙여 넣습니다. -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">

  {lang: 'ko'}

</script>


그리고, 웹페이지의 적당한 위치에...

<!-- 아래 태그를 +1 버튼을 렌더링하고자 하는 위치에 붙여 넣습니다. -->

<g:plusone></g:plusone>


좀 더 상세한 옵션 및 관련 정보는 아래에서...

http://www.google.com/intl/ko/+1/button/index.html


Google Buzz

웹 페이지의 원하는 위치에

<a title="Google 버즈로 소식 올리기" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-count" data-locale="ko"></a>

<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>


http://www.google.com/buzz/api/admin/configPostWidget


Twitter

웹 페이지의 원하는 위치에

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ko">트윗하기</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


http://twitter.com/about/resources/tweetbutton


facebook

웹 페이지의 원하는 위치에

<iframe src="http://www.facebook.com/plugins/like.php?app_id=228784317160588&amp;href&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

또는,

<div id="fb-root"></div><script src="http://connect.facebook.net/ko_KR/all.js#appId=228784317160588&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="120" show_faces="false" action="like" font="segoe ui"></fb:like>

를 붙이면 된다.

http://developers.facebook.com/docs/reference/plugins/like/

※ Like를 한글로 표시하기 : en_US를 ko_KR로 바꾸면 'Like'가 '좋아요'로 바뀐다.


me2day

http://me2day.net/plugins/post/new를 호출하면서 매개변수로 new_post[body]와 new_post[tags]를 지정해주면 미투데이의 글쓰기 창으로 이동된다. 이 때 Utf-8과 Url Encoded 되어야 한다.

예) http://me2day.net/plugins/post/new?new_post[body]=body+here&new_post[tags]=tag1+tag2

http://dev.naver.com/openapi/apis/me2day/newpostlink_api


yozm

http://yozm.daum.net/api/popup/prePost를 호출하면서 매개변수로 link 와 prefix를 지정해준다. prefix는 글의 제목이고 link는 글의 주소이다.

http://dna.daum.net/apis/yozm/PrePost


Cy

<img style="cursor: pointer;" onclick="window.open('http://csp.cyworld.com/bi/bi_recommend_pop.php?url=http://어쩌고저쩌고', 'recom_icon_pop', 'width=400,height=364,scrollbars=no,resizable=no');" src="http://csp.cyworld.com/images/ico_clog.gif" alt="싸이월드 공감" title="싸이월드 공감" >

반응형

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

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