블로그에 페이스북 좋아요 버튼 설치하는 방법

2011. 4. 24. 10:47블로그/블로그 디자인

반응형
페이스북은 소셜 플러그인 페이지를 통해 좋아요 버튼, 페이스북 연동 덧글, 추천 상자 등 블로그와 웹사이트에서 페이스북 사용자들과 연결해 주는 여러가지 기능을 선사합니다. 뉴스 사이트나 블로그에서 어렵지 않게 볼수 있는 좋아요 버튼도 바로 여기서 설치할 수 있습니다. 요즘은 직접 덧글을 작성하기 보다 라이브리와 같은 소셜 댓글 기능을 활용해서 트위터나 페이스북으로 댓글이 전송되도록 하는 것이 유행입니다.




소셜 플러그인 페이지로 이동하기 http://developers.facebook.com/docs/plugins/

☞ 다양한 플러그인이 보입니다. 좋아요 버튼(Like Button)을 기준으로 설명 드릴게요. 다른 플러그인도 유사한 방식이라서 이것만 보셔도 충분합니다. 좋아요 버튼을 설치하고 방문자들이 블로그 전체(예를 들면 블로거팁닷컴)를 좋아요 하게 할수도 있으며 각각의 포스트를 좋아요 하도록 설치할 수 있습니다. 블로그 포스트(글)에 각각 좋아요 버튼이 동작하도록 하는 방법을 설명합니다. Like Button을 클릭하세요.



☞ 좋아요 버튼의 설정 창이 나옵니다. 1번에는 블로그 주소를 입력합니다. 2번에서 좋아요 버튼의 모양새를 바꿀수 있습니다. 총 3가지의 모양이 있고 모양새를 선택하면 오른쪽에 미리보기 화면이 나타나서 즉시 확인할 수 있습니다. 3번에서 좋아요를 누른 페이스북 유저들의 얼굴을 보여줄 것인지 말 것인지를 선택합니다. 4번은 넓이입니다. 5번은 좋아요 버튼에 새겨진 글자를 선택하는 곳입니다. Like(좋아요), Recommend(추천) 이렇게 두가지 항목이 있습니다. 6번은 글씨체, 7번은 색상입니다. 설정을 마치면 Get Code(코드 받기)를 클릭합니다.



☞ 코드가 생성됐습니다. 여기서 주의할 점은 제가 빨간색으로 표시해 둔 곳에 특정 소스를 삽입해야만 각각 포스트의 개별 좋아요가 적용된다는 것입니다. 이대로 삽입하면 특정 포스트(글)를 좋아요 하더라도 블로그 전체를 좋아요 하는 결과를 초래합니다. 블로그 주소와 &amp 사이에 [# #_article_rep_link_# #] 을 삽입하면 개별 포스트에 각각 좋아요 버튼이 동작됩니다. 떨어져있는 #은 사이좋게 붙여주세요.



☞ 블로그 관리자 페이지에서 <스킨>을 누릅니다. Ctrl+F 키를 누르면 검색창이 나오는데요. 여기에 article_rep_desc라고 입력하세요. 그러면 HTML 소스창에서 파란색으로 article_rep_desc가 나타납니다. 아래 이미지에 보이는 영역에 위의 코드를 삽입하면 됩니다. 위치는 자신이 원하는 영역에 얼마든지 응용 및 적용 가능합니다. 제목 아래 영역이 블로거들이 가장 많이 설치하는 위치라고 판단되어 제목 아래 영역 기준으로 설명드렸어요. 페이스북 소셜 플러그인으로 블로그(혹은 웹사이트)에 활기를 불어 넣으세요.