티스토리에 SNS 공유링크를 만들어 보자

설치형 블로그인 티스토리는 네이버에서 사용할때와는 꾸미는 방법이 다릅니다. 내가 어떻게 하느냐에 따라 블로그 이미지가 완전히 달라지게 됩니다. 이런 블로그를 가꾸는게 어렵게 느껴지는 것은 사실입니다. 한편으로는 조금만 공부하면 내맘대로 블로그를 꾸밀 수 있지 않을까 하는 생각에 즐겁기도 합니다. 개인적으로는 이런 쪽을 즐겨했었기 때문에 조금 더 멋진 블로그로 만들기 위해 공부하고 있는것이 즐겁습니다. 오늘은 티스토리 블로그에 SNS 공유 링크를 달아보려고 합니다.

 

 

 

 

 

 

티스토리에 SNS 공유링크를 만들어 보자

 

 

 

 

 

 

이번에 SNS 공유 링크 설치방법을 찾아보면서 이미 많은 블로거님들이 나와 같은 고민을 했었던 것을 알았습니다. 그리고 그 방법을 공유를 해주어서 그 블로거님들의 글을 참고해서 꾸몄습니다.

 

 

 

 

SNS 공유 링크 만들기

 

첫번째로 방법을 참고한 곳은는 IT넘버원 님의 블로그입니다. 더욱 자세한 설명을 보고싶으시다면 아래의 IT넘버원님의 블로그를 참고해서 적용해보세요.

 

 

- 티스토리 블로그 SNS 공유 버튼 직접 만드는 방법(http://prolite.tistory.com/783)

 

 

IT넘버원님의 블로그에서 공개된 SNS 공유버튼은 사각형의 완성된 형태입니다. 이미지와 코드까지 모두 다운로드 받을 수 있도록 작성되어 있습니다. 일반적으로 사용하고 있는 SNS인 페이스북, 구글+, 카카오톡, 카카오스토리, 네이버, 트위터 이렇게 만들어져 있다. 이 소스파일들은 IT넘버원님의 블로그에서 받아서 쓰면 됩니다.

 

 

 

 

두번째로 참고한 블로그는 모지모지님의 블로그입니다. 모지모지님은 SNS공유버튼 이미지도 크기별로 모두 만들어두었고 소스파일까지 공유해 두었습니다. 아래의 모지모지님의 블로그를 참고해서 적용해 보세요.

 

-티스토리 반응형#2 SNS 공유버튼 넣기! 카카오톡,네이버, 구글플러스 공유하기! (http://www.mojimoji.co.kr/579)

 

 

모지모지님의 블로그에서 공개된 SNS 공유버튼은 원형의 완성된 형태입니다. 많이 사용하는 SNS인 페이스북, 트위터, 구글+, 카카오스토리, 카카오톡, 네이버 이렇게 버튼을 만들어 주셨네요.

 

 

 

 

처음 파일업로드 하는곳이 어딘지 못찾았었는데, 파일업로드 하는 방법까지 설명해주어서 금방 해결할 수 있었습니다. 소스파일들은 모지모지님의 블로그에서 받아서 쓰면 됩니다.

 

 

필자는 첫번째인 IT넘버원님의 방법을 사용했습니다. 그리고 SNS 버튼은 몇가지를 더 추가해서 꾸미기로 하고 버튼에 쓸 이미지들을 찾아서 크기별로 수정하고, 링크 주소를 찾아서 적용했습니다.

스냅북과 밴드 SNS를 추가했고 위에서 작성했던 소스파일들을 참고해서 추가를 했습니다.

 

 

 

 

 

 

 

이미지파일 업로드 하고 경로와 파일명만 잘 작성해주면 됩니다.

이미지파일은 블로그관리>HTML/CSS편집 에서 업로드하면 됩니다.

 

 

 

 

그리고 카카오톡의 공유버튼 설정은 다른것보다는 조금 까다롭습니다. Kakao Developers 사이트에 가입하고 앱만들기를 통해 등록하고 카카오톡 자바스크립트 API키를 받아야 적용할수 있습니다. 카카오톡 버튼은 모바일에서만 작동이 되니 참고하세요.

 

 

Kakao Developers 사이트 등록하기

 

Kakao Developers 사이트 :  https://developers.kakao.com/apps/new

 

1) 개발자 등록하기

 

 

 

2) 앱 만들기

 

 

 

 

3) 설정>일반>기본정보(JavaScript키) 확인

 

 

 

 

 

 

 

 

SNS 공유 링크 삽입하기 

 

 

SNS 공유 링크 코드를 만들었으면 이제는 적당한 위치에 삽입하여야 합니다. 필자는 본문 베스트공감 아래쪽에 있는 카테고리의 다른 글 하단에 위치시키고자 합니다. 그래서 HTML/CSS 편집을 이용해서 수정하였습니다.

 

 

 

 

 

 

 

HTML/CSS 편집을 실행시켜 이동하겠습니다.

 

 

 

Ctrl+F(검색)해서 ##_article_rep_desc_## 을 찾아서  ##_article_rep_desc_##을 기준으로 하단에 SNS 공유링크 코드를 삽입하겠습니다.

 

 

 

 

 

 

SNS 공유링크 만들기 적용 결과

 

1) 페이스북 링크

 

 

 

 

2) 트위터 링크

 

 

 

 

3) 구글플러스 링크

 

 

 

 

4) 카카오스토리 링크

 

 

 

5) 네이버 링크

 

 

 

6) 밴드 링크

 

 

 

7) 스냅북 링크

 

 

 

SNS 공유링크 정상적으로 작동이되는것 같네요. 어렵지 않으니 한번 적용해보시기 바랍니다.

 

 

SNS 공유 이미지.zip

sns링크 소스코드.txt

 

 

 

 

 

 

 

 

2017.12.24 수정사항

 

카카오톡 SNS 공유링크 사항이 수정되었습니다.

 

원래 별도로 API 키도 넣어줘야 했었는데 티스토리에서 공감, 공유, 신고 버튼 통합으로 인해 API 키는 기본적으로 적용됩니다. (17년 12월 23일 업데이트 확인)

카카오톡 소스 코드가 v1 버전 -> v2 버전으로 변경되었습니다. (17년 12월 24일 수정)

출처: http://prolite.tistory.com/783 [내 안의 디지털 세상] 

 

변경된 소스코드

 

<!-- /* Share on KakaoTalk */ -->
<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>

<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- KakaoTalk Share Script -->
<script>
function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
</script>

 

SNS 공유 소스2-171224.txt

 

 

2018. 2. 8 수정사항

 

카카오톡 SNS 공유링크 사항이 수정되었습니다.

 

카카오톡 소스코드 버전 v2 개선 SDK 업데이트로 인해 API 키를 별도로 넣게 되면 모바일뿐만 아니라 PC에서도 공유가 가능합니다. (18년 02월 07일 업데이트 확인)

API키 발급 : https://developers.kakao.com/

 

카카오 계정 로그인 -> 애플리케이션 생성 -> 설정 항목에 일반 -> Java Script 키

출처: http://prolite.tistory.com/783  [내 안의 디지털 세상]

 

변경된 소스코드

 

/* Share on KakaoTalk */
<a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>

<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Kakao.init('카카오톡 자바스크립트 API 키');

<!-- KakaoTalk Share Script -->
<script>
function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
</script>

 

카카오톡공유 소스-180208.txt

 

 

 

 

 

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!