개요
오픈 그래프 프로토콜은 페이스북에서 정의된 메타 태그 프로토콜 이라고 한다.
페이스북,트위터에서 링크 삽입시 해당사이트의 메타태그를 긁어와서 사이트정보를 미리 보여주는 정도의 용도로 생각하면 될거 같습니다. 적용 예)
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/](http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg](http://ia.media-imdb.com/images/rock.jpg" />
오픈 그래프 프로토콜 예시)
예시 링크 : https://www.youtube.com/watch?v=B2z5C_Mesx0
트위터 예) 
페이스북 예) 
카카오톡 예) 
위의 정보를 어떻게 가져와서 보여주는지 알아 보겠습니다.
오픈 그래프 프로토콜을 사용해 보자.
http://ogp.me/ 사이트를 방문 하면 Implementations 메뉴에 디버깅 툴 및 플러그인 등 각종 링크가 있습니다.
여기서
Facebook Object Debugger - Facebook’s official parser and debugger
에 대해 알아보고 어떻게 적용할지 알아 보겠습니다.
Facebook Object Debugger - Facebook’s official parser and debugger는 페이스북에서 제공하는 오픈 그래프 프로토콜이 어떤건지 알수 있는 디버깅 툴 입니다. 해당페이지에 접속하여서 url을 넣고 Debug버튼 페이스북의 링크 공유시 어떻게 나올지 나타내게 됩니다.
간단한 정보만 필요함으로 직접 작성하였습니다.
Document doc;
String url = "[https://www.youtube.com/watch?v=B2z5C_Mesx0](https://www.youtube.com/watch?v=B2z5C_Mesx0)";
Map<String, List<String>> result = new HashMap<String,List<String>>();
try {
doc = Jsoup.connect(url).get();
Elements ogElements = doc.select("meta[property^=og], meta[name^=og]");
for (Element e : ogElements) {
String target=target = e.hasAttr("property") ? "property":"name";
if(!result.containsKey(e.attr(target))){
result.put(e.attr(target), new ArrayList<String>());
}
result.get(e.attr(target)).add(e.attr("content"));
}
for(String s : result.keySet())
System.out.println(s + " : " + result.get(s));
} catch (Exception e){
e.printStackTrace();
}
실행결과
og:image : [[https://i.ytimg.com/vi/B2z5C_Mesx0/hqdefault.jpg](https://i.ytimg.com/vi/B2z5C_Mesx0/hqdefault.jpg)]
og:type : [video]
og:site_name : [YouTube]
og:title : [SNL코리아7 - 인스턴트 LOVE "3분 남친" by 에릭남, 정이랑 (2016.04.16)]
og:video:type : [text/html, application/x-shockwave-flash]
og:video:height : [720, 720]
og:video:url : [[https://www.youtube.com/embed/B2z5C_Mesx0](https://www.youtube.com/embed/B2z5C_Mesx0), [http://www.youtube.com/v/B2z5C_Mesx0?version=3&autohide=1](http://www.youtube.com/v/B2z5C_Mesx0?version=3&autohide=1)]
og:url : [[https://www.youtube.com/watch?v=B2z5C_Mesx0](https://www.youtube.com/watch?v=B2z5C_Mesx0)]
og:video:secure_url : [[https://www.youtube.com/embed/B2z5C_Mesx0](https://www.youtube.com/embed/B2z5C_Mesx0), [https://www.youtube.com/v/B2z5C_Mesx0?version=3&autohide=1](https://www.youtube.com/v/B2z5C_Mesx0?version=3&autohide=1)]
og:video:tag : [SNL코리아7, 인스턴트 LOVE 3분 남친, 에릭남, 정이랑, 2016.04.16]
og:description : [SNL코리아7 - 인스턴트 LOVE "3분 남친" by 에릭남, 정이랑 (2016.04.16) #일부 국가 차단으로 다시 업로드 했습니다 ^^]
og:video:width : [1280, 1280]
추가로 자바스크립트 적용 소스도 올리겠습니다. 유튜브 비디오 처리랑 일반 웹사이트만 추가했습니다.
this.ajaxUrlConnet = function (data) {
$.ajax({
url: '/tbbswrite/opengraph',
method: "GET",
async: false,
cache: false,
contentType: true,
processData: true,
data: {'url': data}
}).done(function(c) {
$.each(c, function(key,value){
console.log(key + ' : ' + value);
})
var html='';
if('video'.indexOf(c['og:type'][0]) >= 0){
html+='<pre style="width: 300px;overflow: hidden;" onclick="location.href=\''+c['og:url'][0]+'\'">';
if( !(c['og:video:secure_url'][0] === undefined)){
html+='<object data="'+c['og:video:secure_url'][0]+'"></object>';
}
html+='<h1><b>'+c['og:title'][0]+'</b></h1>';
if( !(c['og:description'] === undefined)){
html+='<p>'+c['og:description']+'</p>';
}
html+='<p><a href="'+c['og:url'][0]+'">'+c['og:url'][0]+'</a></p>';
html+='</pre>';
context.invoke('editor.pasteHTML', html);
} else {
html+='<pre style="width: 300px;overflow: hidden;" onclick="location.href=\''+c['og:url'][0]+'\'">';
if( !(c['og:image'][0] === undefined)){
html+='<img src="'+c['og:image'][0]+'" style="width: 100%;height: 100%;" />';
}
html+='<p><h1><b>'+c['og:title'][0]+'</b></h1></p>';
if( !(c['og:description'] === undefined)){
html+='<p>'+c['og:description']+'</p>';
}
html+='<p><a href="'+c['og:url'][0]+'">'+c['og:url'][0]+'</a></p>';
html+='</pre>';
context.invoke('editor.pasteHTML', html);
}
}).fail(function() {
alert('error = ' + data);
});
}
해당 프로젝트는 github에 올려놓았습니다. 문제점이 있거나 잘못된 코딩습관이 있으면 코멘트 부탁드리겠습니다^^