네이버 블로그 같은데서 링크를 붙여 넣으면, Open Graph 를 이용해서, 이미지와 텍스트를 불어와 저장하는 기능이 있는 게시판 스킨입니다. 

능력자 분들은 다양한 방법으로 가능하게 구현하실 수 있겠지만, 저는 그정도는 아니라,, 

https://opengraph.io/ 

위 사이트에서 API 키를 받아서 사용해야만 가능한 Skin입니다. 

그래서 아직 부족한 부분이 많아서, 팁자료실에 올려봅니다. 

제목 하단의 링크버튼을 클릭하면, 링크를 넣을 수 있도록 창이 나오고, 

링크를 붙여넣은 다음 우측 돋보기 버튼을 클릭하면, 해당 주소의 open graph 정보를 읽어와서, 

화면에서 뿌려줍니다. 

이때 이미지 사이즈를 체크해서, 만약 정사각형의 이미지일 경우는 이미지가 좌측으로

표시되는 작은 배너가 생성됩니다. 

그리고 적용 버튼을 클릭하면, 본문으로 배너가 들어갑니다. 

본문으로 들어간 배너에 마우스를 오버하면, 좌측/우측/가운데 정렬이 가능하고 삭제도 가능합니다. 

(* 편집은 불가능합니다.)

저장을 하면, view 화면에서 배너를 확인할 수 있습니다. 

적용방법이 좀 복잡한데, 

일단 첨부파일을 받으시면, 

linkView 폴더와 smarteditor2 폴더가 있습니다. 

linkView 폴더는 스킨파일이라서, 그누보드 skin 디렉토리에 업로드 하시면되고, 

smarteditor2폴더는 plugin/editor/smarteditor2 (그누보드 스마트에디터) 디렉토리에 업로드하시면

됩니다. 기존의 에디터와 충돌나지 않도록 js 및 html 파일들을 구분하여 작업하였습니다. 

그리고 

linkView 폴더내의 script.php 최상단에 $apiCode 에 https://opengraph.io/  사이트에서 받은 API 코드를 입력해야 가능합니다. 

(한달 5,000건까지는 무료 / 한시간에 최대 10건까지) 

부족한 부분

 - 생성한 배너는 본문에 append 형식으로 들어가기 때문에 그 중간에 넣는다던지

    현재 커서위치에 넣는다던지의 기능이 되지 않습니다. 

 - 본문에 글을 작성 후 키보드로 이동할때 배너 부분이 건너뛰기가 되지 않습니다. 

 - 다음블로그의 경우는 IFRAME > IFRAME 형식이라,, 제대로 링크가 불러와지지 않습니다. 

그외 발견하지 못한 버그들이 있을 것으로 예상됩니다. 

스킨과 팁자료실은 실제 자료들의 공유역할도 있지만, 다른 분들에게 영감이나 아이디어를 주는 곳이라는 생각도 듭니다. 저 역시 많은 아이디어를 얻기도 하구요. 

그런의미로 봐주시면 감사하겠습니다!