얼마 전에 플러그인을 활용해 워드프레스에 SNS 공유 버튼을 추가하는 방법을 소개한 적이 있습니다. 이번에는 플러그인 없이 HTML과 CSS 코드를 활용해 SNS 공유 버튼을 만들고, Ad Inserter를 활용해 자동으로 포스팅 된 글에 삽입하는 방법을 알아보겠습니다.
워드프레스에서 플러그인 없이 SNS 공유 버튼 만들고 Ad Inserter로 자동 삽입하기
저는 개인적으로 워드프레스 블로그를 운영하면서 플러그인을 설치하는 것을 좋아하지 않습니다. 그래서 며칠 전 SNS 공유 버튼 추가 플러그인을 설치한 후 마음이 편치 않았습니다. 그 글에서도 언급했듯, 제가 작성한 글에 SNS 공유 버튼을 붙이고 싶은 마음도 없는데, 플러그인까지 추가적으로 설치해야 했으니 말이죠.
그래서 직접 HTML 코드를 적용하려고 했지만, 또 다른 문제가 생겼습니다. 작성한 SNS 공유 버튼 HTML코드를 워드프레스에서 지원하는 패턴(서식)으로 만들어 사용하더라도, 글을 쓸 때마다 직접 수작업으로 추가해야 하는 번거로움이 생겨 버린 것입니다.
이 문제를 어떻게 해결할까 고민하다가, 저 뿐만 아니라 워드프레스로 블로그를 운영하는 대부분의 분들이 애드센스를 목적으로 하고 있고, 광고를 자동으로 삽입해 주는 Ad Inserter라는 플러그인을 사용하고 있다는 것이 떠올랐습니다. Ad Inserter가 광고만 삽입할 수 있는 것이 아니라, 다른 HTML 코드도 삽입할 수 있지 않을까 하고 실험해보니 생각대로 가능했습니다.
이 글에서는 SNS 공유 버튼을 HTML과 CSS 코드로 직접 작성하고, 작성한 코드를 Ad Inserter를 활용해 글의 원하는 위치에 자동으로 삽입하는 과정을 자세히 소개하도록 하겠습니다.
시작하기 전에 한 가지 말씀드리고 싶은 것이, 제가 소개한 SNS 공유 버튼 플러그인도 그렇고, 해외에서 개발된 다른 플러그인들도 각각의 장단점이 있습니다. 저의 성향상 플러그인을 되도록 사용하고 싶지 않기 때문에 HTML 코드를 직접 작성해 사용하는 것이지, 이들 플러그인들이 안 좋은 것은 아닙니다. 플러그인을 사용하면 쉽게 원하는 기능을 추가할 수 있으니 부정적으로 생각하지 마시고, 필요한 플러그인은 사용해 보시길 권해 드립니다.
1. SNS 공유 버튼 HTML과 CSS 코드 적용하기
SNS 공유 버튼 HTML코드가 길고 복잡해 보일 수 있지만, 테이블을 활용해 SNS 공유 버튼을 추가한 것이 전부입니다. SNS 공유 버튼은 아래 그림에서 보이는 것처럼 7개입니다.
- 이메일로 공유하기
- 링크 복사하기
- 네이버 블로그에 공유하기
- 네이버 밴드에 공유하기
- 페이스북에 공유하기
- 트위터(X)에 공유하기
- 텔레그램에 공유하기
SNS 공유 버튼 HTML 코드는 아래와 같으며, 여기서 필요하지 않은 SNS 공유 버튼은 해당 <td>~</td>를 삭제하시면 됩니다. 그리고 SNS 공유 아이콘이 오른쪽 정렬되어 있는데, 왼쪽으로 변경하고 싶다면 아래 코드의 2번째 줄에 있는 right를 left로 수정하시면 됩니다.
<div class="sns-link">
<table style="width:280px; float: right;">
<tr>
<td style="width: 38px;">
<a href="#" onclick="window.location.href='mailto:?subject=' + encodeURIComponent(document.title) + '&body=' + encodeURIComponent('Check out this page: ') + encodeURIComponent(document.URL); return false;" target="_blank" rel="nofollow noopener">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/mail.webp" width="35px" height="35px" alt="이메일로 공유하기" title="이메일로 공유하기">
</a>
</td>
<td style="width: 38px;">
<a href="#" onclick="event.preventDefault(); var dummy = document.createElement('input'), text = window.location.href; document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); alert('링크가 클립보드에 복사되었습니다.');" rel="nofollow">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/link.webp" width="35px" height="35px" alt="링크 복사하기" title="링크 복사하기">
</a>
</td>
<td style="width: 38px;">
<a href="#" onclick="window.open('http://share.naver.com/web/shareView.nhn?url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;" target="_blank" rel="nofollow noopener">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/naver-blog.webp" width="35px" height="35px" alt="네이버 블로그에 공유하기" title="네이버 블로그에 공유하기">
</a>
</td>
<td style="width: 38px;">
<a href="#" onclick="window.open('http://band.us/plugin/share?body=' + encodeURIComponent(document.title) + encodeURIComponent('\r\n') + encodeURIComponent(document.URL) + '&route=' + encodeURIComponent(document.URL), 'bandsharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;" target="_blank" rel="nofollow noopener">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/naver-band.webp" width="35px" height="35px" alt="네이버 밴드에 공유하기" title="네이버 밴드에 공유하기">
</a>
</td>
<td style="width: 38px;">
<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;" target="_blank" rel="nofollow noopener">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/facebook.webp" width="35px" height="35px" alt="페이스북에 공유하기" title="페이스북에 공유하기">
</a>
</td>
<td style="width: 38px;">
<a href="#" onclick="window.open('https://twitter.com/intent/tweet?text=[공유] ' + encodeURIComponent(document.URL) + ' - ' + encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;" target="_blank" rel="nofollow noopener">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/twitter-2.webp" width="35px" height="35px" alt="트위터(X)에 공유하기" title="트위터(X)에 공유하기">
</a>
</td>
<td style="width: 38px;">
<a href="#" onclick="window.open('https://telegram.me/share/url?url=' + encodeURIComponent(document.URL) + '&text=' + encodeURIComponent(document.title), 'telegramsharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600'); return false;" target="_blank" rel="nofollow noopener">
<img src="https://www.zisikbug.com/wp-content/uploads/2024/02/telegram.webp" width="35px" height="35px" alt="텔레그램에 공유하기" title="텔레그램에 공유하기">
</a>
</td>
</tr>
</table>
</div>
CSS 코드는 link와 테이블의 속성을 설정한 것으로 아래와 같습니다.
.sns-link {
margin-top: 30px;
}
.sns-link a {
display: block;
color: white;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.sns-link table, .sns-link td {
border: none;
border-collapse: collapse;
margin-right: 0;
}
CSS 코드는 워드프레스 관리자 화면의 왼쪽에 있는 메뉴에서 ‘외모’ → ‘ 추가 CSS’ 를 클릭한 후, 아래 그림과 같이 맨 아래에 위의 CSS 코드를 삽입한 후, ‘발행함’ 를 클릭하면 적용됩니다.
2. Ad Inserter를 활용해 포스팅 글에 자동으로 SNS 공유 버튼 삽입하기
SNS 공유 버튼 삽입을 위한 HTML과 CSS 코드가 준비되었다면, 이제 Ad Inserter 플러그인을 활용해 포스팅한 글에 자동으로 SNS 공유 링크를 삽입하는 설정을 해보겠습니다.
서두에서도 말씀드렸듯이 이 글은 이미 Ad Inserter 플러그인을 설치하신 분들을 대상으로 합니다. Ad Inserter를 설치하지 않으신 분들은 조금 불편하지만 HTML 코드를 패턴으로 만들어 수작업으로 삽입하시면 됩니다. 워드프레스에서 패턴을 만들고 활용하는 방법은 여기를 참고하세요.
Ad Inserter 설정으로 들어가서 비어있는 번호 하나를 선택합니다. 저는 16번을 사용했습니다.
① 위의 HTML 코드를 전체 복사하여 ① 위치에 붙여넣기 합니다.
② ‘Posts’ 를 체크합니다. (발행되는 모든 글에 SNS 공유 버튼이 추가됩니다.)
③ Insertion 에서 ‘After paragraph’ 를 선택합니다.
④ ‘¶’ 를 클릭하여 세부 설정이 가능하도록 합니다
⑤ Count 에서 ‘from bottom’를 선택합니다.
위와 같이 SNS 공유 버튼을 자동으로 삽입하기 위한 Ad Inserter 설정을 완료하고, ‘Save Setting 1 – 16’를 클릭하여 설정을 저장하면 발행된 모든 글에 적용됩니다.
HTML과 CSS 코드를 추가하고, Ad Inserter 설정까지 했으니, 적용이 잘 됐는지 확인해 보도록 하겠습니다. 아래 그림은 결과 화면입니다. 원하는데로 잘 되었네요.
오늘은 플러그인을 사용하지 않고 HTML과 CSS를 활용해 SNS 공유 버튼을 추가하고, Ad Inserter를 이용해 SNS 공유 버튼을 자동으로 포스팅된 글에 삽입하는 방법을 알아보았습니다. SNS 공유 버튼을 삽입해주는 전용 플러그인을 사용하는 것이 쉽고 편하지만, 플러그인이 많아질수록 서버의 속도에 영향을 주기 때문에, 사용하는 플러그인의 수를 조절하는 것이 좋습니다. 이 글에서 말씀드린 HTML 코드가 조금 어렵고 복잡하게 느껴질 수도 있지만, 그대로 복사해서 사용하면 되기 때문에 충분히 활용할 수 있을 겁니다. 이 글이 여러분의 블로그 운영에 도움이 되었기를 바랍니다.