DISQUS 소셜 댓글 달기
블로그를 방문하다보면 종빈이형 블로그처럼 댓글창이 표시되는 걸 종종 봤습니다. 페이스북이나 트위터, 구글+ 등등 다양한 서비스로 로그인이 가능하고 댓글도 모아 보여주는 신기한 기능(?) 때문에 눈여겨 보고 있었는데요, 내친김에 저도 한 번 달아보기로 했습니다.
멋진 소셜 댓글 창의 정체는 DISQUS에서 지원하는 위젯인데요, 간단히 회원가입만 하면 웹사이트용부터 시작해서 워드프레스용 코드까지 클릭만으로 생성해줍니다. 저는 아무대나 붙여넣을 수 있는 Universal Code를 선택해서 코드를 만들었는데요, 최종 코드는 아래와 같이 두 가지로 나왔습니다.
첫 번째 코드는 DISQUS 댓글 위젯을 표시해주는 코드입니다. HTML의 Body 내부 중에 표시되길 원하는 곳에 붙여 넣으면 됩니다. 코드는 제가 생성한 코드니 실제로 위젯을 다실 분은 직접 생성한 코드를 붙여넣으세요. ^^;;;
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'writersnote'; // 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);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>그리고 두 번째 코드는 관련된 댓글을 실제로 로딩해주는 부분인데요, 역시 적당한 곳에 붙여넣으시면 됩니다. 저는 HTML의 Body 가장 밑에 붙여넣었어요. ^^;;;;
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'writersnote'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>실제로 로딩되는 예제는 종빈이형 블로그나 Writer's Note의 아래쪽을 보시면 됩니다. ^^
그럼 즐거운 명절 되세요 ^^)/~
'프로그래밍(Programming)' 카테고리의 다른 글
| 마크다운(Markdown)으로 플리커 사이트의 이미지 삽입하기 (5) | 2014.02.04 |
|---|---|
| cc1plus: all warnings being treated as errors 해결법 (0) | 2014.02.03 |
| 안타까운 오픈소스 프로젝트(libHWP)가 사라졌군요. ㅠㅠ (2) | 2014.01.27 |
| 파이썬(Python) 장고(Django)에서 다른 템플릿(Template) 또는 html 포함시키기 (2) | 2014.01.26 |
| 구글 앱 엔진(Google App Engine)에 로그인 기능 넣기 (2) | 2014.01.24 |
