권남

사용자 도구

사이트 도구

추적: • buttons

사이드바

권남의 Github
권남의 위키
까먹지말자! 블로그
권남의 Twitter
URLEncode/HTMLEscape
Java Properties

sns:buttons

목차

각종 SNS로 올리기 버튼 제작

Twitter

  • Twitter button, Twitter Button customize
    <!-- 아래와 같은 링크를 만들고 해당 링크를 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=주소&amp;text=제목" allowtransparency="true" frameborder="0" scrolling="no" style="width:130px; height:21px;"></iframe>

Cyworld

  • 싸이월드 cyworld 공감 버튼
    <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="싸이월드 공감" >
    • 제목 지정은 URL에서 &title=제목&summary=요약 정도로 할 수 있을거 같은데 현재 작동안함.

Facebook

  • Facebook Feed Dialog
    가장 간단하게는 아래와 같은 URL로 링크를 만드는 것이다.
http://www.facebook.com/dialog/feed?
  app_id=123050457758183&
  link={URL}&
  picture={이미지 URL}&
  name={제목}&
  caption={캡션}&
  description={설명}&
  redirect_uri={마치고 돌아올 URL}
  • 페이스북 facebook 좋아요 버튼
  • Share 버튼 커스터마이징해서 달기. 아래 링크를 팝업으로 열면 된다. Deprecated.
    <!-- u=URL&t=제목 -->
<a href="http://www.facebook.com/sharer.php?u=YOUR-PAGE-URL&amp;t=Content-Title-or-SiteName">SHARE THIS</a>

Me2Day

  • 미투데이 API
    <!-- 제목과 URL을 URLEncode 하여 대체한다. -->
<a href="http://me2day.net/posts/new?new_post[body]=&quot;제목&quot;:URL" onclick="window.open(this.href,'me2day_post', 'width=1024,height=364,scrollbars=1,resizable=1'); return false" alt="미투데이로 글 보내기">미투데이로 글 보내기</a>

Facebook 좋아요 Like 컨텐츠

페이스북의 좋아요 버튼을 클릭하면 페이스북이 현재 페이지의 컨텐츠를 취합한다. 그 취합 방법에 규칙이 존재한다.

  • 동영상
    <!-- 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" />

Twitter Cards

Twitter Cards는 페이스북의 OpenGraph 같은 것으로 트위터에 링크를 올렸을 때 해당 링크에 관해 보여줄 정보를 기술할 수 있다.

  • 기본적인 예
    <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="컨텐츠를 나타내는 이미지.">
  • twitter:card, twitter:site, twitter:creator를 제외하고는 Facebook OpenGraph를 사용해도 된다.

Google +1

sns/buttons.txt · 마지막으로 수정됨: 2012/10/08 15:02 저자 kwon37xi

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki