Blogger에 소셜 공유 버튼 추가하기

왜 기본 버튼만으로는 부족한가

• Blogger의 기본 “공유 버튼 표시” 옵션은 간단하지만 네트워크 선택 불가와 Facebook Like/Twitter Tweet 같은 버튼 부재 등 확장성이 떨어집니다.
• 브랜드 노출, 트래픽 유도, 사용성 측면에서 개별 네트워크 버튼과 맞춤 문구(예: tw:via)가 필요합니다.

중요: 아래 UI 명령어들은 Blogger 대시보드에서 “Design”(디자인) → 해당 위젯의 “Edit”(수정) 또는 “Edit HTML”(HTML 수정) 항목을 찾는 방식입니다. UI 라벨은 화면 환경에 따라 다를 수 있습니다.

준비: AddThis 계정 만들기

1. AddThis(https://www.addthis.com)에서 계정을 등록합니다.
2. 대시보드에서 “Get AddThis”를 선택해 공유 버튼 구성을 시작합니다.

다음으로 포스트 옆에 기본 공유 버튼이 나타납니다.

AddThis 설정(기본 흐름)

1. AddThis에 로그인 후 버튼 디자인 선택: “Customize”로 이동합니다.
2. Platform(플랫폼)에서 “Blogger” 대신 “Website”를 선택하면 전체 HTML 코드가 제공되어 추후 편집이 가능합니다.
3. 원하는 스타일을 고르고 “Grab It”으로 코드를 복사합니다.

Blogger에 코드 붙여넣기

1. Blogger 대시보드에서 “Design”(디자인) → “Edit HTML”(HTML 수정)을 선택합니다.
2. 템플릿 전체 HTML이 나타나면 “Expand Widget Templates”(위젯 템플릿 확장)을 클릭합니다.
3. 공유 버튼을 표시할 위치(예: 포스트 본문 바로 아래)를 찾아 AddThis에서 받은 코드를 붙여넣습니다.
4. “Save Template”(템플릿 저장) 후 블로그를 확인합니다.

원하는 위치에 붙여넣으면 이렇게 보입니다:

AddThis HTML 코드와 주요 속성 설명

아래 코드는 AddThis의 일반적인 위젯 예시입니다. (pubid는 AddThis 계정에서 발급받은 퍼블리셔 ID로 교체하세요.)

일반 함수 설정

• addthis:title과 addthis:url을 Blogger 데이터로 연결하면 공유 시 자동으로 포스트 제목과 영구 URL이 삽입됩니다.
• Blogger 템플릿에서 다음과 같이 추가하세요:

  ...

효과: Twitter 공유 버튼을 클릭하면 트윗 본문에 현재 포스트 제목과 URL이 자동으로 들어갑니다.

예시 트윗 출력: Make Tech Easier http://t.co/nCLRCEE via @AddThis

추가 버튼(서비스) 선택

• AddThis의 각 서비스는 클래스명으로 지정합니다. 예를 들어 Twitter Tweet 버튼과 Facebook Like 버튼을 직접 추가하려면 다음과 같이 합니다:

• tw:via 속성은 트윗에 표시될 계정명(예: 본문 끝의 출처)을 지정합니다. 원하면 자신의 Twitter 핸들을 넣으세요.

예: 최종 코드 샘플

아래는 앞서 설명한 설정을 적용한 예시 코드 조합입니다. Blogger 템플릿의 원하는 위치에 붙여넣고 pubid와 Twitter 계정명을 교체하세요.

커스터마이즈 팁과 주의사항

• 버튼 위치: 본문 바로 아래, 사이드바, 또는 고정(fixed) 바 등 가독성과 클릭 가능성이 높은 위치를 우선 시험하세요.
• 트래킹: AddThis는 기본적으로 공유 통계를 제공하므로 대시보드에서 어떤 네트워크가 반응이 좋은지 확인하세요.
• 로딩 성능: 외부 스크립트 추가는 페이지 로딩에 영향을 줄 수 있습니다. 비동기 로딩이나 지연 로딩을 고려하세요.
• 개인 정보: 개인정보·쿠키 관련 법규(GDPR 등)를 준수해야 하는 경우 AddThis의 데이터 사용 정책을 확인하세요.

중요: 퍼블리셔 ID, 소셜 계정명 같은 키 값은 반드시 자신의 계정 값으로 바꾸세요.

대안과 비교

• 공식 버튼 사용: Facebook, Twitter의 공식 버튼을 각각 직접 구현하면 외부 서비스 의존도를 줄일 수 있지만 설정과 유지보수가 늘어납니다.
• AddToAny 등 다른 써드파티: AddThis와 유사한 기능을 제공하며, 인터페이스와 개인정보 처리 정책이 다릅니다. 요구사항(속도, 맞춤화, 통계)에 따라 선택하세요.

실패 사례와 대비

• 공유 버튼이 보이지 않을 때: 캐시를 비우고 브라우저 콘솔 에러를 확인하세요. 스크립트 URL이 차단되었거나 pubid가 잘못된 경우가 많습니다.
• 모바일에서 버튼이 잘못 표시될 때: 반응형 스타일 또는 선택한 AddThis 스타일이 모바일을 지원하는지 확인하세요.

테스트 체크리스트 (롤아웃 전)

• 데스크톱과 모바일에서 공유 버튼이 정상 노출되는가?
• 클릭 시 Facebook/Twitter가 올바른 제목과 URL을 가져오는가?
• 트래킹(통계)이 AddThis 대시보드에 기록되는가?
• 페이지 로드 성능에 큰 영향을 주지 않는가?
• 개인정보 표시(쿠키/제3자 스크립트)에 대한 고지 문구가 있는가?

간단 용어집

• AddThis: 여러 소셜 네트워크의 공유 버튼을 손쉽게 추가할 수 있는 외부 서비스.
• expr:addthis:title: Blogger 템플릿 변수로 포스트 제목을 공유에 자동으로 넣는 속성.
• tw:via: 트위터 공유 시 출처로 표시할 사용자명.

소셜 미디어용 미리보기 예시 (SNS 공유에 쓸 문장)

• OG 타이틀(예): Blogger에서 소셜 공유 버튼으로 더 쉽게 공유하세요
• OG 설명(예): AddThis를 통해 Facebook Like와 Twitter Tweet 버튼을 Blogger에 간단히 추가하는 방법을 단계별로 설명합니다.

결론 및 권장 실행 순서

1. AddThis 계정 생성 및 pubid 확보.
2. 원하는 스타일과 플랫폼 선택 → “Website”로 HTML 코드 복사.
3. Blogger 템플릿에서 적절한 위치에 붙여넣고 pubid와 tw:via 등을 교체.
4. 데스크톱/모바일 테스트 및 AddThis 대시보드 통계 확인.

요약: AddThis를 사용하면 Blogger의 기본 공유 기능을 확장해 Facebook Like, Twitter Tweet 등 주요 네트워크 버튼을 추가하고, 포스트 제목·URL 자동 연결과 같은 맞춤형 설정을 적용할 수 있습니다. 테스트와 개인정보 관련 고지를 잊지 마세요.

Критерии приёмки

• 공유 버튼이 모든 주요 브라우저에서 정상 작동하고, 공유 시 제목 및 URL이 올바르게 포함되어야 합니다.