오늘 드디어 저도 티스토리 블로그에 페이스북 좋아요 버튼을 달아보았습니다. 바로 위에 보이지요? ㅎㅎ
그간 별 필요성을 못 느꼈던 거였는데 이번에 페이스북 페이지를 만들게 되면서 한 번 달아보았는데요. 생각보다 어렵지 않더라구요~ 하지만! 행여나 다음번에 다시 작업을 해야 할 때 검색하기 불편할 것 같아 그 방법을 기록해두려 합니다. 관심 있었던 분들에겐 또 하나의 정보가 되겠지요 ^^
우선 페이스북 개발자 페이지로 이동합니다. 저의 경우 페이지 위젯을 달려다가 현재 블로그와 어울리지 않아서 단순히 좋아요 버튼만 달아보기로 했습니다. 그래서 링크도 좋아요 버튼 플러그인을 달 수 있는 주소로 남겨봅니다.
https://developers.facebook.com/docs/plugins/like-button
링크를 타고 이동해서 스크롤을 조금만 내려보면 좋아요 버튼 구성 도구를 볼 수 있습니다.
여기에서 좋아요를 넣을 블로그나 페북페이지 주소를 넣고, 원하는 레이아웃과 버튼 크기를 설정한 후 코드를 받으면 되는데요
아래에 미리보기 화면이 나오므로 이것저것 눌러본 후 입맛에 맞는대로 결정하시면 되겠습니다.
레이아웃, 액션유형, 버튼크기의 설정내역을 보여드렸고요, 설정이 끝났다면 코드받기 버튼을 눌러봅니다.
일반적인 자바스크립트 코드가 나옵니다. 저와 같이 티스토리 블로그에 페이스북 좋아요 버튼 넣기를 하실거라면 이 과정을 따르면 됩니다.
2단계 내용인 <body> 태그에 삽입할 부분은 해당 블로그 스킨의 html 편집창으로 이동해서 넣어주고 3단계 내용인 플러그인이 위치할 곳에 삽입할 코드는 원하는대로 스킨에 넣거나 본문에 넣거나 하면 됩니다.
참! 자바스크립트를 사용할 순 없지만 아이프레임을 넣을 수 있는 블로그라면 아이프레임 탭을 선택하여 해당 코드를 사용하세요.
티스토리 관리 > 꾸미기 영역의 HTML/CSS 편집 창으로 이동합니다.
스크롤을 조금만 내려보면 body 태그가 보일겁니다. 영어가 많아서 찾기 힘들다면 Ctrl+F를 눌러 body를 입력하고 찾아도 됩니다. 이렇게 찾은 body 태그의 아랫줄에 아까 2단계에서 보았던 코드를 붙여넣으세요.
그리고 3단계 코드는 내가 원하는 곳에 넣어주면 되는데, 혹시 본문의 상단이나 하단에 넣어주고자 한다면 Ctrl+F 로
오늘 드디어 저도 티스토리 블로그에 페이스북 좋아요 버튼을 달아보았습니다. 바로 위에 보이지요? ㅎㅎ
그간 별 필요성을 못 느꼈던 거였는데 이번에 페이스북 페이지를 만들게 되면서 한 번 달아보았는데요. 생각보다 어렵지 않더라구요~ 하지만! 행여나 다음번에 다시 작업을 해야 할 때 검색하기 불편할 것 같아 그 방법을 기록해두려 합니다. 관심 있었던 분들에겐 또 하나의 정보가 되겠지요 ^^
우선 페이스북 개발자 페이지로 이동합니다. 저의 경우 페이지 위젯을 달려다가 현재 블로그와 어울리지 않아서 단순히 좋아요 버튼만 달아보기로 했습니다. 그래서 링크도 좋아요 버튼 플러그인을 달 수 있는 주소로 남겨봅니다.
https://developers.facebook.com/docs/plugins/like-button
링크를 타고 이동해서 스크롤을 조금만 내려보면 좋아요 버튼 구성 도구를 볼 수 있습니다.
여기에서 좋아요를 넣을 블로그나 페북페이지 주소를 넣고, 원하는 레이아웃과 버튼 크기를 설정한 후 코드를 받으면 되는데요
아래에 미리보기 화면이 나오므로 이것저것 눌러본 후 입맛에 맞는대로 결정하시면 되겠습니다.
레이아웃, 액션유형, 버튼크기의 설정내역을 보여드렸고요, 설정이 끝났다면 코드받기 버튼을 눌러봅니다.
일반적인 자바스크립트 코드가 나옵니다. 저와 같이 티스토리 블로그에 페이스북 좋아요 버튼 넣기를 하실거라면 이 과정을 따르면 됩니다.
2단계 내용인 <body> 태그에 삽입할 부분은 해당 블로그 스킨의 html 편집창으로 이동해서 넣어주고 3단계 내용인 플러그인이 위치할 곳에 삽입할 코드는 원하는대로 스킨에 넣거나 본문에 넣거나 하면 됩니다.
참! 자바스크립트를 사용할 순 없지만 아이프레임을 넣을 수 있는 블로그라면 아이프레임 탭을 선택하여 해당 코드를 사용하세요.
티스토리 관리 > 꾸미기 영역의 HTML/CSS 편집 창으로 이동합니다.
스크롤을 조금만 내려보면 body 태그가 보일겁니다. 영어가 많아서 찾기 힘들다면 Ctrl+F를 눌러 body를 입력하고 찾아도 됩니다. 이렇게 찾은 body 태그의 아랫줄에 아까 2단계에서 보았던 코드를 붙여넣으세요.
그리고 3단계 코드는 내가 원하는 곳에 넣어주면 되는데, 혹시 본문의 상단이나 하단에 넣어주고자 한다면 Ctrl+F 로
를 찾아 그 위나 아래에 붙여넣어주면 됩니다.
물론, 위에 붙이면 본문 내용 위에 좋아요 버튼이 붙을 것이고, 아래에 붙이면 본문 내용 아래에 좋아요 버튼이 붙겠지요.
한가지 유의할 점은 티스토리에서 제공하는 모바일 스킨을 이용하는 경우, 모바일에서는 버튼이 보이지 않는다는 겁니다.
모바일에서도 반응형 스킨을 사용한다면 설정한대로 PC에서도 모바일에서도 다 보여질테고요.
티스토리 모바일 스킨을 사용하면서도 페북 좋아요 버튼을 달아두고 싶다면??
스킨에 넣어두지 말고 본문에 직접 넣으면 됩니다.
물론, 위에 붙이면 본문 내용 위에 좋아요 버튼이 붙을 것이고, 아래에 붙이면 본문 내용 아래에 좋아요 버튼이 붙겠지요.
한가지 유의할 점은 티스토리에서 제공하는 모바일 스킨을 이용하는 경우, 모바일에서는 버튼이 보이지 않는다는 겁니다.
모바일에서도 반응형 스킨을 사용한다면 설정한대로 PC에서도 모바일에서도 다 보여질테고요.
티스토리 모바일 스킨을 사용하면서도 페북 좋아요 버튼을 달아두고 싶다면??
스킨에 넣어두지 말고 본문에 직접 넣으면 됩니다.
