SNS, 카카오톡, 페이스북, 트위터 공유 버튼 달기

 이번 내용은 티스토리 블로그에서 사라진 SNS 공유 플러그인을 대체할 공유버튼을 생성하는 방법 소개입니다.

 

 천천히 하나씩 따라하면 매우 쉽게 나의 블로그에 적용을 시킬 수가 있습니다.

 

 티스토리에 있었던 공유 플러그인과 달리 원하는 SNS 앱 아이콘 파일로 설정을 할 수 있기에 장점이 많습니다.

 

 

🥕광고 차단 프로그램을 OFF 하여 주시면 좋은 콘텐츠를 제작하는데 있어 많은 힘이 됩니다.

 

안녕하세요, 마숲의 블로그 마숲입니다 ~ ^ ^

 

 

티스토리 블로그에 소셜 SNS 공유버튼 생성하기

1. 아래의 공유 아이콘 파일을 다운 받습니다.

 

반응형

 

원하는 다른 PNG로 제작된 아이콘들이 있다면 그것을 사용하셔도 됩니다. (카카오스토리는 더이상 공유 기능을 지원하지 않기에 뺐습니다.)

 

band.png

0.00MB

Facebook.png

0.00MB

Kakao.png

0.00MB

Naver.png

0.00MB

share_link.png

0.00MB

Twitter.png

0.00MB

 

 

 

2. 티스토리 관리자 페이지에 있는 메뉴 중에서 꾸미기 카테고리에 있는 스킨 편집을 클릭한 다음, Html 편집 ➡️ 파일업로드를 선택합니다.

 

 

 

 

 

3. 하단에 있는 ➕ 추가 버튼을 클릭한 다음, 1번에서 다운 받았던 SNS 아이콘들을 모두 업로드 시켜줍니다.

 

 

 

 

4. 아래의 자바 스크립트(URL 링크 복사 및 카카오톡)를 복사하여 HTML 편집 페이지에 삽입하여 줍니다. HTML 페이지는 파일업로드 옆 탭에 있습니다.

 

 

<!-- START: 카카오톡 공유 & 링크 복사 스크립트 & 밴드용 domain 가져오기 -->

<script>

    function ShareKakaoTalk() {

        Kakao.Link.sendScrap({

            requestUrl: location.href  

        });

    }

    let nowUrl = window.location.href;

    function copyUrl(){

        navigator.clipboard.writeText(nowUrl).then(res=>{

          alert("주소가 복사되었습니다!");

        })

    }    

    function getDomain() {

        var url = new URL(document.URL);

        return url.hostname;

    }

</script>

 

<!-- END: 카카오톡 공유 & 링크 복사 스크립트 & 밴드용 domain 가져오기 -->

 

 

 

마숲은 가장 아래쪽에 있는 </body> 위에 넣었습니다.

 

 

5. 콘트롤(Ctrl) ➕ F 를 눌러 검색창에 ##_article_rep_desc_##을 검색합니다. ( 사용하고 있는 스킨이 북클럽일 경우입니다. 다른 스킨의 치환자는 해당 스킨의 치환자를 알아보신 다음, 해당 치환자를 검색하면 됩니다.)

 

 

 

📌 스킨 이름 확인은 스킨 편집 페이지에 아래와 같이 나와 있습니다. Book Club라고 표시가 되어 있습니다.

 

 

 

 

6. 제대로 검색을 했다면 총 2개가 검색이 됩니다.

 

 ⬇️ 아래 화살표를 한번 더 눌러 두 번째에 나타나는 치환자의 위치로 이동합니다. 아래의 캡처 이미지가 두 번째에 있는 치환자입니다.

 

 

7. </div> 아래에 다음의 코드를 넣어줍니다.

 

 

<!-- SNS Share begin -->

<div style="width:100%; margin:30px 0px; text-align:center;">

<a href="#" target="_blank" onclick="javascript:window.open( 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent( document.URL )+'&t=' + encodeURIComponent( document.title ), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="페이스북"><img src="./images/Facebook.png" alt="facebook"></a>

<a href="#" target="_blank" onclick="javascript:window.open( 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( document.title ) + '%20(' + encodeURIComponent( document.URL ) + ')', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="트위터"><img src="./images/Twitter.png" alt="twitter"></a>

<a href="javascript:ShareKakaoTalk()" title="카카오톡"><img src="./images/Kakao.png" alt="kakaoTalk"></a>

 

<a href="#" target="_blank" onclick="javascript:window.open( 'https://share.naver.com/web/shareView.nhn?url=' + encodeURIComponent( document.URL ) + '&title=' + encodeURIComponent( document.title ), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=600, height=600' ); return false;" title="네이버"><img src="./images/Naver.png" alt="naver"></a>

<a href="#" target="_blank" onclick="javascript:window.open( ' https://band.us/plugin/share?body=' + encodeURIComponent(document.URL) + '&route=' + getDomain(), 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=600, width=600' ); return false;" title="밴드"><img src="./images/band.png" alt="band"></a>

<a href="javascript:copyUrl()" title="링크공유"><img src="./images/share_link.png" alt="shareLink"></a>

</div>

<!-- SNS Share end -->

 

 

확실한 이해를 위해서 아래의 캡처를 참고하시면 되겠습니다.

 

 

8. 우측 상단의 저장 버튼을 눌러 저장을 해주면 끝이 납니다.

 

 

SNS 소셜 공유 버튼 확인하기

 자 이제 쉬운 것 같으면서도 어렵고, 어려운 듯 쉬운 SNS 공유 단추 달기를 끝냈습니다.

 

무사히 잘 작동을 하는지 작성한 글 중에서 아무거나 클릭을 해보겠습니다. 게시글 하단에 아래와 같이 잘 표시가 되고 있는 것을 확인할 수 있습니다.

 

 

 페이스북이 먼저 나오는 것이 싫고, 다른 것이 먼저 나타났으면 좋겠다는 분들은 7번에 있는 코드 순서를 변경하시면 됩니다.

 

 정렬 순서도 바꾸고 싶으시면 7번에 있는 코드 첫 줄에 나오는

 

 

<div style="width:100%; margin:30px 0px; text-align:center;"> 에서 ext-align:center;를 제거하시거나 혹은 left/right로 변경하시면 위치를 자유롭게 조절하실 수 있습니다. 

 

오늘의 내용은 어떻게 유익하셨나요?

 

매번 느끼는 것이지만, 이런 고급 정보를 주시는 분들은 이전에 여러 선배 블로거님들의 노고의 결과들 입니다.

 

 먼저 고생 많이 하여 주시고, 새로 블로그를 운영하기 시작한 블린이들을 도와주시는 블로거 선배님들께 항상 감사를 드립니다.

📌 애드센스 블로그, 운영 TIP 모음 -2-

📌 애드센스 블로그, 운영 TIP 모음 -2-

 

블로그 운영, 애드센스 수익과 관련된 유익한 정보들을 모은 글입니다. 시간나시면 한번 읽어보시면 도움이 되실 겁니다.