블로그를 시작하기 전에 관련된 책을 좀 읽어보았는데, 네이버 블로그는 초보자가 시작하기 좋은 블로그고, 티스토리는 블로그를 조금 해본 사람이 하면 좋다는 내용이 있었습니다. 네이버 블로그는 블로그를 커스터마이즈할 수 없기 때문에 좀더 친절하게 기본 메뉴를 만들어두었지만, 변형해서 쓰는 게 불가능하고 티스토리는 아주 열린 블로그라 작정하고 만들기 시작하면 이것저것 고려해야 할 사항이 많으니 그런 이야기가 나온 게 아닐까 싶습니다.
저도 티스토리 블로그를 시작한 만큼 블로그 달인까지는 아니지만 남들 하는 정도로 뭔가 계속 시도해볼 생각이에요. 남들이 하던 거 중 그저 부럽기만 하던 게 바로 블로그 포스트 하단에 페이스북 댓글 창 삽입하는 거였습니다. 아직 작업 전인 제 블로그에서는 일반 티스토리 댓글 밖에는 지원이 안 되니까요. 일반 댓글 창에 댓글을 입력하면 티스토리 아이디로 표시가 되더라고요. 이제 페이스북 댓글 플러그인을 제 블로그로 옮겨와 볼게요.
일단 페이스북 포 디벨로퍼스 페이지(https://developers.facebook.com/docs/plugins/comments)에 접속합니다. 댓글을 달려면 코멘트 메뉴로 들어가야겠지요? 댓글 플러그인을 삽입할 수 있는 상세한 방법이 소개되어 있습니다.
댓글 플러그인 코드 생성 도구의 빈 칸을 하나씩 채워봅니다. 일단 블로그 주소를 첫 번째 칸에 입력하고, 너비는 100%를 입력합니다. 사실 처음에 이 너비 부분을 500px 등 다른 숫자로 입력했는데, 제 블로그랑 크기가 잘 맞지 않는 거 같아 찾아보니 이렇게 % 단위로 입력하라고 안내해주는 블로그 글을 발견했어요. 100%로 적용해보니 블로그 가로 사이즈에 맞게 잘 설정됩니다. 저처럼 헤매셨던 분들은 이렇게 입력해보세요.
게시물 수는 기본으로 5라고 표시됩니다. 이제 하단의 [코드 받기]를 클릭합니다.
어려워 보이는 코드 창이 나타나지만 초보자인 저도 따라 할 수 있을 정도로 간단하니 걱정하지 않으셔도 됩니다. 일단 저는 메모장에 2단계와 3단계 코드를 각각 복사해두었어요. 설명을 잘 읽어보면 2단계 부분의 긴 코드는 웹페이지의 <body> 코드 아래에 입력하는 거고, 3단계 부분의 짧은 코드는 댓글 창이 나타날 위치에 입력하는 겁니다.
[관리] 메뉴에서 [꾸미기]의 [HTML/CSS 편집]을 선택하여 코드 편집 창을 불러옵니다. 보통 왼쪽에는 블로그 화면이, 오른쪽에는 코드 편집 창이 나타납니다. <body> 코드는 </head>라고 헤드가 끝나는 부분에 보통 나타나지요. 저는 티스토리에서 제공하는 반응형 스킨을 사용하고 있어서 해당 위치가 21행이네요. 2줄 내려서 23행에 메모장에 복사해둔 긴 코드를 가져와 다시 붙여 넣었습니다.
이제 짧은 코드를 넣을 차례인데요, 티스토리 댓글보다 페이스북 댓글 창이 더 먼저 보였으면 해서 기존 댓글 창 위쪽에 코드를 삽입해보았어요. 대략 위치는 댓글이 표시되는 "area_reply" 부근으로 잡으면 될 것 같네요. 짧은 코드 2줄이 붙여 넣어진 모습입니다.
이제 상단 코드 창에 있는 [저장] 버튼을 클릭해 코드가 잘 적용되었나 확인해보겠습니다. 사실 왼쪽 창에서 미리 보기도 가능하다고 하는데, 저는 이런 코드를 다룰 줄 몰라서 그런지 왼쪽 화면은 코드를 붙여 넣고 빼고 하는 중에도 계속 블로그 첫 화면만 나타나더라고요. 코드가 틀렸다면 다시 찾아 지우면 되니까 일단 [저장] 클릭하고 블로그 포스팅 내에서 적용 여부를 확인했어요.
제가 써두었던 포스트 하단에 페이스북 댓글 창이 잘 표시됩니다. 위치를 지정한 대로 티스토리 댓글 창보다 위에 나타나네요. 티스토리 블로그에 페이스북 댓글 플러그인 삽입하기 완성! 이제 열심히 블로그 작성해서 많은 분들과 소통하는 일만 남았습니다. 하나씩 꾸미는 재미가 솔솔한 티스토리 블로그 만들기~
'IT 학습 > 블로그' 카테고리의 다른 글
| 블로그 만들기 - 티스토리에 인터파크 책 정보 플러그인 삽입하기 (0) | 2016.12.19 |
|---|---|
| 블로그 만들기 - 블로그 포스트에 페이스북 좋아요 버튼 달기 (0) | 2016.12.15 |
| 블로그 만들기 - 블로그 예약 포스팅 올리기 (0) | 2016.12.14 |
| 블로그 만들기 - 카테고리 설정 및 글 설정 (0) | 2016.12.13 |
