반응형
한달인가 두달전쯤에...
티스토리에서 .. 제공하는 SNS 보내기가 있었는데요... 처음엔 상당히 좋았는데... 갑자기 이상하게 변경이 되었더군요...



내가 원하는건... 마이피플과 이랑 미투데이가 아니라...
트위터페이스북이라고....

물론 더보기를 누르면... 페이스북이 뜨기는 하지만.. .. 조금... 마음에 안들게 패치가 되어서...
직접.. 인터넷을 돌아다니면서.. 자료 검색을 한번 해보고는...

제 블로그에 달아놓은게.. 바로..



미투데이도 이런식으로 블로그에 설치가 가능한것 같은데..
사용하지를 않는터라... 없애버리고선..

트위터와.. 페이스북만 달아뒀습니다..

//

이걸 설치하는 방법이.. 의외로 간단했는데요..
우선.. 트위터의 경우에는..

http://twitter.com/about/resources/buttons#tweet 에 가시면



이렇게 트위터에서.. 기본적으로 버튼을 만들수있는 페이지를 제공하고 있습니다.
단순하게 링크를 소개하기 위한... 버튼을 만들꺼라서 .. 첫번째 Share a link 를 눌러서.. 세팅을 하게 되는데요.



Share URL 과.. 트윗 문구 "Use the page URL" 를 기본적으로 사용을 해도 무관하지만...
조금 .. 있는척을 하기 위해서 ... 넣어 보자면..



그래서 공유 링크를



이렇게 해서 생성된... 코드를 가지고.. 원하는 위치에 넣어주시면 됩니다.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jsmall.tistory.com/글의 주소" data-text="글 제목" data-lang="ko">트윗하기</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

저는 위 코드로 나오게 되네요..

////

페이스북도.. 비슷한 설정을 도와주는 페이지가 존재를 합니다.

http://developers.facebook.com/docs/reference/plugins/like/ 페이지에서 제공하는 것인데요.



기본적으로 사용법은 트위터랑 같습니다..
단지.. 트위터는.. 글의 제목까지 필요하지만... 페이스북은 단순하게.. 글링크만 필요합니다..





물론.. 티스토리에 해당하는 부분이니...

다른 제로보드나.. 혹은 다른 블로그들은.. 조금 변경이 되어야겠죠.

이렇게 저같은 경우는 Send Button 이나 Show Faces 를 지웠습니다. Send Button 정도는 넣고 싶었는데.. 트위터 버튼이랑 같이 있을때..
조금.. 비틀어 지더라구요.. 

그래서 화면의 깔끔함을 위해서.. @.@



맨 아래보시면 Get Code 라고 있는데요.
이걸 누르시면 지금까지 위에서 정했던 부분에 마춰서 코드가 생성이 됩니다..



트위터랑은 다르게.. 소스가 두가지가 되는데요..
<body> 태크 이후에 넣으라는 소리 같은데.. 귀찮으니 저 같은 경우는

<div class="fb-like" data-href="http://jsmall.tistory.com/글 주소" data-send="false" data-width="450" data-show-faces="false"></div>

코드가 있는 바로 위에다가 넣어 버렸습니다. 별 이상없더라구요.

///

자 그럼 티스토리에.. 한번 적용을 시켜볼까요?
자신의 티스토리.. 관리 페이지에서 HTML/CSS 편집 페이지를 우선 가시면 됩니다.



이곳에 가신후에..
article_rep_desc 를 찾기를 하시면 됩니다.

그런후 아래 이미지처럼...
트위터와 페이스북 코드를 약간 섞어서 넣으시면 되는거죠..



이렇게 배치를 하시고..
위에 코드 처럼 하단에 <br /><br /> 이렇게 두개를 마무리로 넣어주세요..

그래야 글 과 조금 공간이 생겨서 보기가 좋네요..

개인적으로.. 글 하단에 위에 트위터랑 페이스북 버튼을 넣고 싶은데..
제대로 .. 잘 안들어가는거 같고.. 위치를 정하기가 애매하더라구요.. 그래서 어쩔수 없이.. 상단에 넣게 되었습니다...
(이 부분이 이해가 안되시면 이리저리 다른 위치에 넣어보시면 이해가 되실꺼에요.)

결과물은 멘 위에서도 보여드렸던..



짜잔.. 무지 깔끔한게 좋지 아니한가요 .. ㅎ하하핫..


반응형