XE블로그에 페이스북 댓글창 달기

2011년 5월 2일

XE블로그에 페이스북 댓글창 달기에 대해 알아보기로 합니다.

그간 사용해왔던 socialXE를 지우고 페이스북에서 제공하는 댓글 플러그인을 사용하여 페이스북 댓글창을 달았습니다. 처음엔 트위터, 페이스북, 요즘, 미투데이 등 네 가지 SNS를 지원하던 소셜XE를 버리는 것이 좀 꺼림직했지만 반나절정도 지난 지금으로선 오히려 활발해진 것 같아 신기하기만 합니다. 주변에 의견을 구해본 결과로는 전에 소셜XE창을 봤을 땐 ‘이게 뭐야?’하는 느낌이었는데, 페이스북 댓글창을 보니 ‘댓글 달라는거구나~’하는 느낌이 오더랍니다. 직관성에 있어서 페이스북 댓글창이 한 수 위인 걸까요?

1. 코드받기

     – 먼저 페이스북 댓글 창을 달기 위한 코드를 받으러 가야할 곳이 있습니다. 바로 이곳입니다. >> https://developers.facebook.com/docs/reference/plugins/comments/

이런 표가 하나 나오는데 이러한 방식으로 적어주면 됩니다. 맨 위에 블로그 주소는 XE로 만든 블로그의 경우(XE가 설치된 경로에 따라 다르겠지만) 대체적으로 “http://블로그주소/xe/”로 적어주세요. 그래야 나중에 페이스북에 링크가 제대로 걸립니다.

 2. 주소치환자에 주의 – 블로그 전체에 몽땅 같은 댓글적용 방지

    –  ’Get Code’단추를 눌러 받은 코드는 XE에 바로 적용시킬 수 없습니다. 이 상태 그대로 올리면 블로그 전체에 똑같은 댓글이 포스트마다 한꺼번에 올라갑니다. 글마다 각각 다른 댓글이 적용되게 하려면 ‘주소치환자’라는 것을 블로그주소옆에 써줘야합니다.

다음은 XE블로그에 적용하기 위해 수정한 코드입니다.

<!– 페이스북 댓글 시작 –>

<script src=”http://connect.facebook.net/ko_KR/all.js#xfbml=1″>

</script><fb:comments href=”fruitfulife.net/xe/{$oDocument->document_srl}“num_posts=”3″ width=”550″>

</fb:comments>

<!– 페이스북 댓글 끝 –>

주황색으로 표시된 곳엔 여러분의 블로그 주소를 써주시고,
노란색 ko_KR은 눈치채셨겠지만 한국어로 사용한다는 대목이니, 기존에 영어로한다는 en_US부분을 이렇게 바꿔주시면 됩니다.

중 요한 것은 연두색으로 표시된 곳인데요. 자신의 블로그 주소 뒤에 이 주소치환자를 앞뒤여백없이 써주셔야합니다. 여기가 티스토리와 다른 부분입니다. 티스토리 사용하시는 분들은 이곳에 라고 적어주시면 됩니다.

3. 파일수정

    – 이제 FTP프로그램을 가동시켜 사이트에 접속한 다음, XE>module>board>skin>’내가사용하는 스킨’으로 들어가 view_document.html을 내려받습니다. 텍스트에디터기로 다운받은 파일을 연 다음 페이스북 댓글창을 달고 싶은 위치에 위의 코드를 붙여주면 됩니다.

제 경우엔 엮인글(트랙백) 표시줄과 기존댓글창 사이에 넣어주었습니다.

4.업로드

    – 이번엔 FTP프로그램으로 다시 업로드시켜줍니다. (업로드하기 전에 ‘새로고침’을 한 번 해주는것 잊지마세요 그렇지 않으면 바꾸기 전에 내려받은 그상태 그대로 업로드 될 수 있습니다.)기존 파일은 어떻게 하겠냐고 묻는 창이 뜨면 당연히 ‘덮어쓰겠다’를 클릭하면 됩니다.

5. 확인

    – 이제 블로그로 돌아와 댓글창이 제대로 달렸나 확인해보세요. 크기가 마음에 들지 않으면 width=’숫자’를 조절하면 됩니다.

 프로그램에 대해서는 정말 아무것도 모르는 제가 달아서 사용하고 있으니 여러분들은 더 잘하실 수 있을거라 생각됩니다. 성공하셔서 블로그 활성화하시고 즐거운 블로깅하세요~ ^^