구글 블로그 포스트에 '좋아요' 또는 '공감' 버튼 달기

이거 찾느라 며칠을 삽질했다. 역시나 한국어 블로그는 네이버나 티스토리 기반으로 만든 것이 많아서인 지 구글 블로그에 대해서는 잘 설명된 것들이 별로 없다.
거기다 네이버나 티스토리는 역시나 한국인의 입맛에 맞는 기능들이 기본으로 들어있는 게 많은 것 같은데, 구글 블로그는 전혀 다르다. 내가 다른 블로그를 해 보지 않아서 이건 사용이 어떻다라고 비교는 못하겠다.

페이스북 연동 '좋아요' 버튼 생성은 설명된 것들이 꽤 많지만, 페이스북과 연동되지 않은 단순 '좋아요'나 '공감' 버튼 생성은 찾기가 어렵다. 아무래도 영어권 사용자들이 많은 구글 블로그에서는 페이스북 연동이 아닌 단순 '공감'은 별로 사용하지 않는 듯하다. 몇 가지 소개된 방법을 시도해 봤는데, 그나마 아래 두 가지가 가장 잘 작동하는 듯 하다.

• Rating-widget을 통한 위젯 추가 (rating-widget.com)

일단 구글 블로그에서는 '가젯'이라고 부르는 형태로 여러 기능들을 추가하는데, 구글에서 기본으로 제공하는 것 이외에도 '위젯'을 추가할 수 있다. 이게 가장 쉬운 방법이지만, 여기는 버튼 모양이 별로 안 예쁘다. --;;

이거는 사용하려면 일단 가입을 해야 한다는 점을 빼고 나면 간단하다.
원하는 플랫폼을 선택한 후 (blogger), 버튼 스타일을 선택하여 생성하여 블로그에 연결하면 된다.

• LikeBtn을 이용한 버튼 추가 (https://likebtn.com/en/)

열심히 뒤져서 찾은 두번째 해법은 바로 LikeBtn 페이지에서 소스코드를 생성하여 넣는 방법. 

1) 내 블로그에 접속하여 로그인한다.

2) 왼쪽 메뉴 중 '테마' 클릭 후, 'HTML 편집'을 선택한다.

3) HTML 입력칸에서 아래 코드를 찾는다.

    <b:includable id='post' var='post'>

4) 왼쪽 버튼을 펼친 후, 다시 <data:post.body/> HTML 코드를 찾는다.

5) Like 버튼 생성기를 이용하여 Like 버튼 코드를 생성한다.

6) 처음 "span" element 부분에 expr:data-identifier='data:post.id'를 입력한다. (이렇게 해야 각 포스트마다 버튼이 생성된다)

<span class="likebtn-wrapper" data-identifier="item_1" expr:data-identifier='data:post.id'/>

7) 이렇게 생성된 코드를 <data:post.body/> 바로 뒤에 모두 붙여준다.

<단점>

크롬을 썼을 때, 경우에 따라 버튼이 안 보이는 경우들이 꽤 많다. 

버튼 위치에 위와 같이 나오며 버튼이 안 보이는데, 새로 버튼을 넣어주면 또 괜찮다. 해결책은 아직 찾지 못했다.

또 다른 단점이라면 공짜로는 한계가 있다는 점이다. 아래 설명에도 보다시피, 공짜로는 한 페이지에 한 개의 버튼만 달 수 있고, 한 웹사이트에 최대 300개의 버튼만 달 수 있다. 결국 돈 주고 유료로 쓰라는 얘기다. 일단 시작했으니 300개까지 해 보자. 아니면 좋아요 버튼을 아예 없애던지.... 

• Graddit을 이용한 추가 (graddit.com/ratings-widget)

Graddit이라는 사이트를 통해서도 위젯을 생성할 수 있다. 여기서도 마찬가지로 html 코드를 만들어서 Blogger 테마의 html 코드를 편집해서 넣어준다. Graddit은 오래 전에 만든 후 업데이트를 안 하는 지, wix 플랫폼은 안 보인다. 

1) 내 블로그에 접속하여 로그인 후, 테마의 HTML 편집에서 </head> 를 찾은 후 바로 앞에 아래 코드를 넣어준다. 

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>

2) 다시 <b:includable id='post' var='post'>를 찾아 왼쪽 버튼을 펼친 후, <data:post.body/> HTML 코드를 찾는다.

3) graddit.com에 접속하여 위젯의 소스코드를 생성한다. 

    ① 왼쪽 화면에서 버튼 모양을 선택한다.

    ② 버튼 모양 선택 후, 오른쪽 화면 상단에서 플랫폼을 선택한다.  

    ③ 오른쪽 화면 아래쪽에 생성된 HTML 소스코드를 복사한다. 

4) 복사한 소스코드를  <data:post.body/> 바로 뒤에 모두 붙여준다.

<수정 팁> 

1. 평가 버튼 앞에 Rate this posting: 이라는 문구가 붙는데, 이 문구는 변경이나 삭제 가능하다.  소스코드 중 아래 하이라이트 부분을 변경하거나 제거하면 됨.

<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>

2. <하트모양 좋아요>에서 하트 색깔도 변경 가능하다. 소스코드 중 rgb(108, 181, 216)의 숫자를 변경하여 원하는 색으로 변경 가능하다. 

{[[&#39;&lt;span style=&quot;color: rgb(108, 181, 216);&quot;&gt;&#10084;&lt;/span&gt;&#39;]]}

<단점> 

모양은 깔끔하기는 한데, 이 위젯의 가장 큰 단점은 일단 한 번 '좋아요'나 별점 평가를 하게 되면 '취소'나 '별점 평점 변경'이 안 된다.