몇일 전 새로 만든 블로그는 github page를 통해 내가 직접 만든 웹페이지이기 때문에, 블로그 구성을 바꾸고 싶거나 기능을 추가하고 싶으면 직접 구글링/네이버 검색 후 html 코드를 수정해야 한다.

오늘은 2가지 작업을 했는데, 우선 페이스북과 연동된 "좋아요" 기능을 블로그 포스팅 아래에 추가하는 작업을 했다. 두번째 작업은 내가 작성한 글을 다른 사람들이 페이스북, 트위터, 네이버, 카카오스토리에 공유할 수 있는 버튼과 기능을 추가하는 것인데, 그 내용은 다음 포스팅에서 설명하려 한다.

페이스북과 연동된 "좋아요" 기능을 깃허브로 만든 블로그에 추가하는 작업은 비교적 간단했는데, 아래 Facebook for Developers 사이트를 이용하면 어려울 것이 전혀 없다. (워드프레스, 텀블러, 티스토리, 블로거 등 다양한 형태의 블로그에 모두 추가할 수 있다.)

https://developers.facebook.com/docs/plugins/like-button?locale=ko_KR

1. 우선, 좋아요 버튼을 추가할 웹페이지 화면의 URL 주소를 가져온다.
2. 다음으로 좋아요 버튼 중 원하는 모양의 버튼을 선택한다 (좋아요 수를 보여주는 버튼, 공유하기까지 함께 있는 버튼 등 여러 형태가 있다).
3. 버튼 미리보기를 통해 블로그 화면에 들어갈 버튼 모양을 확인하고
4. "코드 가져오기" 버튼을 클릭해서 코드를 복사한다.
5. 복사한 코드를 "좋아요" 버튼을 추가할 블로그 html 코드에 붙여넣으면 끝!

단, 위 사이트에서 "코드 가져오기"를 하면 코드가 두개가 나오는데, 첫번째 코드는 html 코드 body 부분이 시작하는 곳 넣고, 두번째 코드는 화면상 "좋아요" 버튼을 위치시키고 싶은 곳에 넣으면 된다.

짠. 아래 그림처럼 게시글 아래에 페이스북 "좋아요" 버튼이 추가된 것을 볼 수 있다. 원한다면 좋아요 버튼뿐만 아니라 공유하기 버튼도 함께 추가할 수 있다. 좋아요 버튼과 공유하기 버튼을 클릭하면, 페이스북에 로그인이 되어 있는 경우, 바로 좋아요가 눌러지거나 본인 피드에 해당 글이 공유된다. 그리고 좋아요 버튼 옆에 버튼을 누른 사람 수가 카운트 되기 때문에 글을 쓴 사람 입장에서도 몇명이 좋아요 버튼을 눌렀는지 쉽게 확인할 수 있다.



깃허브로 블로그를 직접 만드는 경우, 본인이 html 코드를 직접 수정해야한다는 번거로움이 있지만, 장기적으로 봤을 때는 워드프레스처럼 유료로 서비스를 업그레이드를 할 필요가 전혀 없고, 티스토리, 네이버 블로그처럼 블로그 저품질이나 광고 게제에 대한 제약을 전혀 받지 않는다는 큰 장점이 있다. 앞으로도 이 새로운 블로그를 꾸준히 관리할 예정이다.

다음 게시글에서는 블로그 포스팅 하단에 SNS 공유버튼을 추가하는 법에 대해 설명해 보아야 겠다.