본문 바로가기

지식쌓기 창고

블로그 글에 페이스북 좋아요 버튼(Like Button) 달기

블로그에 글을 올릴때 다양한 이유가 있지만 이번에는 저를 위해 글을 써봅니다.
자주 쓰고싶은 기능인데 링크주소를 잊어버려서 여기에 올려놓으면 꼭 필요할때 써먹을수 있을듯 해서요.
그 기능은 바로 페이스북 좋아요(Like)버튼 달기입니다.
저는 페이스북에서 가장 큰 매력요소는 바로 '좋아요'(Like)버튼이라고 생각합니다.댓글 쓸 정도로 표현하긴 뭐한데,공감한단 표현은 해주고싶고..그럴때 페이스북에서는 '좋아요'를 누르면 됩니다.좋아요를 많이 누른 친구의 게시물은 더 큰 중요도를 갖게 되고 그러다보면 그 친구의 포스트는 나에게 더 쉽게 보여질 가능성이 커집니다.

좋아요버튼의 큰 강점은 내 마음,내 감정을 표현할수 있단 것이 가장 큽니다.그 다음으로 또 하나의 핵심되는 부분은 '좋아요(Like)'버튼만 누르면 친구들에게 페이스북 시스템이 내 활동소식을 전해준다는 것입니다.
최근,페이스북에서 이런 부분(상태업데이트 공지)이 더 강화된 모양입니다.페이스북 뉴스피드에서 친구들의 상태가 다 보여진다며 불평하는 소리도 보입니다.즉,제가 '좋아요'를 누르면 친구의 뉴스피드에 '쩡아가 ~(링크 URL)를 좋아합니다'라고 나타나는거죠.그러면 그 상태글을 본 친구들은 자신의 친구가 뭘 좋아한는지 궁금해서 그 상태글을 자세히 살펴보고,상태글에 포함된 링크에 들어가볼 가능성도 커지는거죠.

그런데,페이스북의 강점은 이런 '좋아요'버튼을 페이스북 뿐만 아니라 다른 곳에서도 활용할수 있도록 했다는 점입니다. 오픈 API라고도 불리며 폭넓게 활용되고 있는 이 좋아요 버튼을 여러곳에서 봐오며 '나도 언젠가 써보리라'생각했었는데요.
티스토리에는 참 좋게도 이 버튼을 따로 삽입할 필요가 없이 관리-플러그인설정-페이스북 소셜플러그인 순으로 선택만 해주면 이 글의 하단에 보여지듯이 바로 삽입이 됩니다.이 글을 페북 친구들에게도 추천(?)하고싶다면 '좋아요'를 누르면 되는거죠.

그런데 안타깝게도 드림트리사이트에는 좋아요(Like)버튼이 아직 없습니다.확장컴포넌트에 구글맵삽입까지는 있으나 아직 좋아요버튼까지는 기능포함을 못했다고 해요.그래서 직접 버튼삽입방법을 알아보고,게시물에 삽입을 해봤는데,그 과정에서 뭔가 하나를 더 배울수 있어서 참 좋았습니다.
우선 처음에 두개의 창을 띄워놓습니다.
하나는 '좋아요'를 삽입할 게시물,그리고 하나는 페이스북 소셜플러그인 삽입을 안내하는 페이지(개발자문서)입니다.소셜플러그인은 HTML로 삽입하므로 HTML 보기로 선택을 해놓아야겠죠.

그림 1. 페이스북 개발자 페이지 소셜플러그인 중 라이크버튼 관련 문서

위 그림처럼 좋아요(Like)버튼 삽입안내 페이지에서 1단계를 따라 하면 됩니다.
라이크버튼을 삽입하기 위해서는,버튼을 붙이고싶은 게시물의 URL이 있어야 하므로,우선 글을 작성하고 저장한뒤에 수정을 하는 방식으로 적용해야됩니다.첫번째 빈칸에 라이크 버튼 붙이고싶은 게시물 URL을 입력하고,밑에 세부 선택사항들은 상황에 맞춰 선택한 뒤 'Get Code'를 눌러줍니다.(세부선택사항들을 바꾸면 오른편에 디자인 변경되는 모습이 보이므로,취향 또는 삽입할 페이지의 형태에 맞춰 선택하면 되요.)

그림 2. 좋아요(Like)버튼 코드 입력하기

그림1처럼 실행하면 두번째 그림처럼 어려운 코드가 생겨납니다.개발자가 아닌 관계로 복잡하게 생각할 필요없이 하라는대로 실행해주면 됩니다.제가 HTML을 거의 모르기때문에 첫줄에 나온 영어가 무슨 의미인지 몰라 한참 헤맸습니다.분명 두개의 코드 다 갖다붙여봤는데 버튼이 안생겨 왜 그러나 하다가 <body> tag를 알았습니다.(부스러기사랑나눔회에서 자원봉사하고 있는 좋은 분의 도움으로^^)
버튼을 삽입할 게시물에서 HTML보기를 누르고 적절한 위치에 <body>를 입력합니다.그리고,플러그인 코드 각 칸에 있는 코드들을 복사해서 붙여넣기로 삽입해줍니다.그럼 짜잔~이렇게 좋아요 버튼이 삽입되는거죠.아래 있는 좋아요를 누르면 누른 사람의 페이스북 담벼락에 이 글의 링크와 함께 좋아요를 눌렀단 상태업데이트가 보여집니다.

(플러그인을 삽입하고,HTML보기를 다시 누른다음 저장이나 글등록을 눌러줘야합니다.그 전에 게시물에서는 삽입된게 보여지지 않습니다.)


그림 3. 좋아요 버튼 삽입 게시물 예시(드림트리 사이트)

세번째 그림은 위에서 설명한대로 드림트리 사이트에서 '좋아요'버튼을 삽입해본 게시물 화면입니다.누군가 들어와서 내용에 공감해 '좋아요'를 눌러준다면,이건 바로 바이럴 마케팅의 시작점이 되는거라고 할수 있겠죠.특히,이번 이벤트내용은 친구에게 드림트리 추천하기를 컨셉으로 하고 있어 소셜플러그인이 더 의미있을것 같아 붙여본것입니다.
이 버튼 하나로 '어,내친구가 좋아하는게 뭐지?'하면서 들어와볼수 있는 가능성을 열어주는거죠.
페이스북 사용하는 분중에 이 글이 도움이 되셨다면 '좋아요'한번 눌러보세요.그리고 잠시 후에 자신의 담벼락에 가보세요.적용되는 방식을 확인해볼수 있을거예요.(드림트리사이트에서는 '좋아요'누른 뒤 1분은 지나야 담벼락에 보여지는 것을 확인했습니다.)

그리고,직업인이나 청소년이라면 드림트리에도 한번 들어와보세요.내용이 괜찮다면 '좋아요'도 함께 눌러주시고요.
좋아요 버튼 잘 활용하면 좋은 콘텐츠,좋은 소식을 더 많은 사람들과 함께 나눌수 있는 강점이 있는 페이스북 소셜플러그인입니다.꼭 활용해보세요~

♡ 페이스북 개발자페이지 소셜플러그인(좋아요) 삽입안내 문서
  -  http://developers.facebook.com/docs/reference/plugins/like/ 

♡ 페이스북 고객센터 좋아요 버튼 설명글
  -  http://on.fb.me/yLj4Zk

♡ 페이스북 소셜플러그인 설명글
  -  http://www.facebook.com/help/?faq=103828869708800 

♡ 드림트리사이트내 좋아요 삽입문서
  - 함께하는 온라인 토론 3회http://www.tdreamtree.org/21431 
  - 신규가입 및 친구추천 이벤트: http://www.tdreamtree.org/21509 
  - 꿈모임터 멘토의 초대글: http://www.tdreamtree.org/Glocal/board_9/21499 


♡ 트위터 소셜플러그인은 여기로...

https://dev.twitter.com/docs/twitter-for-websites 

 

방명록에 어떤 분이 들리셨는지 적어주시면 반가울듯해요.(제 방명록에 제가 쓴글 딱 1개 있네요..^^;)
방명록에 글남기기 http://jjeongajjang.tistory.com/guestbook