페이스북 좋아요 버튼 간편하게 달기 및 유의해야 할 점

얼마전  쉐어홀릭 이라고하는 SNS분석 전문 사이트의 공식블로그를 통해서 확인을 해 보니 웹사이트 트래픽에 가장 많은 기여를 하는 소셜미디어가 페이스북(facebook)이라고 하는 조사 결과가 나온 적이 있었습니다.

다음으로는 핀터레스트, 그리고 트위터 순으로 나타났었구요.

요즘 왠만하면 페이스북 계정은 거의 다 가지고 계시시라고 봅니다.

지난 2014년 1분기 페이스북 이용자 수는 벌써 12억 7천 6백만명에 이르는 것으로 확인 된 바가 있으며 올해 안에는 13억명 이상은 충분히 그 이용자가 넘어서리라고 예상을 하고 있습니다.

덩달아 지난해에 이어서 페이스북(facebook) 주가도 꾸준히 오르고 있더군요.

따라서 이렇게 많은 이용자 수를 나타내고 있는 facebook과 내 블로그와의 연동을 간과해서는 안되리라고 봅니다. 그 중 '좋아요버튼' 이라고 하는 것을 어떻게 내 블로그나 사이트에 달 수 있는지 확인해 보도록 하겠습니다.

■ 좋아요 버튼에 대한 의미와 활용방법

1. 의미

아무 의미가 없이 이 버튼을 달아 두는 것 보다는 그 의미를 알고 '좋아요버튼'이라고 하는 것을 달면 훨씬더 활용을 잘 해 보실 수가 있을 것이라 생각을 해 보게 됩니다.

제 블로그 하단을 보시면 아래와 같은 버튼이 보이실 겁니다.

위치를 정하다 보니 하단에 위치를 시키는 것이 가장 좋겠더군요.  글을 다 읽으시고 난 후 좋은 글이면 추천도 받고 공유도 하시라고 하는 의미에서 위치를 그렇게 정했습니다.

이 버튼의 의미는 일종의 '추천 또는 공유'의 개념을 가지고 있습니다.

즉 '좋아요'를 많이 받은 글은 양질의 콘텐츠가 될 수가 있고 더불어 다른 사람들과 함께 그 글을 공유를 할 수도 있게 되는 의미를 가지게 되는데요.

말로 설명을 하는 것 보다 실제로 이 버튼을 누르면 페이스북에서 어떤 효과가 나타나는지를 보시게 되면 훨신더 이해가 빠르실 거라 여겨 집니다.

2.사용 예시

(1) 버튼 눌러 보기

우선 제가 얼마전 작성을 했던 포스팅중 다음뷰(Daum View) 종료에 관한 글을  선택하여 '좋아요' 버튼을 클릭을 하고난 후 해당 글에 아래와 같이 댓글까지 한번 달아 보겠습니다.

(2) 페이스북(facebook)에서 확인해 보기

그리고 난 후 제 페이스북으로 가 보니 아래와 같이 타임라인에 제가 달았던 댓글과 함께 해당글에 대한 바로가기 링크가 표시되어서 올라 온 것을 확인해 볼 수가 있네요.

이 글은 결국 제 친구들에게는 모두 공유가 되는 글이 되는 것이죠.

아울러 댓글을 달지 않고 단순히 '좋아요 버튼'만 누른 경우에는 아래와 같이 활동로그를 통해서 어떤 글들을 추천했는지도 모두 확인을 해 볼 수가 있구요.

이제 왜 달아 두면 좋은지 굳이 말로써 설명을 하지 않아도 이해를 하셨으리라고 봅니다.

■ 좋아요 버튼 적용의 방법

1. 코드를 가져 올 수 있는 개발자 사이트로 이동하기

우선 아래에 있는 URL 주소를 클릭하여 해당 웹사이트로 이동을 합니다.

전제 조건은 여러분들이 계정을 가지고 있다는 것을 가정하여 설명을 드리는 것입니다.

만약 없다면 페이스 북 가입을 하셔야 하구요. 

https://developers.facebook.com/docs/plugins/like-button

2. 기본 설정하기

해당 웹사이트로 이동을 하게 되면 아래와 같은 화면을 보실 수가 있으실 겁니다.

각 사항별로 설명을 드려 보겠습니다.

① URL to Like

이 부분은 여러분들의 블로그나 웹사이트 주소를 입력하는 부분인데요. 만약 URL을 입력하게 되면 해당 개별 글이 아닌 사이트 전체URL에 대한 '좋아요' 측 추천을 해 주는 효과를 가지게 됩니다.

그러나 이 부분을 공란으로 비워 두실 경우에는 개별포스팅 각각에 대한 '좋아요(추천)'을 하게 되는 효과를 보게 되는 것이구요.

② With

이 부분은 버튼이 들어가게 될 사이즈를 정의하는 부분인데 그냥 기본으로 해 두셔도 별 문제는 없는데 굳이 사이즈를 지정하셔야 할 경우에는 적절한 값을 입력해 주시면 됩니다.

③ Layout

버튼의 다른 모양을 선택 할 수가 있는데요.  기본(standard) 모양 이외에도 box_count, button_count, button 이렇게 총 4가지 모양을 선택해 볼 수가 있습니다.

④ Action Type

이 부분에서는 기본적인 버튼이 '좋아요'되어 있는데 이것 대신 '추천'이란 버튼으로 글자를 변경할 수 있는 부분 입니다.

⑤ Get code

모든 설정이 끝나게 되면 해당 버튼을 누를 경우 코드가 생성이 됩니다.

3. 코드 가져오기

'Get code' 버튼을 누르게 되면 아래와 같은 코드가 생성된 페이지를 보실 수가 있을 텐데요.

위에 있는 것은 스크립트 코드이고 아래에 있는 것은 실제 버튼을 표시해 주는 코드 입니다.

둘다 미리 복사를 해서 준비를 해 두시기 바랍니다.

4. 좋아요 버튼(facebook Like Button) 코드 적용하기

아래는 티스토리의 예를 든 경우 입니다.

티스토리에서는 '관리>HTML/CSS편집' 으로 가셔서 복사를 해 둔 코드를 아래와 같이 적당한 위치에 붙여 넣으시면 마무리가 됩니다.

지금 보시는 제 블로그의 경우는 '다음뷰(Daum View)' 하단에 위치를 시켜 둔 상태 입니다.

이상 설명을 드린바와 같이 페이스북 좋아요 버튼을 사이트나 블로그에 적용을 하는 것은 그리 어렵지 않으므로 위의 순서에 맞춰서 잘 적용을 해 보시기 바랍니다.

꾸준히 하시다 보면 어느순간 트래픽 향상에 적지 않은 도움을 받으실 수가 있을 것으로 예상을 해 봅니다.