티스토리 블로그에 페이스북 좋아요 박스 설치 2

페이스북의 좋아요 버튼이나 좋아요 박스는 커다란 차이점을 가지고 있다. 좋아요 버튼은 티스토리의 각 글에 적용이 되어야 하며, 좋아요 박스는 페이스북의 페이지와 연동이 되야한다. 이 두가지 차이는 확실히 알고 있어야 한다.

좋아요 버튼은 기본적으로 내가 작성한 글을 SNS를 통해서 확산시키기 위한 목적이다. 방문자가 내 글에 좋아요 버튼을 누르면 그 내용은 그 사용자의 페이스북 타임라인에 올라가게 된다.

또한, 그 내용은 그 사용자와 친구 관계를 맺고 있는 사람들도 볼 수 있다. 관심이 있으면 클릭을 유도할 수 있는 매우 강력한 수단이다.

반면 좋아요 박스는 페이스북에 개설된 특정한 주제나 사이트 회사 등의 페이지 전체에 관한 좋아요를 관리할 수 있는 내용이다.

즉, 내 티스토리 사이트의 페이지를 페이스북에 개설해서 그 페이지에 대한 평가를 받을 수 있는 수단이다. 좋아요가 많은 페이지는 아무래도 사람들의 관심이 많이 끌고 있다는 방증이기 때문이다.

페이스북에서는 이러한 페이지의 좋아요 방문자를 모집하기 위한 공개적인 유료프로모션도 진행하고 있다.

또한 대부분의 페이스북 프로모션은 개별페이지에 대한 좋아요 누르기가 대부분이다.

그럼 이러한 좋아요 버튼 류의 버튼과 좋아요 박스류의 위젯을 티스토리에 적용해 보도록 하겠습니다.

첫째, 좋아요 버튼 류의 내 개별 글에 적용하는 버튼 달기

1. 페이스북에서 내티스토리 불로그의 좋아요 버튼 소스코드를 발급받는다.

페이스북 좋아요 버튼 코드 생성하기 글 참조 

2. 생성된 코드를 skin.htnl 에서 원하는 위치에 코드를 입력해 준다.

3. 입력된 코드에서 내 티스토리 블로그의 각 글에 개별적으로 적용할 수 있도록 치환자 '##_article_rep_link_##'를 추가해 준다. 이 내용은 매우 중요합니다. 이 치환자를 추가해 주지 않으며 모든 글에 단 한 가지만 적용됩니다.

페이스북에서 생성된 좋아요 버튼 코드는 대부분 아래와 같은 형식입니다.

여기에서 자신의 티스토리 블로그 주소 뒤에 위의 치환자를 추가해 주기만 하면 됩니다.

위 예제에서 보면, 내 블로그 주소인 "https://wooraky.tistory.com" 다음에 지금 현재 글 치환자를 첨가해 준 모습을 볼 수 있습니다.

이렇게 해주면 글별로 서로 다른 좋아요 버튼을 보실 수 있습니다.

둘째, 좋아요 박스류의 위젯 적용하기

1. 페이스북에서 작성한 페이지의 좋아요박스 코드를 작성한다.

2. 생성된 코드를 skin.html 에서 원하는 위치에 입력해 준다.

위 방식은 좋아요 버튼과 비교하면 매우 간단한 과정을 거치면 적용할 수 있습니다. 이유는 좋아요 박스는 페이스북의 페이지에 좋아요를 누른 페이스북 사용자를 그저 화면에 출력해 주는 역할만 하므로 내 티스토리에서 지금 어떤 글에 있는지는 신경 쓸 필요가 없기 때문 입니다.

지금 티스토리에서 어느 글에 있든지 좋아요 박스에 나타나는 좋아요 버튼을 누르면 그 내용은 페이스북에 개설된 페이지로 연결이 되기 때문입니다.

저 같은 경우, 좋아요 버튼은 각 글의 제목 왼쪽에 달았습니다.

좋아요 박스는 사이드바에 위젯 형태로 달았습니다.

두 가지 모두 반응형을 지원하며, 좋아요 버튼은 모바일에서는 보이지 않도록 했습니다.