블로그에 페이스북(Facebook) fbShare 공유버튼 달기

반응형
요즘 페이스북에 대한 인기가 조금씩 올라가고 있는거 같습니다. 한때 페이스북이 한국에선 절대 성공할수 없다는 분도 계셨고 나름 선전할것이라 얘기 하는 분들도 계셨는데 지금은 제가 보기에 어느정도는 희망이 있어 보이는거 같습니다. 

그렇다고 싸이월드나 트위터처럼 대대적인 열풍까지는 아니더라도 어느정도의 인지도까지는 올라 가지 않을까 싶습니다.

그래서 제 블로그에 페이북 fbShare 공유버튼을 달기로 마음 먹고 검색을 해서 알아 보았습니다. 그런데 검색 건수도 얼마 없을뿐더러 정확하게 어떻게 단다는 내용이 없더군요. 그래서 임시로 달아 놓고 하루 이틀 고민을 좀 했더니 제 나름대로 해결책을 찾아 냈습니다.


제가 검색으로 찾아본 공유버튼 다는 방법을 읽어 보면 페이스북 공식 사이트에 가면 기본적인 버튼 다는 소스가 있다고 하던데 페이스북에서 아무리 찾아 봐도 소스가 없더군요. 그래서 결국은 페이스북에서 제공하는 버튼 말고 비공식 버튼을 달았습니다. 그리고 제가 원하는 방식으로 소스를 몇일 고민해서 수정해 넣었습니다. 

그럼 일단 기본적인 페이스북 버튼 다는 방법에 대해서 알아 보도록 하겠습니다. 먼저 아래 사이트에 가서 페이스북 공유버튼에 대한 소스를 원하는 블로그 위치에 붙여 넣습니다.



fbshare.me 링크에서 위 코드를 복사하신후 빨간색 박스 안에 있는 부분만 본인의 블로그 주소로 바꾸신후 원하는 위치에 붙여 넣으시면 됩니다. 그리고 글자색과 바탕색을 흰색과 곤색으로 바꾸고 싶으신 분들은 badge_text 부분과 badge_color 부분의 값을 아래의 값으로 바꿔 주시면 됩니다.

badge_text: 'white',
badge_color: '#f00',

이 색깔이 마음에 들지 않으시면 다른 색깔로 넣어 주셔도 됩니다. 사용자 마음에 드는 색깔로 변경해서 사용하시기 바랍니다. 

이렇게 하시면 기본적인 fbShare 공유버튼 다는 방법은 끝이 납니다. 그러나 이렇게 단 fbShare 공유버튼의 share 버튼을 눌러 보시면 그 해당글이 공유가 안되고 다 똑같은 글이 공유가 되는 것을 경험 하실 것입니다. 여기서 간단하게 변경해야할 부분이 있더군요. 각 글마다 share 버튼을 눌렀을때 그 글이 공유가 되게 하기 위해선 위에서 자기 블로그 주소를 넣은 url 의 값에 코드를 좀더 추가를 해야 합니다.

url: 'http://mastmanban.tistory.com[샵샵_article_rep_link_샵샵]'

제 블로그를 예로 했을때 제 블로그 주소 뒤에 article_rep_link 부분을 더 넣어 줘야 합니다. 그러면 페이스북 공유버튼에서 share 버튼을 누르면 각 글에 해당하는 글이 공유되는 것을 보실수가 있을 것입니다. 아울러 '샵샵' 이라고 씌여진 부분은 특수문자로 바꿔 주는거 아시죠? ^^

이렇게 하시면 페이스북 공유버튼 다는 방법은 끝이 납니다. 자리만 잘 잡아 넣어 주시면 깔끔하게 마무리가 될것입니다. 별거 아니고 간단한 방법인데도 몰랐을때는 왜이리 알아 내는게 힘든지... 알고 나니 너무 쉬운 방법이더군요. 페이스북 공유버튼을 다는데 저와 같은 고민을 하고 계신 분들이 계시다면 위 방법을 이용하여 간단하게 해결하시기 바랍니다.