워드프레스 소셜 공유버튼 만들기 카카오톡 포함플러그인 없음 무료
워드프레스에서 카카오톡을 포함한 소셜 공유 버튼을 플러그인 없이 무료로 설치하는 방법에 대해 자세히 알아보세요.
1. 카카오 디벨로퍼스 자바 스크립트 키 가져오기
워드프레스 소셜 공유 버튼 만들기는 처음에는 복잡하게 느껴질 수 있지만, 차근차근 단계를 밟으면 생각보다 쉬운 작업이 됩니다. 특히 카카오톡 공유 버튼은 필수적입니다. 카카오톡은 한국 내에서 널리 사용되는 메신저인 만큼, 이를 통해 나의 블로그 포스트가 더 많은 사람들에게 전해질 수 있습니다.
카카오톡 공유 버튼을 생성하기 위해 가장 먼저 필요한 것이 카카오 디벨로퍼스에서 제공하는 자바스크립트 키입니다. 이 키는 카카오 API와 상호작용할 수 있도록 도와주는 식별자 역할을 합니다.
- 카카오 디벨로퍼스 웹사이트를 검색하여 접속하고,
- 로그인하는 과정에서 대부분의 사용자들은 카카오 계정을 이미 보유하고 있을 것이므로, 해당 아이디와 비밀번호로 쉽게 로그인이 가능합니다.
- 로그인 후, 애플리케이션 추가하기 버튼을 클릭하여 새로운 애플리케이션을 만들어줍니다.
여기서 주의할 점은 애플리케이션의 이름과 사업자명을 입력하는 과정입니다. 이 두 가지는 자유롭게 설정할 수 있지만, 필수 동의 항목에 체크하는 것을 잊지 말아야 합니다. 저장 후, 생성된 애플리케이션을 클릭하면 자바스크립트 키를 확인할 수 있습니다.
아래의 표는 이 과정을 요약한 것입니다.
| 단계 | 설명 |
|---|---|
| 1. 카카오 디벨로퍼스 검색 | 웹사이트에 접근합니다. |
| 2. 로그인 | 카카오 계정으로 로그인합니다. |
| 3. 애플리케이션 추가 | 새로운 애플리케이션을 생성합니다. |
| 4. 자바스크립트 키 복사 | 생성된 애플리케이션에서 키를 복사합니다. |
이렇게 해서 자바스크립트 키를 복사한 후, 플랫폼 설정을 통해 웹 플랫폼을 등록해 주어야 합니다. 여기에서 올바른 도메인을 입력해주는 것이 중요합니다. 도메인 주소를 등록하는 과정을 통해 카카오 API가 해당 도메인에서만 작동하도록 제한이 걸립니다.
💡 산돌구름 폰트 설치 방법을 자세히 알아보세요! 💡
2. SNS 이미지 아이콘 가져오기(카카오톡 외)
이제는 카카오톡 공유 버튼과 함께 사용할 SNS 아이콘 이미지를 준비할 차례입니다. 블로그의 디자인이나 테마와 부합하는 아이콘을 사용하는 것이 중요합니다. 이를 통해 독자에게 더 직관적이고 매력적인 인터페이스를 제공할 수 있습니다.
- 여러 SNS 플랫폼을 고려하여 아이콘을 다운로드합니다. 카카오톡 외에도 페이스북, 트위터, 네이버 블로그 등 다양한 아이콘을 가져올 수 있습니다.
- 다운로드한 이미지 파일은 PNG 형식이 일반적이므로, 원활하게 사용이 가능합니다.
- 원하는 대로 이미지 편집이 가능하니, 색상이나 크기를 조절하여 블로그에 맞게 변형시킬 수 있습니다.
다음 표는 주요 SNS 아이콘과 각 아이콘의 용도를 정리한 것입니다.
| SNS 아이콘 | 용도 |
|---|---|
| 카카오톡 | 한국에서 가장 많이 사용되는 메신저 |
| 페이스북 | 해외 사용자 및 다양한 콘텐츠와 연결 |
| 트위터 | 짧은 메시지와 새로운 소식 전달 |
| 네이버 블로그 | 한국 사용자 대상으로 다양한 글 공유 |
이러한 소셜 미디어 아이콘은 방문자들이 나의 포스트를 손쉽게 공유하게 만들며, 결과적으로 블로그 방문자 수도 증가할 것입니다. 이미지를 가져온 후에는 워드프레스의 미디어 라이브러리에 업로드하겠습니다.
💡 산돌구름 폰트 설치 방법을 쉽게 알아보세요. 💡
3. 워드프레스 미디어 라이브러리에 업로드
이 단계에서는 우리가 다운로드한 SNS 아이콘 이미지를 워드프레스에 업로드하여 사용할 수 있도록 준비할 것입니다. 미디어 라이브러리는 워드프레스에서 콘텐츠를 풍부하게 만들어 주는 중요한 역할을 합니다.
- 워드프레스 대시보드에 로그인한 후, 미디어 > 새로 추가를 클릭합니다.
- 업로드할 파일을 선택하여 한 번에 여러 이미지를 동시에 올릴 수 있습니다.
- 업로드한 이미지가 보여지면, 해당 이미지의 파일 URL을 확인하는 것이 중요합니다. 각 아이콘에 대해 URL을 별도로 확인하여 나중에 사용할 수 있게 복사해 두기 바랍니다.
아래 표는 이미지 업로드 과정에서 주의해야 할 점들을 정리한 것입니다.
| 단계 | 주의사항 |
|---|---|
| 1. 미디어 라이브러리 열기 | 항상 새로 추가 버튼을 클릭하여 업로드합니다. |
| 2. 이미지 선택 | 한 번에 여러 이미지를 선택해도 무방합니다. |
| 3. 파일 URL 복사 | 후에 사용할 수 있도록 URL을 복사해 둡니다. |
이제 SNS 아이콘 이미지를 미디어 라이브러리에 업로드했으니, 다음 단계인 카카오톡 개발자 자바스크립트 키를 설정할 차례입니다.
💡 웹디자인에 최적화된 폰트를 지금 확인해 보세요! 💡
4. 카카오톡 개발자 자바스크립트 키 넣어주는 방법
💡 카카오톡 소셜 공유 버튼을 쉽게 설정하는 방법을 알아보세요. 💡
로그인 후에는 워드프레스를 수정하여 카카오톡 공유 버튼을 본격적으로 추가할 준비가 되었습니다. 이를 위해서는 head & footer code 플러그인을 사용하는 것이 좋습니다. 이 플러그인은 웹사이트의 헤드 및 푸터 부분에 사용자 정의 코드를 추가하는 데 사용할 수 있습니다.
- head & footer code 플러그인을 설치하고 활성화합니다.
- 아까 복사해 두었던 자바스크립트 키를 아래와 같은 코드 형식으로 입력합니다.
위의 코드에서 카카오 개발자 자바스크립트 키를 입력합니다. 부분에 복사한 자바스크립트 키를 붙여넣기 하여야 합니다. 설정이 완료되면 변경 사항을 저장해주세요.
| 단계 | 작업 내용 |
|---|---|
| 1. 플러그인 설치 | head & footer code 플러그인을 설치합니다. |
| 2. 자바스크립트 키 입력 | 카카오톡 키를 위 코드 형식으로 입력합니다. |
| 3. 저장 | 변경 사항을 반드시 저장합니다. |
자바스크립트 키 입력이 모두 끝났다면, 다음 단계로 넘어가서 SNS 공유 코드
워드프레스에서 카카오톡 소셜 공유버튼 무료로 만들기
워드프레스에서 카카오톡 소셜 공유버튼 무료로 만들기
워드프레스에서 카카오톡 소셜 공유버튼 무료로 만들기