# 댓글 플러그인 | 위젯 (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> <!-- 자세한건 아래 RRA 의 Facebook 소셜 플러그인 (social plug-in) 링크 참고. --> <!-- <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // 첫번째 javascript (=first js =fjs) 앞에 facebook 댓글 js를 삽입하는 script. </script> --> <!-- 복잡하게 위와같이 할 필요없이 그냥 이렇게 넣어도 되는듯. --> <script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script> ```/ 아래와 같이 나타남.
## 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> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'kipid'; // required: replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); // 이것도 그냥 js 삽입하는 코드. </script> --> <!-- 그냥 간단하게 --> <script src="//kipid.disqus.com/embed.js"></script> <!-- 이렇게 넣어도 될듯. --> <!-- 방문자가 browser 설정에서 JavaScript를 disable 해놨을 때 나타나는 메세지. --> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <!-- 요건 그냥 promoting. --> <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a> ```/ 현재 URL 기준으로 댓글을 나누기 때문에, 여러 URL 을 한 posting 에서 사용하면 (Tistory 가 그러함. 숫자 주소랑, 글자로 된 주소. 혹은 홈.) 댓글이 갈린다는 단점이 있기도... 사진이나 유투브 동영상도 쉽게 첨부 가능함. 링크만 간단히 넣어서 글을 쓰면 url 분석해서 처리해 주는듯. link 로 바꿔주든, 동영상으로 바꿔주든, 사진으로 바꿔주든. 글 목록 부분에서 댓글이 몇개가 달려있는지 보여주는데 쓰일 수 있는 JavaScript 는 따로 있으니 찾아보시길. 대충은 아래와 같이 입력하면 a link 안을 3 Comments 와 같이 바꿔줌. ```[.linenums.lang-html.scrollable] <a href="http://kipid.tistory.com/entry/Facebook-comment-test#disqus_thread">count?</a> <script src="http://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
저작자 표시 비영리 변경 금지
신고
Posted by 냥냥 kipid
comments powered by Disqus