각종 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 컨텐츠

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

OpenGraph 확인 도구
Open Graph Protocol
How does “Facebook Publisher” select the image, title and content from a shared website?
Modify how the shared item appears on Facebook
Facebook이 소개하는 Open Graph Protocol
WordPress와 페이스북 OpenGraph 연동하기
OpenGraph Head Prefix 종류
- prefix=“og: http://ogp.me/ns#”를 추천함.

기본적인 예

<!-- 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="컨텐츠를 나타내는 이미지" />

동영상

<!-- 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 같은 것으로 트위터에 링크를 올렸을 때 해당 링크에 관해 보여줄 정보를 기술할 수 있다.