이제 블로거의 xml 파일을 변경할 차례이다. 블로거는 워드 프레스와는 달리 로직을 구현하는 php 방식을 사용하지 않고 직접 xml 파일로 코딩되어 있으므로 xml 파일을 수정하는 것이다.
브라우저 창에
https://draft.blogger.com/home?pli=1
라고 입력하면 아래와 같이 블로그의 드래프트 화면 을 얻을 수 있다
여기서 탬플릿 메뉴를 선택한다.
-
https-draft.blogger.com-home-pli 주의할 것이 있다. HTML 편집을 누르기 전에 혹시 실수로 문제가 생길 경우를 대비해서 1) XML 파일을 백업 받아두자.
Blogger-template-window 
template-saving-renamiming-filename 사용하는 브라우저에 따라서 조금씩 달라질 수 있지만 파일명을 입력하는 화면이 나온다. 나중에라도 이 백업본으로 다시 되살릴 필요가 있을 수도 있는데 디렉토리와 파일명을 default로 하게 되면 나중에 파일을 찾기 힘들어 지므로 자동으로 부여된 것을 쓰지 말고 반드시 별개로 입력하도록 하며 저장 디렉토리도 ‘download’가 아닌 별개의 back-up 디렉토리를 생성하여 저장하도록 하자.
자 이제 html 편집 버튼을 눌러도 좋다.
Blogger-facebook-comment-code-moderation-1 가장 처음에 할 일은 ‘ <html b:’ 라고 시작하는 문장의 맨뒤 ‘ >’ 괄호 닫기의 앞의 위치에
xmlns:fb=’http://www.facebook.com/2008/fbml’
라고 입력하는 것이다.. (참고: 박스 안의 텍스트를 그대로 카피해서 넣으면 편리하다.)
Blogger-facebook-comment-code-moderation 다음에는 그림과 같이 태그의 바로 앞에
"item"'> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='홈페이지 이름’property='og:site_name'/><meta content='fb_app_ID' property='fb:app_id'/> <meta content='fb_profile_ID' property='fb:admins'/> <meta content='article' property='og:type'/> <!-- Insert for Facebook comments by aesop -->(update : 위의 코드는 사이트를 이전하고 빠진 그림을 다시 넣는 과정에서 텍스트를 건드렸기때문에 그대로 긁어서 붙여넣기해도 좋을지 자신이 없다. )
라고 적어 넣는다. 문장의 맨앞과 뒤에 파란색의 라인은 나중에 끼워넣은 코드를 찾기 쉽게하기 위하여 식별자로 넣은 것이다. 참고로 언급하자면 <!– –> 이 이런 모양의 괄호 안의 내용은 아무런 기능을 하지 못하고 사람의 눈에 만 보이는 단순한 텍스트일 뿐이다.
‘홈페이지 이름’ 은 자신이 정한 브로그의 이름이다. 대개 브로그 헤드에 뜨는 것을 적으면 된다. ‘fb_app_ID’ 는 앞에서 페이스북 앱을 등록했을때 페이스북에서 부여해준 부여해준 앱 고유번호를 적는다. ‘fb_profile_ID’란에는 페이스북에 로긴 한 상태에서 자신의 프로필 사진이나 이름을 입력했을때 주소 입력 창에 뜨는 텍스트 (https://www.facebook.com/fb_profile_ID) 중에서 맨뒤의 것만 입력한다. (즉 자신의 페이스북 아이디 )
<body > 구문 뒤에는 Java script SDK 를 넣는다.
Blogger-facebook-comment-code-moderation-java-script-SDK <!– JaVa script SDK Insert for Facebook comments by aesop –>
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘fb_app_ID‘,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/ko_KR/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
<!– Java script SDK Insert for Facebook comments by aesop –>
앞의 굵은 숫자는 역시 fb_app_ID를 적어 넣는다. 뒤의 파란색 굵은 글자 ‘ko_KR’은 언어_지역명을 의미한다. 혹시 나중에 다른곳에서 ‘en_US’ 라는 코드를 만난다면 ‘ko_KR’로 바꿔 넣어야할 경우도 있으므로 알아두자
마지막으로 코멘트 박스를 표시하는 구문을 넣는 차례이다.
Blogger-facebook-comment-code-for-comment-template-box <b:if cond=’data:blog.pageType == "item"’>
<script src=’http://connect.facebook.net/ko_KR/all.js#xfbml=1’/>
<div><fb:comments width=’500‘ expr:title=’data:post.title’ expr:href=’data:post.url’ expr:xid=’data:post.id’/></div>
</b:if>이 구문의 위치에 따라서 박스의 위치가 결정되므로 몇 번의 테스트를 거쳐서 적당한 자리에 넣는다. 파란색 숫자 ‘500’는 댓글 창의 폭 방향 크기를 픽셀 단위로 나타낸 것이다. 자신의 취향에 따라서 바꿔 넣을 수 있다. 테스트는 반드시 저장버튼을 누른 후에 진행해야 하며 저장이 이삼십초 이내로 끝나지 않는다면 구글 서버나 네트워크 상태가 좋지 않아서 저장이 제대로 되지 않았을 가능성이 높으므로 잠시 기다렸다가 다시 저장하는 것이 좋다.
‘ctrl-f ‘를 눌러서 검색 창을 띠운 후에 ‘post-footer-line-3’를 검색하여 그 보다 아래 위치에 넣는다면 대부분 무방할 것이지만 경험에 의하면 대체로 ‘postQuickEdit’ 보다는 위에 위치하는 것이 좋다.
comment-template-window-in-Blogger 위 그림에서 좌측의 경우는 post 글 밑에 블로거에서 자체 제공하는 공유 버튼 등의 위젯박스 안에 넣은 것이다. 블로거 자체 댓글박스는 푸른색 박스 바로 밑에 위치하게 되므로 필자는 우측의 경우처럼 분리하여 넣었다.
(다음 글에서 계속….)
소셜댓글
One thought on “블로거에 페이스북 댓글 설치하기 – (2) xml 파일 코드 수정”