OpenGraph를 사용한 미디어 삽입

Open Graph는 페이스북이 공유되는 외부 문서들을 효율적으로 관리하기 위해 고안한 프로토콜이다. 처음엔 이나 이미 존재하는 메타태그들로 가능한 걸 왜 이렇게 하나 싶었는데 점점 활용이 늘어나서 동영상, 오디오, 슬라이드 쇼, 음악 등등 별 것을 다 할 수 있게 되었다. 요즘엔 블로그에서도 참조 문서를 넣을 때 og를 사용해서 미리보기같은 모습으로 넣는 것을 지원한다. 브런치, 포스트가 할때만 해도 그냥 하나보다 했는데 네이버 블로그가 해버리니 마치 반드시 필요한 기능같은 것이 되어버렸다. 사람들이 티스토리에는 왜 없냐고 자꾸 물어본다. 별다른 방법이 없어서 미루다가 tinymce에서는 이런 object를 다루기가 쉬워보여서 도전해보았다. 기본 타입 Open Graph protocol ..</p> </a> <div class="detail_info"> <a href="/category/Dev" class="link_cate">Dev</a> <span class="txt_bar"></span> <span class="info_date">2017.06.24 23:27</span> <span class="txt_bar"></span> <span><span id="commentCount500_0">댓글 0</span></span> </div> </div> </div> <div class="area_paging area_paging_list"> <span class="inner_paging"> <a class="ico_skin link_prev no-more-prev">이전</a> <a class="link_page"><span class="selected">1</span></a> <a class="ico_skin link_next no-more-next">다음</a> </span> </div> <div class="area_paging area_paging_simple"> <div class="inner_paging"> <a class="link_prev no-more-prev"> <span class="ico_skin ico_prev"></span>이전 </a> <a class="link_next no-more-next"> 다음<span class="ico_skin ico_next"></span> </a> </div> </div> <div id="mEtc" class="wrap_etc"> <div class="inner_aside"> <!-- 최근에 올라온 글 --> <div class="box_aside"> <strong>최근에 올라온 글</strong> <ul class="list_board"> <li><a href="/569" class="link_board">2019년 7월 넷플릭스 추천작</a></li> <li><a href="/568" class="link_board">쇠고기 편채 : 아내의 식탁..</a></li> <li><a href="/567" class="link_board">추억속의 머라이어캐리</a></li> <li><a href="/566" class="link_board">2019년 6월 넷플릭스 추천작</a></li> <li><a href="/565" class="link_board">2019년 5월 넷플릭스 추천작</a></li> </ul> </div> <!-- 태그 클라우드 --> <div class="box_aside"> <strong>TAG</strong> <ul class="list_tag"> <li><a href="/tag/%EB%84%B7%ED%94%8C%EB%A6%AD%EC%8A%A4" class="link_tag cloud4">넷플릭스</a></li> <li><a href="/tag/%EC%9A%94%EB%A6%AC" class="link_tag cloud4">요리</a></li> <li><a href="/tag/%EB%A0%88%EC%8B%9C%ED%94%BC" class="link_tag cloud4">레시피</a></li> <li><a href="/tag/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC" class="link_tag cloud4">티스토리</a></li> <li><a href="/tag/%EA%B8%80%EA%BC%B4" class="link_tag cloud4">글꼴</a></li> <li><a href="/tag/electron" class="link_tag cloud4">electron</a></li> <li><a href="/tag/ubuntu" class="link_tag cloud1">ubuntu</a></li> <li><a href="/tag/Daum" class="link_tag cloud4">Daum</a></li> <li><a href="/tag/Mac" class="link_tag cloud4">Mac</a></li> <li><a href="/tag/Linux" class="link_tag cloud4">Linux</a></li> </ul> <a href="/tag" class="link_more">more</a> </div> <!-- 달력 --> <div class="box_aside"> <table class="tt-calendar" cellpadding="0" cellspacing="1" style="width: 100%; table-layout: fixed"> <caption class="cal_month"> <a href="/archive/201907" title="1개월 앞의 달력을 보여줍니다.">«</a>   <a href="/archive/201908" title="현재 달의 달력을 보여줍니다.">2019/08</a>   <a href="/archive/201909" title="1개월 뒤의 달력을 보여줍니다.">»</a> </caption> <thead> <tr> <th class="cal_week2">일</th> <th class="cal_week1">월</th> <th class="cal_week1">화</th> <th class="cal_week1">수</th> <th class="cal_week1">목</th> <th class="cal_week1">금</th> <th class="cal_week1">토</th> </tr> </thead> <tbody> <tr class="cal_week"> <td class="cal_day1"> </td> <td class="cal_day1"> </td> <td class="cal_day1"> </td> <td class="cal_day1"> </td> <td class=" cal_day cal_day3"><a class="cal_click" href="/archive/20190801">1</a></td> <td class=" cal_day cal_day3">2</td> <td class=" cal_day cal_day3">3</td> </tr> <tr class="cal_week"> <td class=" cal_day cal_day_sunday cal_day3">4</td> <td class=" cal_day cal_day3">5</td> <td class=" cal_day cal_day3">6</td> <td class=" cal_day cal_day3">7</td> <td class=" cal_day cal_day3">8</td> <td class=" cal_day cal_day3">9</td> <td class=" cal_day cal_day3">10</td> </tr> <tr class="cal_week"> <td class=" cal_day cal_day_sunday cal_day3">11</td> <td class=" cal_day cal_day3">12</td> <td class=" cal_day cal_day3">13</td> <td class=" cal_day cal_day3">14</td> <td class=" cal_day cal_day3">15</td> <td class=" cal_day cal_day3">16</td> <td class=" cal_day cal_day3">17</td> </tr> <tr class="cal_week cal_current_week"> <td class=" cal_day cal_day_sunday cal_day3">18</td> <td class=" cal_day cal_day3">19</td> <td class=" cal_day cal_day4">20</td> <td class=" cal_day cal_day3">21</td> <td class=" cal_day cal_day3">22</td> <td class=" cal_day cal_day3">23</td> <td class=" cal_day cal_day3">24</td> </tr> <tr class="cal_week"> <td class=" cal_day cal_day_sunday cal_day3">25</td> <td class=" cal_day cal_day3">26</td> <td class=" cal_day cal_day3">27</td> <td class=" cal_day cal_day3">28</td> <td class=" cal_day cal_day3">29</td> <td class=" cal_day cal_day3">30</td> <td class=" cal_day cal_day3">31</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <hr class="hide"> <div id="dkFoot" role="contentinfo" class="area_foot"> Blog is powered by <em class="emph_t">Tistory</em> / Designed by <em class="emph_t">Tistory</em> </div> </div> <script src="https://tistory3.daumcdn.net/tistory/22084/skin/images/script.js"></script> <script> (function($) { $.Area.init(); (function() { var $window = $(window), $page = $("#tt-body-page"); // ? $window.on("scroll", function(e) { if ($window.scrollTop() > 100) { $page.addClass("scroll"); } else { $page.removeClass("scroll"); } }) })(); })(jQuery); </script> <script id="dsq-count-scr" src="//joostoryblog.disqus.com/count.js" async></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atom-one-dark-reasonable.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script><script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-26767980-1', 'auto'); ga('send', 'pageview'); </script> <script> lightbox.option({ "fadeDuration": 200, "resizeDuration": 200, "wrapAround": false, "albumLabel": "%1 / %2", "fitImagesInViewport":true , "stopEvent": false }) </script><script type="text/javascript"> var _tiq = 'undefined' !== typeof _tiq ? _tiq : []; _tiq.push(['__setConfig', {enableScroll:true, enableClick:true, enableButton:true}]); _tiq.push(["__setParam", "svcdomain", "user.tistory.com"]); (function(d) { var se = d.createElement('script'); se.type = 'text/javascript'; se.async = true; se.src = location.protocol + '//m2.daumcdn.net/tiara/js/td.min.js'; var s = d.getElementsByTagName('head')[0]; s.appendChild(se); })(document); _tiq.push(['__setParam', 'param_ex', JSON.stringify({"userId":"27867","blogId":"22084","role":"guest","filterTarget":false,"entryId":"500"})]); _tiq.push(['__trackPageview']); _tiq.push(['__content', 't_content', { 'c_id':'22084_500', 'c_title':'OpenGraph를 사용한 미디어 삽입', 'type':'article', 'author':'', 'author_id':'27867', 'cp':'Joo\'s Story', 'cp_id':'22084', 'regdata':'2017-06-24 23:27:17', 'plink':'https://blog.joostory.net/500', 'media':'pcweb', }]); var addEvent = function (evt, fn) { window.addEventListener ? window.addEventListener(evt, fn, false) : window.attachEvent('on' + evt, fn); }; var removeEvent = function(evt, fn) { window.removeEventListener ? window.removeEventListener(evt, fn, false) : window.detachEvent('on' + evt, fn);}; var ua = navigator.userAgent.toLowerCase(); var isIOS = /iP[ao]d|iPhone/i.test(ua); var contentExStat = function() { _tiq.push(['__content', 't_content_ex', { 'data_type':'usage' , 'meta': { 'c_id':'22084_500', 'c_title':'OpenGraph를 사용한 미디어 삽입', 'type':'article', 'author':'', 'author_id':'27867', 'cp':'Joo\'s Story', 'cp_id':'22084', 'regdata':'2017-06-24 23:27:17', 'plink':'https://blog.joostory.net/500', 'media':'pcweb', } }]); removeEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); }; addEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); </script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || []; window.roosevelt_params_queue.push({channel_id: "dk", channel_label: 'tistory'});</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async></script><script type="text/javascript">if(window.console!=undefined){setTimeout(console.log.bind(console,"%cTISTORY","font:8em Arial;color:#EC6521;font-weight:bold"),0);setTimeout(console.log.bind(console,"%c 나를 표현하는 블로그","font:2em sans-serif;color:#333;"),0);}</script><iframe style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//joo8111.tistory.com/api" id="editEntry"></iframe> <div class="#menubar menu_toolbar toolbar_rb"> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool"> <button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="22084" data-url="https://joo8111.tistory.com" data-device="web_pc"> <strong class="txt_tool_id">Joo's Story</strong> <em class="txt_state">구독하기</em> <span class="img_common_tistory ico_check_type1"></span> </button> </div> </div> <div class="#menubar menu_toolbar "></div> <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/0ccc8ebc82d8ddff2b5d35df8bbed2d6312aba8f/blogs/script/menubar.min.js?_version_=0ccc8ebc82d8ddff2b5d35df8bbed2d6312aba8f"></script> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div><div id="tistoryEtcLayer" class="layer_post"></div><div id="tistorySnsLayer" class="layer_post"></div></body> </html>