페이스북 좋아요 버튼 워드프레스 블로그에 달기

페이스북 좋아요 버튼 워드프레스 블로그에 달기

페이스북 좋아요 버튼 워드프레스 블로그에 달기
안녕하세요. 블로그 달과 바람입니다. 오늘은 워드프레스 블로그 포스트에 페이스북 좋아요 버튼을 다는 방법을 알아 보도록 하겠습니다. 워드프레스가 아니라 티스토리나 기타 설치형 블로그라면 도움이 되실겁니다. 워드프레스를 사용하시는 분들이라면 페이스북 플러그인을 활용해서 피드를 가져오는 위젯을 사용하는 방법은 많이 아실텐데요. 블로그 포스트에 좋아요 버튼을 다는 방법은 쉽지 않은 것 같습니다. 정보를 검색해 봐도 이해가 잘 안되거나 테마에 따라 어디다 적용을 해야 하는 지 헤깔리는 경우도 많습니다. 

 

페이스북 좋아요 버튼 워드프레스 블로그에 달기
페이스북 좋아요 버튼 워드프레스 블로그에 달기

달과 바람 블로그 포스트 하단에 보시면 sns 공유 버튼과 함께 페이스북 좋아요 버튼이 활성화 되어 있는 것을 보실 수 있습니다. 이 버튼을 활성화 하려면 페이스북 개발자 사이트에 접속해서 코드를 받아 붙여 넣어야 합니다. 운영하시는 페이스북 페이지나 웹사이트의 주소를 기반으로 버튼을 만들 수 있습니다. 로그인과 앱을 만든 후 버튼을 만들어야 제대로 동작을 합니다. 그렇지 않은 경우엔 공유하기가 오류가 나는 경우가 있습니다. 앱을 만드는 방법은 어렵지 않으니 여기서 따로 설명드리진 않겠습니다.

 

좋아요 버튼 만들러 바로가기

 

페이스북 좋아요 버튼 워드프레스 블로그에 달기
페이스북 좋아요 버튼 워드프레스 블로그에 달기

페이스북 개발자 사이트로 가셔서 문서 > 좋아요 버튼 > 좋아요 버튼 구성 도구를 클릭하거나 아래로 스크롤을 내리면 도구가 보입니다.

 

페이스북 좋아요 버튼 워드프레스 블로그에 달기
페이스북 좋아요 버튼 워드프레스 블로그에 달기

1번. 페이스북 페이지 주소나 웹사이트 주소를 넣습니다. 각 포스트마다 좋아요를 따로 활성화 시키고 싶다면 미리 기입되 있는 주소를 지우고 비워 둡니다.

2번. 플러그인 사이즈입니다. 원하시는 사이즈가 없거나 반응형 웹이라면 비워 둡니다.

3번. 아래 미리 보기 화면에서 확인이 가능한 디자인을 선택할 수 있습니다. 4가지의 디자인이 있고, 선택할 때마다 아래 미리보기에서 보여 줍니다.

4번. 좋아요와 추천하기 두 가지 중 선택이 가능합니다.

5번. 버튼 크기를 선택합니다. small과 large가 있습니다.

기타. 체크 박스에 체크를 하면 공유하기 버튼을 추가 삭제, 친구 프로필 사진을 표시하거나 제거 할 수 있습니다.

 

페이스북 좋아요 버튼 워드프레스 블로그에 달기
페이스북 좋아요 버튼 워드프레스 블로그에 달기

설정 후 코드 받기를 클릭하시면 코드가 생성이 됩니다. 로그인과 내앱이 활성화 돼있지 않다면 1단계가 활성화 되지 않고, 버튼이 제대로 동작하지 않을수 있습니다. 저는 공유하기가 오류나는 현상을 경험했습니다.

페이스북 페이지나 웹사이트 주소가 고정인 버튼을 만들려고 한다면 3번 iframe 탭을 선택해서 코드를 복사해서 위젯이나 버튼을 생성하고 싶은 곳에 붙여 넣으면 됩니다. 숏코드를 활용해서 포스트에 넣으셔도 되고요. 이 코드는 url을 공백으로 두었을 경우엔 활성화가 되지 않습니다.

각각의 페이지에 버튼을 넣으려는 경우엔 위의 1번의 코드를 body 태그 안에 넣고, 2번 코드를 플러그인을 표시할 위치에 넣으면 됩니다.

문제는 여기서 생기는데요. 테마에 따라선 body 태그를 찾기 힘들 수가 있습니다. 포스트마다 각각의 버튼을 생성하려고 하는데 사이드바 위젯에 넣는다면 원했던 결과가 아니고 말입니다. 이런 경우엔 어떻게 하는 것이 좋을까요? 저도 한참을 고생했습니다. 테마 소스를 뒤져 가면서 여기저기에 붙여 넣어 보기를 반복했었죠.

하지만 그럴 필요가 없이 간단히 플러그인으로 해결했습니다. 약간 변칙이라면 변칙인데요. 애드센스 광고를 넣는 플러그인을 활용했습니다. 바로 Ad Inserter 플러그인을 사용했죠. 사용방법은 따로 쓰지 않고 링크를 남기도록 하겠습니다. 

 

Ad Inserter 워드프레스 애드센스 플러그인

 

Ad Inserter 플러그인을 설치하고 활성화 하면 코드를 넣고 원하는 곳에 광고를 게제하듯 원하는 곳에 버튼을 위치할 수 있습니다. 이 플러그인은 굳이 애드센스 광고 뿐 아니라 다른 광고나 이번 경우처럼 코드를 넣을 수도 있기에 활용도가 매우 좋은 것 같네요. 코드를 넣으실 때 1번과 2번 코드를 한 번에 넣고 활성화 해도 됩니다.

그럼 이상으로 워드프레스 블로그 포스트에 페이스북 좋아요 버튼 다는 방법에 대해 알아 보았습니다. 도움이 되셨기를 바라며 마치겠습니다. 감사합니다.