오픈그래프란?
단톡방이나 페이스북 등에서 하이퍼링크가 걸려있는 것을 종종 보셨을 겁니다. 예전에는 밋밋한 링크만 보였다면, 요즘은 링크를 첨부하면 썸네일 이미지와 제목, 컨텐츠의 요약과 URL이 첨부된 이쁘게 꾸며진 모습으로 나옵니다.
한장의 이미지로 오픈그래프 요약
오픈그래프 전송
오픈그래프는 메타 태그를 이용해서 전송할 수 있습니다. 주의하실 점은 메타 태그의 속성을 사용자 임의로 바꾸시면, 웹에서 오픈그래프를 가져올때 인식하지 못합니다. 메타 속성은 http://ogp.me/ 여기서 확인해보시기 바랍니다. 자주 사용하는 오픈그래프 속성으로는 og:title, og:url, og:image, og:description 정도를 자주 사용합니다.아래의 html코드를 저장하고 테스트를 해봅시다. 적당한 이미지도 1장 필요합니다. 오류가 발생시 파일 경로가 잘못된게 아닌지 확인해보시기 바랍니다. 파일을 실행시키면 대문짝만하게 "오픈그래프를 코드로 표현해봅시다"라고 뜨는걸로 성공인지 알 수 없습니다. 오픈그래프를 지원하는 프로그램으로 테스트를 해보셔야 합니다. 저는 카카오톡으로 테스트를 해봤습니다.
index.php
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <meta charset="utf-8"> <meta property="og:title" content="김연아"/> <meta property="og:url" content="http://000.000.000.000/og/index.php"/> <meta property="og:image" content="http://000.000.000.000/og/img.jpg"/> <meta property="og:description" content="퀸연아 이쁘당"/> </head> <body> <h1>오픈그래프를 코드로 표현해봅시다</h1> </body> </html> | cs |
 |
메타 태그 오픈그래프 프로토콜을 이용해서 간단하게 오픈그래프를 전송할 수 있습니다. 그럼 오픈그래프를 받는것은 어떻게 할까요? 위에 보이는 이미지처럼 카카오톡은 링크를 전송하면 알아서 오픈그래프를 이용해서 이미지와 제목 간단한 설명등을 가져옵니다. 저는 PHP로 구현해보겠습니다.
PHP로 오픈그래프 가져오기
아래의 코드는 오픈그래프를 가져오는것과 간단히 디자인된 모습을 소개합니다.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <style type="text/css"> a{text-decoration:none;color:#000} .modal {position: fixed;z-index: 1; padding:150px;left: 0;top: 0;width: 100%;height:100%;} .modal-content {width:500px;overflow: auto;position:relative;} /* button */ #myurl {background-color: #2196F3;border: none;color: white;float:left;padding: 16px 32px;text-align: center;font-size: 16px;margin: 0;opacity: 1;transition: 0.3s;} #myurl:hover {opacity: 0.6} #close {background-color: #4CAF50;border: none;color: white;float:right;padding: 16px 32px;text-align: center;font-size: 16px;margin: 0;opacity: 1;transition: 0.3s;} #close:hover {opacity: 0.6} /* IMG */ #myimg{width:100%;} #myimg:hover{z-index:999;} p{color:#fff;font-size:1.2em;padding:10px;} #contents{position:absolute;overflow:auto;width:100%;bottom:53px;z-index:2;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.7);} </style> <?php //$url = 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=154222'; $url = 'http://000.000.000.000/og/index.php'; $page_content = file_get_contents($url); $dom_obj = new DOMDocument(); $dom_obj->loadHTML($page_content); $meta_val = null; foreach($dom_obj->getElementsByTagName('meta') as $meta) { if($meta->getAttribute('property')=='og:title'){ $og_title = $meta->getAttribute('content'); } if($meta->getAttribute('property')=='og:url'){ $og_url = $meta->getAttribute('content'); } if($meta->getAttribute('property')=='og:image'){ $og_image = $meta->getAttribute('content'); } if($meta->getAttribute('property')=='og:description'){ $og_description = $meta->getAttribute('content'); } } echo "og:title : ".$og_title."<br>"; echo "og:url : ".$og_url."<br>"; echo "og:iamge : ".$og_image."<br>"; echo "og_description : ".$og_description."<br>"; ?> <div class="modal" id="myModal"> <div class="modal-content"> <div id="contents"> <p id="og_title"><?=$og_title ?></p> <p id="og_description"><?=$og_description ?></p> </div> <img id="myimg" src="<?=$og_image ?>"> <button id="myurl" style="width:50%" onclick="modal_move()">자세히보기</button> <button id="close" style="width:50%" onclick="modal_close()">닫기</button> </div> </div> <script> var modal = document.getElementById('myModal'); var url = <?=json_encode($og_url); ?> ; function modal_close(){ modal.style.display = "none"; } function modal_move(){ window.open("about:blank").location.href=url; } </script> | cs |
 |
| 완성된 화면 |
0 댓글