차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- sns:buttons [2012/10/08 12:15]
kwon37xi [Facebook 좋아요 Like 컨텐츠]
+++ sns:buttons [2012/10/08 15:02] (현재)
kwon37xi [Facebook 좋아요 Like 컨텐츠]
@@ 줄 46: / 줄 46: @@
 ====== Facebook 좋아요 Like 컨텐츠 ======
 페이스북의 좋아요 버튼을 클릭하면 페이스북이 현재 페이지의 컨텐츠를 취합한다. 그 취합 방법에 규칙이 존재한다.
-  * [[http://developers.facebook.com/tools/lint|URLLinter]] : 해당 URL에서 facebook이 어떤 데이터를 뽑아가는지 미리보기 할 수 있다.
+  * [[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://ogp.me/|Open Graph Protocol]]
   * [[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:url" content="링크 정식 URL - 항상 넣어줄 것." />
-<meta property="og:image" content="이미지" />
+<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>
@@ 줄 64: / 줄 78: @@
 [[https://dev.twitter.com/docs/cards|Twitter Cards]]는 페이스북의 OpenGraph 같은 것으로 트위터에 링크를 올렸을 때 해당 링크에 관해 보여줄 정보를 기술할 수 있다.
   * 기본적인 예<code html>
-<meta name="twitter:card" content="카드 타입. "summary", "photo", or "player". 보통 summary">
+<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/]]

권남

사용자 도구

사이트 도구

차이

문서 도구