IT Story

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

검이불루 2015. 1. 30. 06:30
반응형

이왕 시작한 블로그 SNS를 적극적으로 활용해 볼 생각으로 페이스북 페이지도 만들고 좋아요 박스도 달고 좋아요 버튼도 달았습니다. 뭐든지 남과는 조금 다른것을 선호하는 편이라서 이왕이면 기존의 플러그인이 아니라 직접 만들어서 링크하는 방법을 택했습니다. 어렴풋히 알고 있었던 페이스북의 좋아요 시스템에 대해서 어느정도 이해할 수 있어서 좋았습니다.

이왕 블로그를 시작했으니 SNS도 적극 활용해 볼 생각으로 페이스북 좋아요 박스를 달았습니다.

SNS를 거의 하지 않던 저는 이번에 많은 시행착오를 겪으며 페이스북의 좋아요 박스와 좋아요 버튼을 사이트에 적용할 수 있었습니다.


그 내용을 정리해서 알려드리도록 하겠습니다.


저처럼 페이스북의 좋아요 박스와 버튼을 내 입맛에 맞도록 적용 하려는 분들에게는 유용한 정보가 될 것 같습니다.


1. 가장 먼저 해야 할 일은 페이스북 계정을 만드는 일입니다.


이미 계정을 보유하고 있다면, 두 번째로 할 일은 페이지를 만들어야 합니다.


페이스북은 자신의 계정페이지와 자신의 계정에서 생성한 페이지를 별도로 관리할 수 있는 구조입니다. 저도 처음에는 이것 때문에 상당한 시행착오와 혼란을 겪었습니다.


단순히 코드를 만들어 붙여넣기만 하면 될 줄 알았는데. 그리 녹녹지 않았습니다.


이것만 이해하고 계시면 커다란 무리는 없을 것 같습니다.


하나. 티스토리의 내 글에 좋아요 버튼을 달기 위해서는 페이스북 계정이 필요합니다.

둘. 내 티스토리에 페이스북 좋아요 박스(아래그림처럼)을 만들려면 반드시 페이스북에서 페이지를 만들어야 한다.

셋. 페이스북 좋아요 버튼은 티스토리 블로그 주소를 기준으로 만든다.


위 그림처럼 좋아요 박스를 만들어서 내 티스토리 블로그를 좋아하는 사람을 보여주고 싶은 사람은 반드시 페이스북 계정에서 페이지를 생성해야 합니다.


좋아요 버튼은 티스토리 블로그 각게시물들을 상대로 만들어줘야 합니다.


이 세 가지만 확실히 알고 계시면 좋아요 박스와 버튼을 적용하는데 큰 어려움은 없습니다.


페이스북에서 페이지를 만드는 작업은 매우 간단합니다. 페이스북 설정메뉴인 아래쪽 화살표를 누르고 페이지 만들기를 클릭해 주시면 됩니다.



간단한 몇 가지 상항만 입력하면 쉽게 만들 수 있습니다.


페이스북에서는 이 페이지를 하나의 회사처럼 인식하고 콘트롤 할 수 있습니다. 즉 지금 만든 페이지를 내 블로그의 페이스북 공간으로 활용하는 것입니다.


2. 좋아요 버튼이나 좋아요 박스 코드 얻기

https://developers.facebook.com/docs/plugins?locale=ko_KR 에 접속해서 적용하기 원하는 내용을 선택해 줍니다.



3. 좋아요 버튼이나 좋아요 상자를 선택하면 다음과 같은 창이 나타납니다. 적용하기 원하는 페이지의 주소를 입력하고 Get Code를 눌러서 코드를 구합니다.



4. Get Code를 눌러서 코드의 종류를 iframe 을 선택해 줍니다. iframe 을 이용하는 이유는 반응형의 경우, 정확한 콘트롤이 가능하기 때문입니다. 


이 과정을 거쳐서 만들어진 코드를 티스토리에서 적용하길 원하는 곳에 집어넣어 주면 됩니다.


다음에는 이제 이렇게 얻어진 코드를 입맛에 맞게 수정해서 티스토리에 적용하는 방법을 알아보겠습니다.


반응형