구글블로그 본문에 글 주소 URL를 복사하는 링크 공유 버튼을 적용시켜보자
구글 블로그(Blogger)에 대해서 하나 하나 알아가고 터득하는 중입니다. 구글 블로거에 대한 정보는 아직까지 많지 않아요. 마치 티스토리 초창기를 보는 것 같습니다. 정보가 거의 없어서 맨 땅에 헤딩하듯 알아가는 그런 느낌이죠. 근데 저는 이게 재밌습니다. 사용자가 많지 않아서 오히려 좋은 상황!
이번에는 본문에 공유 기능을 넣어보려고 했는데 생각해보니까 이 쉬운 공유 기능을 지금까지 저는 단 한 번도 사용해본적이 없어요. 오히려 URL을 복사해서 사용했던 경우가 압도적으로 많습니다. 그것도 공유하는 SNS는 카카오톡이 99% 이상이고 나머지는 없다시피 합니다. 한국에서 스마트폰 어플리케이션 중에서 단연코 사용율이 가장 우수한건 카카오톡일겁니다. 카카오톡 서버 마비 사태가 발생하면 일에 지장이 발생할 수준이니 말 다 했죠. 따라서 저도 이따금씩 사용하는 공유 조차도 카카오톡에 공유하는 상황만 있었지, 밴드니 X(구 트위터)니 페북이니~ 이런 플랫폼에 공유를 시도해본적은 아직까지 없습니다. 그렇기에 이번 구글 블로거 본문에 공유기능을 넣는 버튼도 심플하게 구성했습니다. 단순히 현재 글의 URL 주소만 복사하는 기능입니다.
구글 블로거 본문 URL 복사 버튼은 친효스킨 For Blogger 기준으로 제작되었습니다. 따라서 타 스킨의 경우에는 형태가 비정상적으로 적용될 수 있다는 점! 참고해 주시기 바랍니다.
HTML + Script 세팅
보통은 따로 하지만 구글 블로거의 XML 문서 구조를 아직 완벽히 파악해둔게 아니기에 저는 같이 묶음으로 처리하고 있습니다. 다만 HTML은 뼈대 부분인데다 문서에 실제로 노출되는 요소이니 왠만하면 여러분들께서 사용중인 본문의 하단 부분을 찾아서 해당 위치에 태그와 스크립트를 같이 넣어주시면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- URL공유버튼 --> <div id='urlShare'> <button class='copyBtn' onclick='copyUrl()' type='button'>이 글이 도움 되었다면 여기를 눌러서 링크를 공유하세요!</button> </div> <script> let nowUrl = window.location.href; function copyUrl(){ navigator.clipboard.writeText(nowUrl).then(res=>{ alert("주소가 복사되었습니다!"); }) } </script> | cs |
위의 코드를 복사해서 사용하시면 됩니다. 전체 싹 다 같이 복사 후 붙여넣기 하시면 됩니다. 친효스킨 For Blogger의 경우에는 다음의 태그 바로 하단에 넣어줬습니다.
1 | <div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'><data:post.body/></div> | cs |
다시 한 번 말씀 드리지만 현재 사용중인 스킨마다 구조가 상이합니다. 일단 본문에 해당되는 태그 위치를 파악 후 해당 태그의 끝 부분에 붙여넣기를 해주시면 된다는 점이 핵심입니다.
CSS 세팅
이제 버튼을 시각적으로 꾸며줄 수 있는 CSS만 세팅하면 끝입니다. 참고로 저는 단순한 디자인을 좋아해서 이번 버튼도 매우 심플하게 완성시켰습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* URL공유버튼 */ #urlShare button.copyBtn { position: relative; display: block; padding: 20px 10px; margin: 20px 0; width: 100%; border: none; border-radius: 20px; background-color: #f7f7f7; } #urlShare button.copyBtn:active { top: 2px; left: 1px; background-color: #eee; } | cs |
이 코드를 복사 후 스킨의 CSS 영역에 붙여넣기 하시면 됩니다. 티스토리와는 다르게 구글 블로거같은 XML 통합 웹 파일의 경우에는 CSS와 HTML, Script 코드가 모두 한 개의 문서 안에 통합되어 있습니다. 따러서 CSS의 영역을 찾기 위해서는 CSS 코드가 밀집된 영역을 찾아야 합니다. 보편적으로는 가장 쉽게 찾을 수 있는 방법이 body 요소에 적용된 CSS를 검색하는 것입니다.
구글 블로거 적용
구글 블로거의 관리자 화면으로 들어갑니다. 테마에서 맞춤설정 바로 오른쪽의 더 보기 아이콘을 클릭합니다.
HTML 편집으로 들어갑니다.
아까 말씀드렸듯 사용자의 스킨에 따라 XML 구조가 전부 제각각입니다. 친효스킨의 경우에는 이 위치입니다. 위에서 설명드린 내용에 더 추가하자면 <b:includable id='postBodySnippet' var='post'> 요소와도 가깝습니다.
CSS 코드가 모여있는 영역이 반드시 있습니다. 해당 위치에 CSS 코드를 붙여넣기 해주면 됩니다. CSS 영역 안에만 넣어두면 되며 정확한 코드 위치는 상관 없습니다.
모든 세팅이 완료되었다면 오른쪽 상단의 저장 버튼을 눌러줍니다. 이렇게해서 본문에 잘 적용이 되었는지를 확인하시면 됩니다.
잘 작동되는지 확인
일단 본문 하단에 정상적으로 적용은 되어있다는걸 확인했습니다. 보여지는건 적용이 된건 확인했지만 정상적으로 작동하는지는 직접 눌러봐야 알 수 있겠죠? 클릭하거나 터치해 봅니다.
정상적으로 작동하는군요. 하지만 제대로 글 주소가 복사된게 맞는지 확인해야 합니다. 확인 버튼을 눌러서 메모장에 한번 붙여넣기를 해봅니다.
Ctrl + V를 눌러서 붙여넣기한 결과 정상적으로 현재의 글 URL 주소가 복사가 되었음을 알 수 있습니다. 이제 다른 글들도 같은 방법으로 점검해 보시기 바랍니다. 끝.
댓글
댓글 쓰기
비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.