블로그 꾸미기에는 별로 관심이 없었는데 애드센스 승인이라는 1차 목표와 또 승인 후 조금이라도 더 수익을 내기 위해서는 내 블로그를 최소한의 수준까지는 꾸밀 필요가 있다고 생각을 했습니다. 블로그의 컨텐츠 양과 질 두 가지를 모두 충족할 수 있다면 가장 좋겠지만 저는 아직 컨텐츠의 양과 질로 사용자를 이끌기에 부족한 상황임으로 틈틈히 내용을 익히면서 정리를 해 나가려 합니다.
우선 검색을 해 보았습니다. 키워드는 '티스토리 블로그에 SNS 공유 아이콘'으로 구글에서 검색을 했습니다. 역시나 나와 같은 생각을 하고 있는 사람들은 많습니다. 많은 결과물이 검색이 되었습니다.
다행스럽게도 티스토리 블로그는 기본적으로 SNS 공유 기능을 Plug-in 형태로 제공하고 있습니다. 기본 설정은 SNS 공유하기 기능을 사용하지 않는 것으로 설정이 되어 있습니다.
위 그림에서와 같이 기본 설정은 SNS 보내기가 없는 상태입니다. 그럼 티스트리 블로그의 내장기능(Plug-in)을 이용해서 SNS 보내기를 추가해 보겠습니다. 티스토리 관리 페이지로 접속을 합니다.
관리자 페이지에서 플러그인 > 플러그인 설정을 클릭합니다. 아래와 같이 플러그인 설정 페이지가 열립니다.
플러그인 설정 페이지에서 글 보내기 탭을 클릭하고 글 보내기 > SNS 글보내기를 클릭합니다.
위 그림과 같이 SNS 글보내기 창이 열리면 사용자 기호에 따라 설정 후 확인을 클릭하면 됩니다. 참고로 저는 아이콘만 가운데 정렬로 나타나게 했습니다. 그럼 내 글에서 SNS로 내보내기가 가능한지 확인 해 보겠습니다. 제일 처음 보았던 그림과 아래 그림을 비교해 보세요. 똑 같은 블로그인데 위에는 없었던 SNS 보내기가 추가된 것을 알 수 있습니다.
페이스북 아이콘을 클릭 하면 아래 오른쪽에서와 같이 해당 블로그를 페이스북으로 공유할 수 있도록 창이 열리는 것을 확인했습니다.
제일 간단한 방법입니다. 원하는 기능은 정상적으로 작동하니 이렇게 사용해도 무방합니다. 그런데 이왕이면 다홍치마라고 조금 이쁜 모양이 없을까? 그래서 검색을 추가로 확인 해 보았습니다. 많은 글 중 쉽고 단순한 것을 찾으라 시간을 좀 보냈습니다. 결국 하나를 선택했습니다.
위 링크를 클릭해서 아래 그림과 같은 형태의 SNS 내보내기를 삽입할 수 있습니다. 일단 이대로 해 보고 마음에 들지 않을 경우 약간만 손을 보면 될 것 같습니다. 우선 블로그에 있는 내용대로 따라 해 보았습니다. 새로운 형태의 아이콘을 적용하기 위해 처음 적용했던 플러그인의 SNS 내보내기를 해제를 합니다. 위 설정과 동일한 방법으로 접속해서 설정해제를 클릭하면 됩니다.
위 링크를 클릭하면 아래 그림과 같은 페이지가 열립니다. 그림에서와 같이 아이콘 파일과 소스 파일을 다운로드 받을 수 있습니다. 각 링크를 클릭해서 아이콘 파일과 소스 파일을 다운을 받습니다. 아이콘 파일은 다운로드 후 압축을 풀어 줍니다.
설정하는 방법은 위 페이지에 상세하게 설명이 되어 있습니다. 간략하게 설명하면 우선 아이콘 파일을 업로드를 해야 합니다. 파일 업로드는 티스토리의 관리 페이지에서 HTML/CSS 편집을 이용해서 업로드 할 수 있습니다.
우선 압축을 풀어서 아이콘 파일을 확인합니다. 아래와 같이 5개의 아이콘을 확인 할 수 있습니다.
이제 HTML/CSS 편집을 클릭해서 아이콘 파일을 업로드 합니다. 아래 그림과 같이 따라 하시면 됩니다. 파일업로드 > 추가 > 파일선택 > 열기를 클릭하면 선택된 파일이 업로드 됩니다.
아래 그림과 같이 선택된 파일이 업로드 된 것을 확인할 수 있습니다.
파일 올리기가 끝났으니 이제는 소스 파일을 HTML에 붙여 넣으면 됩니다. 먼저 다운받은 소스 파일을 확인합니다. 뭔가 복잡해 보입니다. 몰라도 됩니다. 전체를 선택 후 복사를 합니다. Ctrl + A를 클릭해서 선택 후 Ctrl + C를 클릭하면 클립보드에 저장이 됩니다.
다시 티스토리 관리 페이지에서 HTML/CSS 편집을 클릭합니다. 아래 그림과 같이 오른쪽의 HTML 편집 창에서 Ctrl + F를 클릭해서 '##_article_rep_desc_##'를 입력 후 찾기를 진행하면 그림과 같이 해당 부분을 찾아줍니다. 바로 그 다음 행을 선택 후 클립보드에 저장된 소스를 붙여 넣으면 됩니다. Ctrl + V를 클릭하시면 됩니다.
위 그림과 같이 소스 붙여넣기를 수행 후 저장 버튼을 클릭합니다. 그럼 동일한 페이지가 어떻게 보여지는지 확인 해 보겠습니다. 소스를 그대로 사용했을 때 아래와 같은 결과물을 보여줍니다.
배포자의 홈페이지와는 약간 다른 형태를 보여줍니다. 아이콘의 배치도 정확하게 일치하지 않습니다. 개인적으로 좀 깔끔해 보이지는 않습니다. 그래서 소스를 약간 수정했습니다.
저는 미니멀 한 게 좋습니다. 우선 구글 프러스은 전략상(구글 애드센스가 목적), 그리고 페이스북, 카카오스토리, 밴드 4개의 아이콘만 넣습니다. 네이버와 Twitter는 제외시켰습니다. 이렇게 하고 소스를 수정해 가면서 위치와 모양을 손질했습니다. 불필요한 아이콘도 제거를 했습니다.
사람은 잘 버릴 수 있어야 합니다. 그렇게해서 최종 정리된 것은 아래와 같습니다. 아이콘 모양이 일치성이 없어서 조금 그런데 전체적으로 깔끔하니 만족합니다.
이렇게 수정한 내용이 현재 보시고 있는 페이지입니다.
혹, 필요하신 분이 계시면 사용할 수 있도록 아이콘과 수정된 소스를 파일로 첨부합니다.
소스및아이콘.zip