H : T : M : G : A : W

블로그 게시물에 페이스북 '좋아요' 버튼 추가하는 방법블로그 게시물에 페이스북 '좋아요' 버튼 추가하는 방법

Posted at 2013. 12. 6. 15:55 | Posted in ▶ 똑똑한 블로그/블로그(Blog)


블로그 게시물에 페이스북 '좋아요' 버튼 추가하는 방법



페이스북_좋아요_facebook_reddreams




지난 시간에 내 페이스북 페이지의 좋아요 위젯을 만드는 법을 알아 보았는데요. 오늘은 내 블로그 글에 좋아요 버튼을 만드는 법을 알려드릴까 합니다.  아래 보시는 것처럼 블로그 포스팅 마다 하단에 페이스북 "좋아요" 버튼이 달린 블로그를 많이 보셨을 것 입니다. 



페이스북_좋아요_facebook_reddreams





페이스북 좋아요 버튼 생성하기

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



페이스 북의 좋아요 버튼은 내가 원하는 모든 웹페이지를 대상으로 할 수 있습니다. 아래 그림처럼 URL to Like 항목에 내 블로그 주소를 입력합니다. 그리고 include share button 을 통해 '좋아요' 와 '공유하기'를 함께 노출시킬지 결정합니다. 본인은 이미 소셜 공유 플러그인이 별도로 존재하므로 해당 게시글에 대한 좋아요 버튼만 노출시키기로 하였습니다. 그 옆에 show friend's face는 like button을 누른 친구의 사진 표시를 결정하며 필요시 layout 항목을 통해 플러그인 모양을 선택할 수 있습니다. 


페이스북_좋아요_facebook_reddreams




이렇게 간단히 '좋아요' 위젯을 세팅한 후 하단 Get code 를 클릭하면 스크립트가 생성됩니다. 총 2개의 스크립트가 나오는데 /head 적용값이 없으므로 노출되기를 원하는 위치에 그대로 붙여 넣어주시기만 하면 됩니다. 



페이스북_좋아요_facebook_reddreams


본인은 본문 최하단에 입력하였으므로 본문 종료를 알리는 [##_article_rep_desc_##] 치환자 밑으로 소스를 넣어두었습니다. 여기서 중요한게 있습니다! 


페이스북 위젯 생성기에서 등록한 URL은 reddreams.tistory.com 이라는 내 블로그 주소입니다. 그렇다면 위 스크립트를 그대로 적용할 경우 내 블로그의 어떤 포스팅으로 가더라도 좋아요 버튼은 내 글이 아니라 내 블로그에 좋아요를 클릭한 수로 고정적으로 카운팅 될 것입니다. 즉, '좋아요'버튼이 적용되는 url을 현재 접속한 내 블로그 포스팅 주소로 인식하게 끔 만들어줘야 합니다. 


이를 위해서 블로그 주소 뒤에 현재 게시글url을 알려주는 치환자를 적용해야합니다. 즉, reddreams.tistory.com 뒤에 [##_article_rep_id_##] 을 입력해주셔야만 비로소 내 포스팅 하나하나의 개별적인 '좋아요' 주소를 생성할 수 있음을 뜻합니다. 


물론, 내 블로그 주소 자체의 '좋아요'버튼을 만들고자 한다면 치환자 없이 바로 위젯을 생성해주시면 되는데 대신, 포스팅 하단 보다는 사이드바나 상단 메뉴바 등이 좋을 듯 합니다.


페이스북_좋아요_facebook_reddreams



몇 일 운영해보니 '좋아요' 버튼을 클릭하는 분들이 조금씩 발생하기는 합니다. 하지만 클릭한 사람이 누구인지, 언제 클릭했는지, 어떤 포스팅에서 좋아요가 가장 많은지, 전체  몇 건이나 '좋아요'클릭이 이뤄졌는지를 보다 상세히 알기 위해서는 조금은 전문적이고 개발자스러운 페이스북의 설명서를 참조하셔야 하여 내 페이스북과의 복잡한 연동작업이 필요합니다. 하지만, 본 '좋아요'버튼을 생성한 제 1의 이유가 내포스팅 글을 페이스북 유저들에게 단순히 알리는 목적이었기 때문에 전문 마케터도, 소셜분석가도 아닌이상 더 이상의 기능 추가는 일단은 불필요하다고 판단됩니다. 유입경로에 페이스북에서 방문하는 분들이 많이 늘어나면 그때 고민해도 충분할 듯 합니다. 이상으로 내 블로그 게시글에 페이스 북 좋아요 버튼을 추가하는 방법이었습니다^^





    Comments

티스토리 댓글


  1. 항상 빨간꿈님 덕분에 좋은 정보 많이 얻고 갑니다!
  2. 비밀댓글입니다
    • 2013.12.30 00:05 신고 [Edit/Del]
      본인이 수차례 테스트해보고, 현재 다른분들이 눌러주신 집계도 정상적으로 진행되고 있습니다. 기본적으로 네이버는 외부소스에 제약이 많으므로 페이스북 위젯 설치가 가능한지 확인해주실 것과 제 블로그에 좋아요를 눌러도 반응을 안한다면 페북계정 및 브라우저사태를 점검해봐야하지 않을까 합니다 ㅠㅠ 너무나 광범위한 내용이라 구체적인 정보를 제공해드리지 못함 양해바랍니다.
  3. 좋은 정보 덕분에 잘 배우고 가요~^^
  4. 네이버 블로그에선.. 안되는건지.. 제가 못하는건지.. ㅜ.ㅜ

    안되네요..
    • 2014.04.24 20:44 신고 [Edit/Del]
      ㅎㅎ 블로그 가보니 사이드바에 적용해주셨네요~ 네이버 블로그는 제약이 많아서 본문쪽으로의 소스추가는 불가능해서 사이드바나 상,하단쪽으로 일부만 가능하답니다~
  5. 궁금 ㅠㅠ
    음...겟 코드를 눌러도 아무것도 안뜨는건 왜일까요 ㅠㅠ 혹시나 싶어 팝업창도 해제했는데
  6. 궁금해용
    감사합니다. 잘보고가요~
    근데 이거 한글로 말고 Like로 나오게 할순 없나요?

    //connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0
    요로케 했더니 익스에서만 영문으로 나오고
    파폭이나 크롬에서는 안먹히네요 ㅠㅠ
    • 2014.06.15 22:22 신고 [Edit/Del]
      예전에는 존재했지만 위글을 작성하고자 시간이 많이 지나서 기능이 많이 변경 되었을 것입니다. 다시 한번 페이스북 플러그인 활용 포스팅을 진행하도록 하겠습니다!

Name __

Password __

Link (Your Website)

Comment

SECRET