-
개발자를 위한 OG META TAG 사용법 (Facebook)IT Information/최신 기술 동향 2013. 12. 6. 18:58반응형
1. Facebook share : 공유하기 Dialog
- 공유 방법은 총 2가지가 있는데 첫번째로 Link share, 두번째로 Feed share
- 일반적으로 우리가 보는 공유하기가 Link share다. Dialog가 뜨면서 공유할 정보와 함께 사용자가 상세설명을 입력할 수 있다.
- Head와 Head 사이에 OG Tag 정의와 https://www.facebook.com/sharer/sharer.php 로 연결만 시켜주면 돼서 쉽게 사용할 수 있다.
1) Share Link Dialog : The Share Link is the simpler of the two options to use. You just direct the user to open a link with the URL to share as a parameter.
- >> https://developers.facebook.com/docs/plugins/share-button/
- Facebook API를 써서 공유하는 방법이 Feed share다.
- 함수 안에서 링크의 정보를 정의해서 공유할 수 있는데 좀 복잡하다.
2) Feed Dialog : a good way to control the specifics of a share post. It is highly customizable and doesn’t rely on Open Graph tags on a page for it’s information.
- >> https://developers.facebook.com/docs/reference/dialogs/feed/
2. 첫번째 방법인 Share Link Dialog를 사용해보자.
- OG Tag를 정의해준다.
- 헤드와 헤드 사이에 meta og tag 를 넣어준다.
(* facebook 말고도 google, twitter 에서도 meta tag를 사용한다. facebook 의 meta tag를 og tag라고 부르는 것이다. http://davidwalsh.name/facebook-meta-tags)
-rootree.net ->> 이게 공유할 페이지이다. 공유하기 다이얼로그를 띄울 때 아래 페이지의 url(rootree.net)을 연결시켜주면, 공유하기 다이얼로그가 띄워지면 아래의 og tag의 정보를 불러온다.
rootree.net 의 index.html
<head>
<link rel="image_src" href="http://img.jpg"/>
<meta property="fb:app_id" content="179242432284377" />
<meta property="og:title" content="test"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://rootree.net"/>
<meta property="og:description" content="This is a description."/>
<meta property="og:image" content="http://img.jpg"/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
</head>
- 이미지 크기에 대한 정의3. 공유하기 버튼 정의- 공유하기 다이얼로그를 띄울 버튼을 정의해준다.
- u="url" u 다음에 공유할 url을 입력한다.
- 해당 url의 html 소스 안에는 head와 head 사이에 og meta tag가 있어야한다!!
text.html
<button onclick="shareToPopup()">고고고고</button>
<input id="h_url" type="hidden" value="<?=$res[url]?>" />
<input id="h_img" type="hidden" value="<?=$res[image]?>" />
<input id="h_title" type="hidden" value="<?=$res[title]?>" />
<input id="summ" type="hidden" value="<?=$res[summary]?>" />
<script>
shareToPopup : function(url, image, title, summary){
url = $("#h_url").val();
image = $("#h_img").val();
title = $("#h_title").val();
summary = $("#summ").val();
var params = 'u='+encodeURIComponent(url+'?imgname='+image+'&msg='+summary+'&t='+title+"&passerby=1"); //passerby=1은 타인이 담벼락의 링크타고 들어올 때의 flag를 주는 것
window.open('https://www.facebook.com/sharer/sharer.php?'+params, 'sharer', 'width=626,height=1500');
}
</script>
test.php
$res['url'] = "http://rootree.net";
$res['image']= "http://rootree.net/data/".$_GET['imgname'];
$res['title']="SOMECHECK";
$res['summary'] = "http://somecheck.usless.kr";
4. 공유완료!
- 뉴스피드에 이런식으로 표시된다. 이미지 size가 640X360 이상인 경우부터 아래와 같이 큰 이미지로 바뀐다.
4. 공유하기 팝업에서 og tag 못불러올때
- https://developers.facebook.com/tools/debug/og/object
여기서 rootree.net을 넣어 페이스북의 캐시를 삭제해주면 된단다. 위와 같이 제대로 표시되면 og tag가 제대로 적용된 것이다. 즉, 공유하기 다이얼로그에서 제대로 불러와질 수 있다는 말이다. 좀 기다려야되는 경우도 있다고 하니 서두르지 말 것~~
5. Dynamic Meta tag share
http://creativebusinesslabs.com/simple-social-sharing-buttons-in-magento/
http://stackoverflow.com/questions/8431694/generating-facebook-open-graph-meta-tags-dynamically
반응형'IT Information > 최신 기술 동향' 카테고리의 다른 글
구글 URL 단축 서비스 goo.gl (0) 2014.03.05 빅데이터 전문가, 데이터 과학자가 갖춰야 할 자질은? (0) 2014.03.04 호빗호빗 12월 젤 기대되는 영화 (0) 2013.12.04 Apach Log 파일 분석 방법 (0) 2013.11.08 PhantomJS, CasterJS 설치 및 사용 (0) 2013.11.01
