블로그에 페이스북 '좋아요' 트위터 '리트윗' 버튼을 달아보자!

 
 

소셜 네트워크는 날로 성장하고 많은 사람들은 소셜 네트워크 서비스 중 적어도 하나에는 가입하여 사용하고 있습니다.

블로그를 운영하고 계신 분들도 마찬가지 이실꺼예요.

저 역시 페이스북, 트위터, 미투데이, 요즘, 스타플 등의 많은 소셜 네트워크 서비스에 가입하고 사용하고 있습니다. 물론 모든 서비스를 다 제대로 사용하고 있진 못하고 있어요. 워낙 많다보니 ^^;;



이 소셜 네트워크 서비스의 전파력은 어마어마하죠.
이를 이용한 마케팅 서비스 일명 소셜 커머스 사이트는 이제 그 수가 몇개인지 파악하기도 힘듭니다.

각각의 소셜 네트워크 서비스는 자신만의 소문 퍼뜨리는 방법을 가지고 있습니다.
페이스북의 '공유하기' 또는 '좋아요'
트위터의 '리트윗'
미투데이의 '미투'
요즘의 '소문내기'
등이 있죠.

블로그의 포스팅 역시 글을 읽으신 분들이 다른 분들과 공유하고 싶다고 생각하신다면 이를 이용하여 다른 분들과 함께 공유하고 싶은 포스팅을 소문 낼 수 있습니다.

티스토리에서는 플러그인으로 'SNS 글 보내기'를 통해 요즘, 트위터, 페이스북, 미투데이에 글을 보낼 수 있는 서비스를 제공하고 있지만 해당 블로그 주인만 사용할 뿐, 방문해 주신 분들이 사용하기에는 설명이 부족하여 클릭해보지 않는 부분이 있습니다.

또한 페이스북 좋아요 버튼 역시 플러그인으로 제공하고 있지만 그 위치를 설정할 수 없어 블로그 디자인에 어울리지 않아 고민을 하게 합니다.



여기서는 페이스북의 '좋아요' 버튼과 트위터의 '리트윗' 버튼의 코드를 제공하는 페이지를 소개합니다.





 페이스북의 '좋아요'  


페이스 북의 좋아요 버튼은 페이스북에 로그인만 되어 있는 상태라면 다른 절차없이 클릭만 하는 것으로 끝납니다.
그러면 다른 친구들과 해당 컨텐츠, 포스팅을 담벼락을 통해 공유할 수 있게 되죠.

플러그인을 통해 포스팅을 발행하면 페이스북에 자동으로 등록되도록 해 놓은 글이 좋아요를 받게되면 담벼락의 상단에 올라가거나 오래 머물러 다른 분들과 더 오래 공유할 수 있습니다.

솔직히 페이스북은 아직 초보 단계라 정확히 잘 모르겠어요 ㅠㅠ

[ 이 사진으로 한방에 설명이 될까요? :D ]



그럼 바로 페이스북 좋아요 버튼의 코드를 구하러 가볼까요?


위의 주소를 클릭하여 들어가시면 다음과 같은 창을 보실 수 있습니다.
영어로 설정하여 코드를 얻게되지만 한국어가 기본설정된 곳에서는 한글로 표시되니 걱정하지 않으셔도 되요 :)


'URL to Like' 부분에 블로그 주소를 적어주세요.

'Layout Style' 에서는 총 세 종류의 스타일을 선택할 수 있습니다.
여기에 가장 아래에 있는 'Color Scheme' 에서 선택할 수 있는 밝은 버전과 어두운 버전을 포함하면 총 여섯가지가 되겠네요.

첫번째로 'standard' 스타일을 선택하시면 아래와 같은 버튼 소스를 확인하실 수 있습니다.

다음은 'button_count' 스타일입니다.

마지막으로 'box_count' 스타일을 선택하시면 아래와 같은 버튼을 확인하실 수 있습니다.

각 스타일을 클릭했을 때의 모습입니다.
제가 직접 클릭했을 때의 모습이구요. 블로그에 적용시켜 놓았을 때는 몇분이 좋아요 버튼을 클릭해주셨는지 그 수가 표시되게 되요.

'Show Faces' 를 체크하시면 좋아요를 눌러주신 분들의 페이스북 프로필 사진이 나타납니다. 위에서 보시는 것 처럼 standard 스타일을 사용하실 때 같이 사용하실 수 있어요.

'Witdh' 부분은 나중에 소스에서도 너비를 조절할 수 있으니 신경 안 쓰셔도 되구요.

'Verb to display' 에서는 버튼에 Like 또는 Recommend 중 어느 것이 적힐지 고르게 되는 부분인데요.
한국어로는 Like 는 '좋아요', Recommend 는 '추천' 이라고 나타나게 됩니다.

'Font' 부분에서 설정할 수 있는 폰트 스타일은 버튼 내부 폰트 적용이 아닌 나타나는 숫자의 폰트의 스타일을 변경시켜줍니다.

다 설정하셨으면 'Get Code'를 클릭해주세요.
그럼 아래와 같은 창이 나타납니다.


iframe 과 XFBML 두가지 코드를 제공하는데 우리는 'iframe' 코드를 사용하도록 해요.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkkid.tistory.com&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

이런 코드를 받으시게 되는데 여기서 주의할 점이 있습니다.
이대로 좋아요 버튼을 블로그에 적용, 삽입하시게 되면 어느 페이지에서 클릭을 하든 블로그 자체에 좋아요가 적용되게 되요.

개개의 포스팅에 좋아요 버튼을 적용하기 위해서는 블로그 주소 바로 뒤에 [# #_article_rep_link_# #] 를 넣어주셔야 되요.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fkkid.tistory.com[# #_article_rep_link_# #]&amp;layout=box_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

이렇게요 :D
( # #의 사이 공간은 ## 이렇게 지워주시는 센스! )

이렇게 얻게된 코드를 본문 중간에 넣으실 수도 있고, 스킨html 에서 본문 상단 또는 본문 하단의 추천버튼 옆에 넣으실 수도 있어요.
저는 추천버튼 오른쪽에 리트윗버튼과 함께 넣어놨어요 :D

원하시는 공간에 좋아요 버튼 달아보세요 ^^

아! 위의 주소로 들어가게 되는 사이트에서는 좋아요 버튼 외에도 로그인 버튼, 좋아요 상자, 댓글 상자 등의 코드를 얻으실 수 있습니다.





 트위터의 '리트윗'  


페이스북의 '좋아요' 버튼에 이어 트위터의 '리트윗' 버튼을 소개합니다.

리트윗이란 말 그대로 트윗을 다시 한다는 건데요. 트윗이란 아시다시피 트위터에 글을 적어 등록하는 것을 말하죠. 짹짹 거린다는 겁니다.

트위터를 이용하는 분들 중 팔로잉하고 있는 분의 트윗 중 유용한 정보, 공감되는 정보, 재미난 정보, 팔로워들과 공유하고 싶은 정보, 팔로워들에게 알리고 싶은 새소식 등의 트윗을 리트윗하게 되면 해당 트윗의 앞에 'RT'가 붙으며 자신의 팔로워들에게 전달됩니다.
본 글을 쓴 분의 아이디와 함께 전달되죠.

이 리트윗은 트위터가 세계 곳곳의 소식을 가장 빠르게 그리고 가장 넓게 퍼뜨리는데 크게 활용되고 있습니다.

이 리트윗을 통해 정보를 공유하고 모르는 사람의 정보를 받아 팔로잉을 하기도 하죠.
트위터에서 좋은 정보를 올려 많은 리트윗을 받는 것이 팔로워수를 늘리는 것의 기본입니다.

요즘엔 리플을 통해 전달해도 될 사항을 리트윗으로 전달하거나 사소한 사항들까지도 마구마구 리트윗을 하는 분들도 있어 타임라인을 흐린다하여 팔로워 분들의 블럭의 대상이 되기도 합니다.


[ 리트윗 참 쉽죠 :D ]



여기서 소개할 리트윗 버튼은 리트윗과 성격이 좀 다릅니다.
리트윗은 팔로잉하는 분의 트윗을 다시 트윗한다는 것인데, 버튼을 클릭하게 되면 리트윗이 아니라 트윗을 새로 올리게 됩니다. 버튼에도 리트윗이 아닌 트윗이라고 쓰여있습니다.

하지만 그래도 내가 쓴 글이 아닌 포스팅을 공유하기 위해 트윗하는 것이고, 저만 그런지 몰라도 지금까지 리트윗 버튼이라고 칭해왔으니 리트윗 버튼이라고 할께요 ^^

그럼 이제 리트윗 버튼 코드를 얻으러 가보죠!


위의 주소로 들어가시면 다음의 화면을 확인하실 수 있습니다.


한글로 지원되니 불편함 없이 코드를 구하실 수 있습니다.

상단의 '버튼' 탭에서 원하시는 스타일을 선택하세요.

각 포스팅의 리트윗을 목적으로 하신다면 '트윗문구'나 'URL' 탭은 그대로 두시구요.

'언어' 탭에서는 한국어를 선택하실 수 있습니다!!!
바로 어제 까지만 해도 트윗이 아니라 tweet 이라고 적힌 버튼이었는데 트위터 한국어 서비스가 시작되면서 트윗 버튼에도 적용되었네요 +_+

팔로우 추천하기에 아이디를 적으시면 트윗 내용 마지막에 아이디가 들어가 맨션으로 전해집니다.
아무것도 적지 않으셔도 되요.

이렇게 모두 설정을 끝내시고 하단의 코드를 복사해서 페이스북의 좋아요 버튼과 함께 적용하시면 됩니다 :)



이렇게 적용하시고 티스토리 플러그인 'SNS 글 보내기'까지 적용하시면 페이스북과 트위터 버튼이 각 두개씩 존재하게 됩니다.
페이스북은 플러그인은 공유버튼으로 작동되고, 위에서 적용한 코드는 좋아요 버튼이니 각 다른 역할을 하게 되지만 트위터 버튼은 두 버튼 모두 트윗 버튼 역할을 하게 됩니다.

두 트윗 버튼의 차이점은 아래의 화면과 같습니다.


티스토리 플러그인 'SNS 글 보내기' 의 트윗버튼을 클릭하시면 위 화면과 같은 화면이 새창으로 나타나게 됩니다.
durl로 주소가 줄여졌네요.


위에서 소개한 코드를 적용한 버튼을 클릭하면 위의 화면과 같은 작은 창이 새창으로 나타납니다.
맨 마지막에 추천 아이디가 추가된 것과 주소가 t.co 로 줄여졌다는 것이 다르네요.

두 방법 모두 내용을 수정, 추가하여 트윗할 수 있습니다.
뭐... 똑같다는거죠. @_@ㅋ

저는 방문자 분들이 거부감 없는, 많은 곳에서 자주 볼 수 있는 리트윗 버튼을 적용해 두었습니다.
아무래도 플러그인으로 제공되는 'SNS 글 보내기' 의 버튼은 트위터 팔로우를 하라는건지 뭐하자는 버튼인지 사용해보지 않은 분들은 거부감이 들 수 있다고 생각되어서요 :)



블로그 디자인 때문에 좋아요 버튼이나 트윗 버튼을 쉽게 적용하지 못하셨던 분들! 위의 여러가지 스타일의 버튼의 코드를 통해 예쁘게 블로그에 적용해보세요.

혼자 보기 아까운 블로그의 좋은, 멋진 포스팅들을 페이스북의 '좋아요', 트위터의 '리트윗'을 통해 많은 분들과 공유해보세요 ^^

다 써놓고 보니 으어 너무 길게 작성된 것 같네요 ;;;
그렇다고 두개로 나누기도 뭐하군요 @_@ㅋ

신고

댓글을 달아 주세요

  1. BlogIcon 위네모 2011.01.20 22:22 신고  Addr  Edit/Del  Reply

    SNS를 좀 공부해야 페이스북이나 트위터를 달아보던가 할텐데말이지요~
    '쇼셜'이 관련된거라, 소셜 능력이 부족한 저에게는 아직 조금 버겹습니다 ㅜ.ㅜ

  2. BlogIcon 그냥 아저씨 2011.01.21 09:43 신고  Addr  Edit/Del  Reply

    음...진지하게 정독 했지만;;;
    외국어 같이 보입니다.ㅠㅠ
    아;;;남들이 다 한다고 해서 계정만 만들고;;;방치하고 있네요 ㅠㅠ
    그래도 이렇게라도 알게 되니~정말 도움이 많이 됩니다.^^

  3. BlogIcon misszorro 2011.01.21 10:00 신고  Addr  Edit/Del  Reply

    저도 지금 페이스북 쪽으로 생각중인데
    저 도장 왠지 맘에 드네요ㅎㅎㅎ
    여기 저기 다 찍고 싶어요ㅎㅎㅎ
    즐거운 하루 되세요^^

  4. BlogIcon 재아 2011.01.21 10:59 신고  Addr  Edit/Del  Reply

    저는 개인적으로 티스토리에 하단바를 좀 정리할수 있게 위젯 사이즈나 버튼등을 추가 삭제가 용이 하도록 했으면 하는 바램입니다.

    • BlogIcon 그냥 꼬꼬마 2011.01.22 02:30 신고  Addr  Edit/Del

      티스토리 플러그인으로 세세한 위치 수정을 할 수 있게 해주면 좋을텐데 안되는게 아쉽죠 :)
      그래도 티스토리가 하나하나 계속 편의 서비스를 추가하려 노력하는 모습이 보여서 하단바를 깔끔하게 정리할 수 있는 서비스도 추가될 거라는 믿음이 +_+ㅋ

  5. BlogIcon 닉쑤 2011.01.21 12:26 신고  Addr  Edit/Del  Reply

    깔끔한 정리 잘 봤어요~
    저는 귀찮아서 그냥 티스토리 버튼으로.. -0-;

  6. BlogIcon 포스티 2011.01.21 15:12 신고  Addr  Edit/Del  Reply

    지금 너무피곤해서.. 이글 내일보고 달아야겟네요.. 후..
    밤을샛더니 ㅠ ㅠ

  7. BlogIcon 서관덕의 시간이 머문 작은공간™ 2011.01.21 15:35 신고  Addr  Edit/Del  Reply

    대세는 SNS이군요..ㅎㅎ

    SNS에 익숙해지면, 한번 고려해봐야 할 사항입니다.ㅎㅎㅎ
    뭐 아직 계획은 없지만요..^^

    내용 정말 잘 정리해두셨네요..^^ 꼬꼬마님의 정성에 감동했습니다.^^

  8. BlogIcon NearU 2011.01.21 21:00 신고  Addr  Edit/Del  Reply

    상세하게..정말 잘 하셨네요ㅜㅜ 하지만..페북..친구들과 약간씩 해보고있으나..
    블로그에 적용은 무리인것 같네요ㅜㅜㅋㅋ진짜 이부분 왜케 못따라가겟는지ㅜㅜㅋㅋ
    나중에 기회되면 꼭 해봐야겠슴돠ㅜㅜㅋ

  9. BlogIcon 심플게임 2011.01.22 22:15 신고  Addr  Edit/Del  Reply

    좋아요를 사용하기 위해서는 페이스북 담벼락과 포스팅이 연결이 되어야 하는 것 맞나요?
    저는 알쏭달쏭하네요.

    • BlogIcon 그냥 꼬꼬마 2011.01.22 23:00 신고  Addr  Edit/Del

      음 @_@;
      페이스북 담벼락에 포스팅이 연결되어 있지 않더라도 좋아요는 따로 연결되어서 사용되지 않을까요?

  10. BlogIcon yoo1986 2011.01.23 12:10 신고  Addr  Edit/Del  Reply

    리트윗 버튼만 달았었는데 이참에 좋아요 버튼도 한번 달아봐야겠네요 좋은 정보 감사합니다 ^^

  11. BlogIcon 하얀잉크 2011.02.18 01:32 신고  Addr  Edit/Del  Reply

    페북의 좋아요 버튼을 포스트 상단에 설치하려면 코드를 어디에 삽입해야 하나요?

  12. 주형엄마 2011.03.04 02:22 신고  Addr  Edit/Del  Reply

    혹시 아이프레임은 싸이월드 블로그도 안되나요? 여러번 시도했는데 주소가 틀렸는지 잘 안되네요...

  13. BlogIcon 김정환 2011.03.04 10:34 신고  Addr  Edit/Del  Reply

    질문이 있습니다~ ^^, 페북에 좋아요 버튼을 달고 나서 제가 '좋아요'클릭하면 '회원님이 좋아합니다'라는 문구가 뜨게 되는데... 글씨가 커서 인지 폰트가 잘못 되어서 인지 두줄에 다 나타나지 않아서 모양이 찌르러 진다는.. -ㄴ- 어떻게 해결하면 될까요?

  14. BlogIcon wrist watches 2011.08.06 17:49 신고  Addr  Edit/Del  Reply

    아주 맛 있 는 것 도 마다!

  15. BlogIcon 트로졸로 2011.08.25 19:34 신고  Addr  Edit/Del  Reply

    감사합니다. 덕분에 잘적용했습니다.
    아주 맘에 드네요^^

  16. BlogIcon Antz 2012.03.03 18:18 신고  Addr  Edit/Del  Reply

    감사합니다 잘 적용했어요 ^ ^

  17. BlogIcon Software ERP Indonesia 2013.01.19 18:01 신고  Addr  Edit/Del  Reply

    꼬꼬마님 정말 아는 것 많으세요 ㅎ 처음 본 정보인데 정말 알기쉽게 풀어써주셔서 정말 이해가 잘 되었습니다.^^
    제가 원래 사수자리인데 바뀔뻔했네요..ㅜ 재미난 포스팅 잘 보고 갑니다!^^

티스토리 툴바