댓글 플러그인 | 위젯 (SNS comment plug-in | widget)

# 댓글 플러그인 | 위젯 (SNS comment plug-in | widget) - Facebook, DISQUS SNS 에서 댓글 위젯을 제공해주는 경우가 많음. 뭐 직접 제공해주는 것은 아니더라도 뭔가 API 같은건 공개해줘서 다른 사람이 댓글 위젯을 만들 수 있게 해준듯. 댓글에서 MathJax 수식 댓글 테스트 하려고 수식 \sum_i 하나 넣음. 댓글에서 수식을 쓰려면 Latex 형태의 수식을 다음과 같이 enclose 해서 넣으면 됨 . :: \( inline math \), \[ outline math \]. ## PH

• 2015-12-17 : To SEE.
• ? : First posting.

## TOC ## Facebook comment test Code는 다음과 같음 . (그런데 페이스북에서 주는 API 살펴보면 얘네 coding 너무 못함;;;;; 위젯/플러그인 디자인을 못하는건가 ㅡ..ㅡ;;;;; 뭔 widget 을 이따구로 만들었지.) ```[.linenums.lang-html] <!-- 아래 div.fb-comments 에 댓글 위젯이 삽입 됨. --> <div class="fb-comments" data-href="http://kipid.tistory.com/entry/Facebook-comment-test" data-width="100%" data-numposts="5" data-colorscheme="dark"></div> <!-- style="max-width:100%; min-height:500px; overflow:auto" --> <div id="fb-root"></div> <div class="cboth"></div> <script async defer src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2"></script> ```/ 아래와 같이 나타남. (가로길이가 100% 일때도 있고, 작게 나올때도 있는듯. 페이스북은 위젯을 뭐 이따구로 만들었지? ㅡ..ㅡ 엉망이네.)

## DISQUS 댓글 위젯이 여러개 있지만, 요거 좋은듯. 기본 스타일도 괜찮고 기능들도 많고, (Top commenter 보여주는 건 감출 수 있는 설정 좀 있었으면 좋을듯), 다른 SNS 계정으로 로그인도 가능한거 같고. 익명으로도 댓글 가능하고. ### js + HTML code Code는 (kipid 부분은 'disqus_shortname' 이니 본인이 발급받은 id로 입력.) ```[.linenums.lang-html] <!-- 여기에 댓글 위젯이 삽입 됨. --> <div id="disqus_thread" style="background:black; padding:1em"></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/ /* var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; */ (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://kipid.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> ```/

현재 URL 기준으로 댓글을 나누기 때문에, 여러 URL 을 한 posting 에서 사용하면 (Tistory 가 그러함. 숫자 주소랑, 글자로 된 주소. 혹은 홈.) 댓글이 갈린다는 단점이 있기도... 사진이나 유투브 동영상도 쉽게 첨부 가능함. 링크만 간단히 넣어서 글을 쓰면 url 분석해서 처리해 주는듯. link 로 바꿔주든, 동영상으로 바꿔주든, 사진으로 바꿔주든. 글 목록 부분에서 댓글이 몇개가 달려있는지 보여주는데 쓰일 수 있는 JavaScript 는 따로 있으니 찾아보시길. 대충은 아래와 같이 입력하면 a link 안을 3 Comments 와 같이 바꿔줌. ```[.linenums.lang-html.scrollable] <a href="https://kipid.tistory.com/entry/Facebook-comment-test#disqus_thread">count?</a> <script src="https://kipid.disqus.com/count.js" async></script> ```/ ### Settings (기본 한글 폰트가 이상하니까 바꾸시길.) Settings 은 https://kipid.disqus.com/admin/settings/general/ 가셔서 적당히 하시면 됨. 기본 한글 폰트가 이상하니까 Sans-serif 로 바꾸시길. 글씨 크기도 적당히 조정. ## 그 외 이 외에도 많은거 같은데... 귀찮. 별로 좋아보이는것도 없고. 패스. ## RRA

1. Facebook 소셜 플러그인(social plug-in); 계속 버전 업이 되는듯 하니. 항상 최신 코드를 체크하시길. 몇개월 전만해도 data-width="100%" 같은 설정은 없었던걸로.
2. DISQUS.com; and Add DISQUS to your site
3. kipid's blog - 인터넷, Web, HTML, 블로그에서 수식 사용하기 (Equation or math in HTML, blog)