Open Graph는 페이스북이 공유되는 외부 문서들을 효율적으로 관리하기 위해 고안한 프로토콜이다. 처음엔 <title> 이나 이미 존재하는 메타태그들로 가능한 걸 왜 이렇게 하나 싶었는데 점점 활용이 늘어나서 동영상, 오디오, 슬라이드 쇼, 음악 등등 별 것을 다 할 수 있게 되었다.
요즘엔 블로그에서도 참조 문서를 넣을 때 og를 사용해서 미리보기같은 모습으로 넣는 것을 지원한다. 브런치, 포스트가 할때만 해도 그냥 하나보다 했는데 네이버 블로그가 해버리니 마치 반드시 필요한 기능같은 것이 되어버렸다. 사람들이 티스토리에는 왜 없냐고 자꾸 물어본다. 별다른 방법이 없어서 미루다가 tinymce에서는 이런 object를 다루기가 쉬워보여서 도전해보았다.
기본 타입
기본 타입은 og:image, og:title, og:description 를 사용해서 ui를 그럴 듯하게 만든 타입이다. 사실 이것 하나면 된다. 내가 생각해도 대부분 이걸로 커버가 될 것 같다.
동영상 타입
동영상 타입은 타입이라고 하니까 좀 그런데... 걍 동영상이다. og:type이 video면 og:video:url을 iframe으로 넣는다. 그러고보니 그간 tinymce에 동영상 넣는 기능도 안 넣어뒀었다. 이걸로 해결!
tinymce-plugin-opengraph
tinymce-plugin-opengraph라는 플러그인을 만들었다. npm에도 등록했다. 플러그인 이름은 opengraph이고 command는 mceOpengraph, 단축키는 meta + o다. dialog로 삽입 ui가 뜨는데 생긴건 이렇다.
또 이렇게 막상 넣고보니 너무 좋다. 클립보드 이미지 붙여넣기만큼이나 자주 사용할 것 같다. 그리고 단축키를 만든건 정말 잘한 것 같다. 정말 편하다.
(Tistory Editor 0.3.7부터 사용가능)
