You cannot see this page without javascript.

Skip to content

Home

조회 수 2170 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

요즘 SNS 공유하기 버튼은 필수!~

그런데 원하는 내용으로 공유가 잘 안되어 골치아프다..

 

meta태그를 이용하면, 공유하기 연동시 원하는 내용으로 설정할 수 있는데 SNS마다 조금씩 차이가 있기에 정리해본다.

 

meta태그 뿐 아니라 웹페이지의 기본속성인 <title>과 <meta name="description">, <meta name="keywords"> 등의 값은 검색에도 도움이 되니 꼭 설정해 주도록 하자!

 

 

  1. <!-- 페이스북 -->
  2. <meta property="og:title"           content="제목"/>
  3. <meta property="og:site_name"       content="사이트명"/>
  4. <meta property="og:type"            content="분류 (website,article,place,product,event ...)"/>
  5. <meta property="og:url"             content="주소"/>
  6. <meta property="og:image"           content="썸네일 (200x200.jpg)"/>
  7. <meta property="og:description"     content="요약글"/>
  8.  
  9. <!-- 트위터 -->
  10. <meta name="twitter:card"           content="분류 (summary, photo, gallery ...)">
  11. <meta name="twitter:title"          content="제목">
  12. <meta name="twitter:site"           content="사이트명">
  13. <meta name="twitter:creator"        content="작성자명">
  14. <meta name="twitter:image"          content="썸네일">
  15. <meta name="twitter:description"    content="포스트 내용">
  16.  
  17. <!-- 미투데이 -->
  18. <meta property="me2:post_body"      content="포스트 내용"/>
  19. <meta property="me2:post_tag"       content="태그"/>
  20. <meta property="me2:image"          content="썸네일"/>
  21. <meta property="me2:latitude"       content="위도"/>
  22. <meta property="me2:longitude"      content="경도"/>
  23. <meta property="me2:post_icon"      content="포스트 아이콘 (1~12 숫자"/>
  24. <meta property="me2:category1"      content="카테고리1"/>
  25. <meta property="me2:category2"      content="카테고리2"/>

 

 이 외에도 몇가지 속성이 있기에.. 필요하다면 각 SNS의 개발 레퍼런스를 참고하자~

 

 추가로 개발 레퍼런스의 주소가 바뀌는 경우도 있어서 캡쳐한 화면을 올리는데, 속성값이 변경될 수 있으니 적용이 안되면~ 가이드를 다시 찾아보자~

(2013년 11월 1일 기준)

 

 

 

페이스북

글 종류를 type으로 구분하여 사용

속성: https://developers.facebook.com/docs/opengraph/creating-object-types/#properties

타입분류: https://developers.facebook.com/docs/opengraph/property-types/

files/attach/outimage/i.imgur.com//is6j5ch.jpg  

 

 

트위터

트위터는 글 종류를 card 타입으로 구분하여 사용

속성: https://dev.twitter.com/docs/cards/markup-reference

files/attach/outimage/i.imgur.com//wzdwrxd.jpg  

 

 

 

미투데이

사실 미투데이는 잘 안쓰고, 레퍼런스도 잘 못찾겠어서.. 일단 대충 패스 ㅎㅎ

플러그인 레퍼런스: http://me2day.net/me2/plugin/guide/metoo_plugins

API 레퍼런스: http://developer.naver.com/wiki/pages/Me2dayAPI

 

 

 출처 : http://classe82.blog.me/20198541611


  연관된글

  • No Image

    수용화(수원,용인,화성)커뮤니티(구)수원성 페이스북 그룹 오픈

  • No Image

    메르스 관련 페이지 오픈

  • 메르스 첫번째 희생자의 페이스북 내용

  • No Image

    수수료 관련 메뉴 보완 및 기사 기본정보 툴팁기능 업데이트 안내


(안심) 짧은 주소는 : 입니다
?

List of Articles
번호 제목 날짜 조회 수
28 table 테이블, 칸에서 수평, 수직정렬 (align, valign) TABLE의 수평,수직 정렬 테이블에서 정렬시 테이블관련 속성에서 지원하는 align을 사용하도록 하자!!! 새로운 &lt;p align=center&gt; 내용 &lt;/p&gt; 태그를 사용할 필요가... 2017.02.20 527
27 구글 해킹 취약점 2 검색 서비스는 우리들이 접할 수 있는 각종 포털 탈사이트(다음, 야후, 네이버, 엠파스등)에서도 제공해 준다. 하지만 대부분의 이러한 사이트들의 검색엔진은 포... 2015.05.05 27856
26 구글링 해킹 취약점 구글은 정보수집 작업중 꼭 거쳐야 하는 작업으로 삭제를 해도 DB에 저장되어 있는 것이 있기 때문에 검색을 한다면 중요 파일부터, 기밀정보 등을 볼수있다. 구... 2015.04.29 3822
25 국내 오픈 API 자료 부록. 국내 오픈 API 자료해외에서는 이미 1990년대 부터 마이크로소프트, 썬마이크로시스템즈 등 소프트웨어 플랫폼을 이용한 외부 개발자 전도(Developer Evang... 2015.02.12 1162
24 유튜브의 동영상을 검색할 수 있는 API입니다. 유튜브의 동영상을 검색할 수 있는 API입니다. 기본 URL http://gdata.youtube.com/feeds/api/videos 파라메터 q : 검색하고자 하는 검색어입니다. alt : 리턴받... 2015.01.28 2848
23 구글 URL Shortener API 회사에서 앱에 버전정보를 관리하는 툴을 개발하여 사용하고 있습니다. 다운로드 화일에 대한 메일을 보낼수도 있고 URL 복사해서 보낼수도 있고 카톡을 통해 보... 2015.01.26 3938
22 Facebook 에 이미지와 URL을 공유할때 주의해야 할점 Facebook 에 이미지와 URL을 공유할때 주의해야 할점 - 이미지는 200px*200px 이상(470px*246px 권장) - Redirect 는 안하는게 좋음 - Debug 를 하자 https://dev... 2015.01.26 1375
» 페이스북,트위터 meta 관련 함수 정의 요즘 SNS 공유하기 버튼은 필수!~ 그런데 원하는 내용으로 공유가 잘 안되어 골치아프다.. meta태그를 이용하면, 공유하기 연동시 원하는 내용으로 설정할 수 있... 2015.01.26 2170
20 모바일웹 전화걸기 링크 아직 안써보긴 했는데. 조만간 쓸일 이 있을거 같아서 자료를 찾아봤다. 모바일웹 제작시 전화걸기 링크. 터치하면 전화걸기 &lt;a href = &quot;tel:02-3395-0000&quot;&gt;3395-... 2015.01.14 2541
19 한번에 끝내는 Ubuntu 웹서버세팅 (우분투 서버세팅) 다시 요약해서 최신에 맞게 작성해 봅니다. 최종수정 : 2014-10-16 현재 배포된 Ubuntu 버전은 아래와 같습니다. 운영체제의 수명이 긴 LTS 버전을 설치하도록 합... 2014.12.11 3020
18 웹접속 브라우저 정보 가져오기 &lt;?function check_agent() { global $HTTP_SERVER_VARS; /*----------------------------------------------------------------- OS Pattern 'keyword' =&gt; 'name'... 2014.11.14 1200
17 지도 링크 주소 형식 빨간색 부분은 변경 가능한 부분. 네이버 지도http://maps.naver.com/?menu=location&amp;mapMode=0&amp;lat=37.5702182&amp;lng=126.9792156&amp;dlevel=14&amp;... 2014.11.11 5256
16 $_SERVER [ ] 값 $_SERVER['DOCUMENT_ROOT'] = 현재 사이트가 위치한 서버상의 위치 =&gt; /webapp/include $_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 받식 =&gt; gzip, deflate $_SER... 2014.11.06 874
15 유튜브 동영상 다운로드 받는 간편한 방법 유튜브에서 동영상을 보다 보면 다운로드 받고 싶어질 때가 있다. 유튜브 동영상을 다운로드 받는 방법은 다양하게 있겠지만, 지금까지 본 방법 중 가장 쉬운 방... 2014.10.17 1795
14 [팁] 페이스북 동영상 간단히 다운로드 받는 방법 페이스북에 올라와 있는 동영상을 보다 보면 다운로드 받고 싶은 생각이 들 때가 있다. 그러나 페이스북 동영상은 바로 다운 받을 수 없게 되어 있다. 간단하게 ... 2014.10.17 2580
13 웹사이트를 통째로 다운로드 할 수 있는 툴 Website Copier 또는 Offline Browser 로 불리우는 3가지 무료 유틸리티를 소개합니다. 소스 코드까지 공개 되어 있는 오픈 소스 소프트웨어 HTTrack 과 Free Dow... 2014.09.18 12914
12 카카오스토리 웹연동 &lt;!doctype HTML&gt; &lt; html&gt; &lt; head&gt; &lt; meta charset=&quot;utf-8&quot;&gt; &lt; meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt; &lt; title&gt;Login Demo - Kakao Javascript ... 2014.08.20 7653
11 카카오링크, 스토리링크, 마이피플 보내기 정보 커피는막심 님 소스를 이용해서 만들어 보았습니다. http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&amp;wr_id=26976&amp;sca=&amp;sfl=wr_subject%7C%7Cwr... 2014.05.03 6442
10 php 내장함수 PHP내장함수는 다음과 같습니다. 내용이 길지만 참고하시길... *time() -용도: 현재 시각을 timestamp값으로 구한다. -방법: time() *date() -용도: 사용자가 지... 2014.03.07 2587
9 두개의 전화번호 구성 알아내기 DB이전시 전화번호가 2가지 종류로 뒤섞여 있어 하나 구성해 봤습니다. ex ) 02-1111-2222 0211112222 위와 같이 뒤섞여 있는 데이터 입니다. 참고하시고 더 좋은... 2014.03.04 2929
Board Pagination Prev 1 2 Next
/ 2

전체 방문자 : 1,166,447 오늘 : 137 어제 : 169 문서 : 0 댓글 : 0
전체회원 : 0 엮인글 : 0 첨부파일 : 0 전체 페이지뷰 : 11,259,617 오늘 페이지뷰 : 2,435 어제 페이지뷰 : 551
Copyright by Myceo 2008 All rights reserved
수원시 팔달구 인계동 1017-3 2층
☏1600-0324

Made By Myceo

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소