내용
- Like Button 추가
- iFrame 을 사용하지 않고 XFBML 을 사용
Develop Application을 추가해서 Application ID를 발급
Application ID 발급
아래 링크를 통해 Application ID를 발급받을 수 있습니다.
블로그 스킨을 수정
아래 코드는 Textcube 기준으로 작성되었습니다.
네임스페이스를 추가
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
설명 :
보통 스킨파일(skin.html)의 위쪽 두,세번째 라인 정도에 작성되어 있을 것이므로 xmlns:fb="http://www.facebook.com/2008/fbml" 만 추가해주시면 될 것입니다.
Facebook javascript 로드하는 코드를 추가
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '본인의 Application 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>
설명 :
<body> 바로 다음에 위의 내용을 넣어주시면 됩니다.
본인의 Application ID를 입력해야 합니다 부분에 자신의 Application ID 를 입력해주셔야 합니다.
적당한 위치에 Like Button을 로드하는 코드를 추가
<fb:like href="http://본인의블로그주소를입력해야합니다[##_article_rep_link_##]" layout="button_count" font="trebuchet ms"></fb:like>
설명 :
위 코드는 Social Plugins 에서 원하는 설정값을 선택하여 만들수 있습니다.
스킨 파일(skin.html)에서 ##_article_rep_desc_## 라고 검색하시면 버튼을 추가할 위치를 쉽게 잡으실 수 있을 듯합니다.
본인의블로그주소를입력해야합니다 항목에는 현재 자신의 사이트에 해당하는 도메인을 입력해주시면 됩니다.
저의 경우 bbon.kr을 입력해서 사용중입니다.
기본적으로 본인의 정보를 기입해야한는 부분을 입력한 후 위의 코드를 스킨파일(skin.html)에 수정, 추가하면 바로 동작해야 합니다.
확인
작업 후 확인하셔할 것은 Like 버튼을 클릭했을때 현재 포스트의 주소가 정확하게 인식되고 있는지를 확인해보셔야 합니다.
이제 본인이 작성한 유용한 글을 다른 분들이 Facebook으로 가져가기 쉬운 기능을 추가했습니다.
좋은 컨텐츠를 블로그에 게시하시면 전세계 Facebook 사용자에게 공유되겠죠.
참조
이 사이트는 광고를 포함하고 있습니다.
광고로 발생한 수익금은 서버 유지 관리에 사용되고 있습니다.This site contains advertisements.
Revenue generated by the ad servers are being used for maintenance.