본문 바로가기
▶ Special/○ 블로그(Blog)

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

by 빨간꿈 2013. 12. 6.
반응형


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



페이스북_좋아요_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


본인은 본문 최하단에 입력하였으므로 본문 종료를 알리는 

반응형


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



페이스북_좋아요_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


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


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


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


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


페이스북_좋아요_facebook_reddreams



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





치환자 밑으로 소스를 넣어두었습니다. 여기서 중요한게 있습니다! 


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


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


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


페이스북_좋아요_facebook_reddreams



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






댓글12