빛과사람그리고나 :: 'SNS공유버튼' 태그의 글 목록

블로그 SNS공유버튼 쉐어디스이용 만들기블로그 SNS공유버튼 쉐어디스이용 만들기

Posted at 2015. 3. 11. 17:25 | Posted in 〃 IT/〃 블로그정보
반응형

쉐어디스 공유버튼 만들기


 

이전까지는 addthis 공유버튼을 사용했었는데 언젠가부터 이게 정상적으로 나오지가 않습니다. 시간이 약이려니하고 기달려봐도 출력이 안되더군요 그래서 쉐어디스로 변경을 하였습니다.

 

쉐어디스도 마찬가지로 기보적으로 회원가입을 해야합니다. 회원가입절차는 상당히 간단하니 그리 어렵게 생각안하셔도 됩니다. 

 

 

 

http://www.sharethis.com <-- 쉐어디스 홈페이지입니다.

 

홈페이지에 들어가셔서 로그인하신후에 한가운데있는 코드만들기를 클릭합니다.

 

 

그러고나서 웹사이트를 클릭합니다. 티스토리는 HTML방식이니 웹사이트로 해주시면됩니다.

 

 

그리고 내가 원하는 버튼의 방식을 선택합니다. 아래에할건지 저처럼 사이드에 할것인지 위에할것인지

 

 

위치를 정하셨다면 SNS공유를 어떤것을 할것인지 원하는 공유버튼을 골라서 좌측으로 넣어주시면됩니다. 그리고 저처럼 사이드에하신다면 왼쪽에 하실건지 오른쪽으로 하실건지도 함께 넣어주시면됩니다.

 

 

그러면 두가지의 코드가 생성이 됩니다. 우선 2번에 있는 코드를 복사합니다.

 

 

2번에 있는코드를 복사하신후에 skin부분에 head 윗부분에 넣어줍니다. 그이후 3번을 다시 복사합니다.

 

 

3번을 복사하시고 원하시는 위치에 넣어주시면 되는데 저는 위에 적혀져있는 위치에다 넣었습니다. 참고만하시고 원하시는 위치에 넣어주시면 완료가됩니다.

 

SNS공유버튼으 최근 블로그에서는 거의 필수요소라서 안넣어 놀수가 없었습니다. addthis 잘 나오다가 언젠가부터 안나오기 시작하더니 아무리 소스 수정을 해봐도 안나오더군요..

 

 

 

반응형

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

블로그에 AddThis로 SNS공유버튼달기 트위터나 페이스북에공유블로그에 AddThis로 SNS공유버튼달기 트위터나 페이스북에공유

Posted at 2014. 2. 21. 22:45 | Posted in 〃 IT/〃 블로그정보
반응형

 

SNS공유는 필수 버튼


 

안녕하세요 이번엔 SNS 트위터나 페이스북 같은 공유 버튼을 적용하는것을 포스팅하겠습니다. 그전에 쉐어디스라는곳에서 공유버튼 만드는 법을 적어드렸는데 오늘은 AddThis 에서 하는 법을 적겠습니다. http://www.addthis.com <-- 애드디스의 사이트입니다.

 

 

우선 애드디스홈페이지에 들어가면 우측상단에 코드를 만드는 메뉴가 있습니다. 프로버전이 있는데 프로버젼은 아마 유료이지 않을까 싶습니다. 써보지는 못해서 잘은 모르겠네요

 

 

일단 코드를 만들려고하면 회원가입을 했던것같습니다. 회원가입은 뭐 개인정보를 적는다거나 그런것은 없었고 그냥 이메일과 패스워드만 만들면 가능합니다. 코드를 가져가기 위해서는 위에처럼 로그인을 하시면됩니다.

 

 

일단 로그인을 하시면 위에와 같은 화면이 나옵니다. 좌측에는 기본적으로 4가지의 메뉴가 있으며 그메뉴들이 어디를 표현하는것인지 우측편에 화살표로 연결을 해놓았으니 저게 어디부분이구나 생각을하시고 적용을 하시면됩니다. 4가지를 전부다 사용하시기를 원하면 4개다 on으로 해주시면 가능합니다.

 

 

그리고 설정을 하실때 sns 버튼에 내계정의 아이디를 넣으시면 되고 구글+ 같은경우는 주소를 잘찾아서 넣으셔야 합니다. 상당히 깁니다. 그리고 아래부분에는 사이드에 달리는 sns 공유버튼을 몇개로 할것인지.. 왼쪽에 붙일것인지 오른쪽에 붙일것인지 결정을 하시면됩니다.

 

 

모든 것을 결정하시고 아이디까지 넣으셨다면 아래부분에 코드생성 버튼을 누릅니다.

 

 

그러면 이런식으로 내가 설정한대로 sns소스 버튼코드가 만들어 집니다. 그럼 이전부를 복사를 하여서 내블로그 HTML설정으로 들어갑니다.

 

 

 

 이게 정확히 어디위치에다 소스를 넣어라그렇게 지정은 되어있지 않지만 저같은 경우는 위에 화면에 보시듯 저위치에다가 소스 코드를 넣어놓았습니다. 완성된모습은 지금 글을 읽으시면서 보시면 될것같습니다.

 

참고로 이거는 네이버 블로그는 불가능합니다. 티스토리처럼 개방형만 가능하니 참고하시길바랍니다. sns는 요즘에 글이 퍼저가는 하나의 길같은것이니 내가 포스팅에 글을 다른사람들이 편하게 볼수있도록 해놓으면 블로그나 다른분들에게 좀더 도움이 되지 않을까 싶습니다.

 

감사합니다.

반응형

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 잘 보고 갑니다. 좋은 하루 되세요~*

티스토리 블로그 SNS공유버튼 달기 Share This 이용하여 간단하게티스토리 블로그 SNS공유버튼 달기 Share This 이용하여 간단하게

Posted at 2013. 12. 10. 10:04 | Posted in 〃 IT/〃 블로그정보
반응형

 

 

 그리복잡하지 않은 SNS 공유버튼 


 

안녕하세요? 이번에 공유버튼을 설치하려고 알아보다가 괸찮은 곳이있어서 적어봅니다. 원래는 addthis 에서 할려고 했으나 여기는 바야바의 자바를 제거해야지만 설치가 되더군요.. 그래서 다른곳으로 Sharethis 를 찾아서 설치하게되었습니다.

 

http://www.sharethis.com  홈페이지이며 회원가입은 그냥 이메일만 적으면 됩니다.

 

 

홈페이지에 접속하시고 체크해놓으신 부분을 클릭합니다.

 

 

 

클릭하시면 위에처럼 사이트의 형태가 나오는데 티스토리는 그냥 웹사이트로 들어가시면 됩니다. 네이버블로그는 음.. 잘모르겠습니다. 개방형 사이트가 아니라서.. 일단 웹사이트 하시고 넥스트 누르시면됩니다.

 

 

공유버튼 방식이 여러가지 있습니다. 그냥 버튼만 추가해서 내가 원하는곳에 넣는 방식이 있고 사이드바와 상단 하단부분에 넣는 방식이 있습니다. 저는 사이드바 부분을 선택해 보겠습니다. 사이드바 선택하시고 넥스트로 넘어갑니다.

 

 

그러면 사이드바 오른쪽에 할건지 왼쪽에 할건지 선택을합니다. 저는 오른쪽으로 선택하였습니다. 그리고 왼쪽에 기본적인 SNS 공유버튼이 있으며 우측에 추가적으로 넣고싶은 버튼 목록이 있습니다. 드레그 하셔서 옮기시면 바로 넣으실수 있습니다.

 

다정하셨으면 Get the Code 를 클릭합니다.

 

 

 

 소스코드삽입 


 

클릭하시면 소스코드가 2개가 나옵니다. 스크립트 방식으로 나오며

 

1번에 있는것은 skin </head> 윗부분에 넣어주시면 되시고 2번째는 skin의 자기가 원하는 중간정도?넣어주시면 됩니다.

 

 

저는 코드를 이런식으로 넣었습니다. 위에는 1번소스코드이며 아래는 2번 소스코드입니다.

 

 

 

 

완성작품

 

 

완성작품입니다. 사이드바 우측에 각종 공유버튼이 플로팅으로 움직이는것을 확인하실수 있습니다. 아이콘부터 모두 해야하는 번거로운 작업은 제외하고 다른 사이트에서 마든것이지만 소스만 넣어주면 공유기능을할수있으니 이런식으로 사용하시면 편리하실것같습니다.

 

참고로.. 제블로그만 그런것일수 있으나 바야바 광고중이신 분들은 addthis쪽 공유버튼이 안나옵니다. 바야바 소스를 삭제하면 나오고.. 물론 아닐수도 있으니 아시면좀 알려주시면 감사하겠습니다.

 

반응형

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

  1. 오 정말쉬운데요! 바로해보겠습니다 ㅋㅋ그리고 마지막 뮤비 참 좋네요