텀블러(Tumblr)에 페이스북 버튼 달기
텀블러와 페이스북을 연동했으니, 이제 텀블러에 페이스북 버튼을 달아볼까요?
텀블러와 페이스북 연동 방법을 못 보신 분들은 아래 링크를 참고해주세요.
텀블러 사용법(Tumblr) - 텀블러와 페이스북 연동하기
1. 페이스북 버튼 만들기
버튼을 달려면 우선 버튼을 얻어야겠지요? 다음의 페이스북 페이지로 이동합니다
그러면 위와 같은 화면을 만나실 수 있는데요.
먼저 블로그 주소를 적어볼까요?
빨간 박스 안에 블로그 주소를 적으시면 됩니다.
그 후에 밑에 있는 선택 사항들을 만져보시면서 블로그에 적합한 버튼을 고르면 됩니다. 변경 사항은 파란 박스에 적용되어 나타납니다.
설정을 끝내셨으면 노란 박스에 있는 Get Code를 눌러주세요. 그러면 다음과 같은 코드 창이 나타납니다.
위의 창이 나타나셨다면 거의 다 했다고 볼 수 있습니다. 그러면 이제 텀블러에 좋아요 버튼을 달아볼까요?
2. 텀블러에 페이스북 버튼 달기
먼저 두 종류의 소스를 설명해드리겠습니다. 파란색 박스 안의 소스는 페이스북 버튼을 작동하게 하는 소스이고, 빨간색 박스는 페이스북 버튼 소스입니다. 각각의 소스를 어디에 넣어야 하는지 살펴볼까요? 텀블러에 들어가 HTML편집창을 켜주세요.
밑줄친 <head>가 보이시나요? 소스 바로 윗쪽에 있을 겁니다. 찾기 힘드시면 CTRL+F로 찾아주세요. 파란 박스 안의 소스를 이 <head> 바로 밑에 붙여넣어 주세요! 다음은 페이스북 버튼 소스 차례입니다.
여기서 잠깐!
텀블러에 페이스북 버튼을 옮기려면 조금 수정을 해줘야 합니다. 페이스북 버튼 소스를 보면 다음과 같죠?
<div class="fb-like" data-href="텀블러 주소" data-send="true" data-width="450" data-show-faces="true"></div>
이걸 이렇게 변경해주세요.
<div class="fb-like" data-href="{permalink}" data-send="true" data-width="450" data-show-faces="true"></div>
강조한 부분만 바꿔주시면 됩니다. 이렇게 수정하는 이유는, 고치지 않으면 좋아요 버튼이 그 포스팅이 아닌 텀블러 블로그 전체에 적용되기 때문입니다. 이제 수정된 주소를 원하시는 위치에 붙여넣으시면 됩니다. 원하시는 위치는 CTRL+F로 원하는 위치에 있는 문자를 검색해보고 그곳에 붙여넣는 식으로 하면서 찾아보세요! 저는 {/block:Video}와 {block:Audio} 사이에 넣었더니 잘 작동되는군요.
포스팅 아래에 좋아요 버튼이 붙은걸 보실 수 있습니다.
참, 혹시 영어 버튼이 마음에 안 드시거나 반대로 한국어 버튼이 마음에 안 드시는 경우
en_US 을 ko_KR 로 변경해주시면 됩니다. 한국어에서 영어로 바꿀 때는 반대로 하시면 되구요.
이걸로 텀블러(Tumblr)에 페이스북 버튼 달기 포스팅을 마치겠습니다. 저는 처음에 참 많이 헤맸었는데, 도움 되셨으면 좋겠습니다 ^^
'IT > 인터넷 이야기' 카테고리의 다른 글
| 텀블러(Tumblr) 사용법 - 쉐어(Share on Tumblr) 기능 사용하기 (9) | 2012.11.15 |
|---|---|
| 텀블러(Tumblr)의 귀여운 센스 - 예의를 아는 SNS (0) | 2012.11.13 |
| 텀블러(Tumblr) 사용법 - 텀블러와 트위터 연동하기 (0) | 2012.11.09 |
| 위스키의 종류로 본 블로그의 미래 (2) | 2012.11.07 |
| 텀블러(Tumblr) 사용법 - 텀블러와 페이스북 연동 방법 (11) | 2012.11.06 |
| 텀블러(Tumblr) 한글 어플 다운 (7) | 2012.11.04 |
| 블로그(blog)란? - 블로그의 정의, 역사, 종류 (0) | 2012.11.04 |
