내용으로 건너뛰기
권남
사용자 도구
로그인
사이트 도구
검색
도구
문서 보기
이전 판
역링크
최근 바뀜
미디어 관리자
사이트맵
로그인
>
최근 바뀜
미디어 관리자
사이트맵
추적:
sns:buttons
이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 각종 SNS로 올리기 버튼 제작 ====== * [[http://semix2.tistory.com/483||포스트를 트위터, 페이스북, 버즈, 미투데이로 보내는 방법에 관한 글]] ===== Twitter ===== * [[http://twitter.com/about/resources/tweetbutton|Twitter button]], [[http://dev.twitter.com/pages/tweet_button|Twitter Button customize]]<code html> <!-- 아래와 같은 링크를 만들고 해당 링크를 onclick으로 팝업으로 띄우면 된다. --> <a class="twitterButton" href="http://twitter.com/share?lang=ko&url=트윗할URL&text=트윗할내용">트위터로 내보내기</a> 혹은 iframe방식 <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=주소&text=제목" allowtransparency="true" frameborder="0" scrolling="no" style="width:130px; height:21px;"></iframe> </code> ===== Cyworld ===== * [[http://devsquare.nate.com/openApi/empathyPluginGuide|싸이월드 cyworld 공감 버튼]]<code html> <img style="cursor: pointer;" onclick="window.open('http://csp.cyworld.com/bi/bi_recommend_pop.php?url=http://test', 'recom_icon_pop', 'width=400,height=364,scrollbars=no,resizable=no');" src="http://csp.cyworld.com/images/ico_clog.gif" alt="싸이월드 공감" title="싸이월드 공감" > </code> * 제목 지정은 URL에서 ''&title=제목&summary=요약'' 정도로 할 수 있을거 같은데 현재 작동안함. ===== Facebook ===== * [[http://developers.facebook.com/docs/reference/dialogs/feed/|Facebook Feed Dialog]]<code> 가장 간단하게는 아래와 같은 URL로 링크를 만드는 것이다. http://www.facebook.com/dialog/feed? app_id=123050457758183& link={URL}& picture={이미지 URL}& name={제목}& caption={캡션}& description={설명}& redirect_uri={마치고 돌아올 URL} </code> * [[http://developers.facebook.com/docs/reference/plugins/like|페이스북 facebook 좋아요 버튼]] * [[http://www.w3cgallery.com/w3c-blog/other-help/how-to-share-your-content-with-facebook-add-share-button|Share 버튼 커스터마이징해서 달기]]. 아래 링크를 팝업으로 열면 된다. Deprecated.<code html> <!-- u=URL&t=제목 --> <a href="http://www.facebook.com/sharer.php?u=YOUR-PAGE-URL&t=Content-Title-or-SiteName">SHARE THIS</a> </code> ===== Me2Day ===== * [[http://codian.springnote.com/|미투데이 API]]<code html> <!-- 제목과 URL을 URLEncode 하여 대체한다. --> <a href="http://me2day.net/posts/new?new_post[body]="제목":URL" onclick="window.open(this.href,'me2day_post', 'width=1024,height=364,scrollbars=1,resizable=1'); return false" alt="미투데이로 글 보내기">미투데이로 글 보내기</a> </code> ====== Facebook 좋아요 Like 컨텐츠 ====== 페이스북의 좋아요 버튼을 클릭하면 페이스북이 현재 페이지의 컨텐츠를 취합한다. 그 취합 방법에 규칙이 존재한다. * [[http://developers.facebook.com/tools/debug|OpenGraph 확인 도구]] * [[http://ogp.me/|Open Graph Protocol]] * [[http://webapps.stackexchange.com/questions/6745/how-does-facebook-publisher-select-the-image-title-and-content-from-a-shared-w|How does “Facebook Publisher” select the image, title and content from a shared website?]] * [[http://umairj.com/29/modify-how-the-shared-item-appears-on-facebook/|Modify how the shared item appears on Facebook]] * [[http://developers.facebook.com/docs/opengraph/|Facebook이 소개하는 Open Graph Protocol]] * [[http://usefulparadigm.com/2011/07/22/integrating-wordpress-with-opengraph/|WordPress와 페이스북 OpenGraph 연동하기]] * [[http://stackoverflow.com/questions/8235687/open-graph-namespace-declaration-html-with-xmlns-or-head-prefix|OpenGraph Head Prefix 종류]] * ''prefix="og: http://ogp.me/ns#"''를 추천함. * 기본적인 예<code html> <!-- html에 prefix 명시가 필요하다. --> <html prefix="og: http://ogp.me/ns#"> <!-- URL은 항상 절대 주소로 써야만 한다. --> <meta property="og:title" content="링크 제목" /> <meta property="og:site_name" content="사이트이름" /> <meta property="og:description" content="링크 설명" /> <meta property="og:type" content="article" /> <meta property="og:url" content="링크 정식 URL - 항상 넣어줄 것." /> <meta property="og:image" content="컨텐츠를 나타내는 이미지" /> </code> * 동영상<code html> <!-- og:image 가 존재하지 않는 이미지 이거나 규격에 안 맞을 경우 동영상이 안나온다. --> <meta property="og:video" content="http://example.com/test.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="400" /> <meta property="og:video:height" content="225" /> </code> ====== Twitter Cards ====== [[https://dev.twitter.com/docs/cards|Twitter Cards]]는 페이스북의 OpenGraph 같은 것으로 트위터에 링크를 올렸을 때 해당 링크에 관해 보여줄 정보를 기술할 수 있다. * 기본적인 예<code html> <meta name="twitter:card" content="카드 타입. 'summary', 'photo', or 'player'. 보통 summary"> <meta name="twitter:url" content="링크의 정식 URL"> <meta name="twitter:title" content="카드에 출력될 링크의 제목"> <meta name="twitter:description" content="요약 컨텐츠 200자 이내"> <meta name="twitter:image" content="컨텐츠를 나타내는 이미지."> </code> * ''twitter:card'', ''twitter:site'', ''twitter:creator''를 제외하고는 Facebook OpenGraph를 사용해도 된다. ====== Google +1 ====== * 구글 검색 결과에서 더 눈에 띄게 한다고 한다. * [[http://www.google.com/webmasters/+1/button/]]
sns/buttons.txt
· 마지막으로 수정됨: 2012/10/08 15:02 저자
kwon37xi
문서 도구
문서 보기
이전 판
역링크
맨 위로