카카오톡 포함! 무료 워드프레스 소셜 공유버튼 만들기 플러그인 없이

워드프레스 소셜 공유버튼 만들기 카카오톡 포함 플러그인 없음 무료

워드프레스에서 카카오톡을 포함한 소셜 공유버튼을 플러그인 없이 무료로 만드는 방법을 자세히 설명합니다.

카카오 디벨로퍼스 자바 스크립트 키 가져오기

워드프레스에서 카카오톡을 포함한 소셜 공유버튼을 플러그인 없이 무료로 설치하려면 가장 먼저 카카오 디벨로퍼스에서 자바스크립트 키를 발급받아야 합니다. 이 과정은 다른 소셜 미디어와는 달리 약간 복잡할 수 있습니다. 카카오톡은 양방향 소통 방식이기 때문에 몇 가지 추가 단계를 요구합니다.

첫 번째 단계는 카카오 디벨로퍼스를 검색하고 로그인하는 것입니다. 카카오 아이디가 없는 사용자는 새로 만들 수 있으며, 이 단계는 매우 간단합니다. 로그인한 후에는 애플리케이션 추가하기 버튼을 클릭하여 새 앱을 만드는 페이지로 이동해야 합니다. 이 페이지에서 앱 이름과 사업자명을 입력하고 필수 동의 항목에 체크한 후 저장합니다.

이제 추가된 애플리케이션을 클릭하면 필요한 자바스크립트 키와 플랫폼 정보를 확인할 수 있습니다. 웹 플랫폼을 등록할 때는 자신의 워드프레스 웹사이트 도메인을 입력해야 하며, 입력이 완료되면 저장 버튼을 클릭합니다. 이 자바스크립트 키는 나중에 사용될 것이므로 꼭 기억해 두어야 합니다.

단계	설명
1	카카오 디벨로퍼스 로그인
2	애플리케이션 추가하기 클릭
3	앱 이름 및 사업자명 입력
4	필수 동의 항목 체크 후 저장
5	플랫폼 등록 및 도메인 입력

이 과정이 끝나면 자바스크립트 키를 바탕으로 카카오톡 공유 기능을 사용할 수 있는 준비가 완료됩니다.

💡 2023년 웹하드의 모든 정보를 지금 만나보세요. 💡

👉 2023년 인기 웹하드 비교보기

SNS 이미지 아이콘 가져오기(카카오톡 외)

이제 두 번째 단계는 SNS 공유 이미지 아이콘을 준비하는 것입니다. 카카오톡뿐만 아니라 다른 SNS (페이스북, 트위터, 네이버 블로그 등)에서도 사용할 아이콘이 필요합니다. 다양한 크기와 디자인의 소셜 미디어 아이콘이 필요하기 때문에 고해상도의 이미지를 추천합니다.

디자인 플랫폼인 Canva를 통해 자신만의 소셜 미디어 아이콘을 만들거나, 이미 디자인된 아이콘 세트를 다운로드 받을 수 있습니다. 이 아이콘들은 나중에 미디어 라이브러리에 업로드 되어야 합니다.

각 SNS 아이콘은 적절한 크기(예: 35px x 35px)로 디자인 되어야 하며, 사용자들이 쉽게 알아볼 수 있는 것이 중요합니다. 많은 무료 아이콘 리소스가 웹에서 사용 가능하므로 SNS 아이콘 무료 다운로드라고 검색하여 다양한 선택지를 찾아보세요.

SNS	아이콘 다운로드 링크
카카오톡	#>카카오톡 아이콘
페이스북	#>페이스북 아이콘
트위터	#>트위터 아이콘
네이버 블로그	#>네이버 블로그 아이콘

이렇게 준비된 이미지는 파일 이름과 포맷에 주의하여 저장해 두어야 합니다. 나중에 이 파일들이 워드프레스 미디어 라이브러리에 업로드될 것이므로, 이미지 주소를 쉽게 찾을 수 있도록 관리하는 것이 좋습니다.

💡 나만의 웹사이트에 소셜 공유 버튼 추가하는 방법을 알아보세요. 💡

👉 소셜 공유 만들기 확인하기

워드프레스 미디어 라이브러리에 업로드

이제, 다운로드한 소셜 아이콘 이미지 파일들을 워드프레스의 미디어 라이브러리에 업로드하는 과정입니다. 워드프레스 대시보드에 로그인 후 미디어 메뉴를 선택하여 라이브러리 페이지에 접근합니다. 상단의 새로 추가 버튼을 클릭하여 준비해둔 이미지 파일들을 한 번에 선택하여 업로드할 수 있습니다.

업로드가 완료되면 미디어 라이브러리에서 새로 추가된 이미지들을 찾아볼 수 있습니다. 각 이미지 파일을 클릭하면 오른쪽에 파일 URL이 표시됩니다. 이 URL은 후속 작업인 코드 작성 시 사용되기 때문에 주의 깊게 복사해 두어야 합니다.

단계	설명
1	미디어 메뉴에서 새로 추가 클릭
2	업로드할 이미지 선택
3	업로드 완료 후 이미지 URL 확인

미디어 라이브러리에 이미지를 성공적으로 업로드한 후, 각각의 이미지 URL을 기록해두면 다음 단계에서 유용하게 사용할 수 있습니다.

💡 카카오톡 공유 버튼을 손쉽게 만들어보세요! 💡

👉 나만의 소셜 공유 제작하기

카카오톡 개발자 자바 스크립트 키 넣어주는 방법

이제 약간의 코딩 작업이 필요합니다. 먼저, 워드프레스 사이트에 Head & Footer Code 플러그인이 설치되어 있는지 확인해야 하며, 없다면 설치하시면 됩니다. 플러그인을 설치한 후에는 플러그인 설정에서 제공된 카카오 자바스크립트 코드를 추가합니다.

구체적으로, 아래의 코드를 플러그인 설정에 붙여넣기해야 합니다. 이때 카카오 개발자 자바스크립트 키를 입력해 주세요 부분은 미리 준비해둔 자바스크립트 키로 교체해야 합니다.

이 코드는 카카오톡의 API를 통해 공유 기능을 사용할 수 있도록 설정합니다. 설정이 완료되면 변경사항을 저장합니다.

단계	설명
1	Head & Footer Code 플러그인 설치
2	카카오 자바스크립트 코드 추가
3	변경사항 저장

이제 카카오톡 공유 기능을 사용할 수 있는 기초 설정이 완료되었습니다.

💡 웹사이트 디자인을 간편하게 개선할 수 있는 팁을 확인해 보세요. 💡

👉 디자인 팁 알아보기

워드프레스에 카카오톡 및 소셜 SNS 공유 코드 넣기

자바스크립트 설정이 완료된 뒤에는 카카오톡뿐만 아니라 다른 SNS의 공유 버튼 코드도 추가해야 합니다. 이 과정은 각 SNS 아이콘의 파일 URL을 사용하여 SNS 공유 버튼 코드 블록을 작성하는 것입니다.

아래는 이러한 공유버튼 코드의 예를 보여줍니다. 각 링크에 SNS 이미지 URL을 삽입하고 포맷에 맞춰 코드를 완성할 수 있습니다.

sns-go>

각 코드의 <img src=...> 부분에 미리 업로드해둔 이미지 URL을 넣어주시면 됩니다. 각 SNS에 대한 코드를 작성한 후 전부 제출합니다.

단계	설명
1	SNS 공유 버튼 코드 작성
2	각 이미지 URL 삽입
3	코드를 웹사이트 게시물에 추가

이제 방문자들이 카카오톡을 포함한 다양한 SNS 플랫폼에서 공유할 수 있는 버튼이 생성되었습니다.

💡 사용자 경험의 마법을 느껴보세요! 💡

👉 UX 디자인 비법 배우기

CSS 사용자 정의에서 SNS 소셜 공유버튼 위치 지정

마지막 단계는 CSS 코드를 통해 SNS 공유 버튼의 위치를 조정하는 것입니다. CSS를 활용하면 버튼의 디자인과 배치를 사용자에 맞게 설정할 수 있습니다. 아래의 CSS 코드를 워드프레스의 외모 => 사용자 정의 => 추가 CSS 메뉴에 삽입합니다.

css
/ SNS 공유 /.sns-go ul {
list-style-type: none;
margin: 40px 0 0 0;
padding: 0;
overflow: hidden;
}
.sns-go li {
float: left;
padding-right: 5px;
}
.sns-go img {
border-radius: 5px;
width: 35px;
}
.single.entry-content {
margin-top: 0.6em;
}

이 CSS 코드는 버튼의 디자인을 간결하고 직관적으로 만들어 방문자들이 쉽게 버튼을 인식할 수 있도록 돕습니다. 저장 후, 페이지를 새로 고침하여 변경 사항이 적용되었는지 확인합니다.

단계	설명
1	사용자 정의 CSS 코드 추가
2	저장 및 확인

이제 모든 설정이 완료되었습니다. 각 SNS 공유 버튼이 제대로 작동하는지 확인하기 위해 테스트해보는 것이 좋습니다.

💡 카카오톡 공유 기능의 비밀을 알아보세요! 💡

👉 카카오톡 공유 기능 살펴보기

결론

이제까지 워드프레스에서 카카오톡을 포함한 소셜 공유버튼을 플러그인 없이 무료로 만드는 방법에 대해 알아보았습니다. 이 과정은 다소 복잡해 보일 수 있지만, 단계를 차근차근 진행하다 보면 큰 불편 없이 완료할 수 있습니다. 이러한 노력이 더 많은 방문자들에게 소중한 콘텐츠를 전달하고, 당신의 웹사이트의 가치를 높이는 데 큰 도움이 될 것입니다.

여러분도 직접 시도해보시길 적극 추천합니다. 특히, 이렇게 직접 설정한 SNS 공유버튼은 사용자의 경험을 한층 향상시키고, 콘텐츠의 확산에도 큰 도움이 될 것입니다.

💡 2023년 최고의 웹하드 사이트를 비교하고 추천받아보세요! 💡

👉 웹하드 추천 사이트 살펴보기

자주 묻는 질문과 답변

질문1: 카카오톡 공유버튼이 작동하지 않습니다. 어떻게 하나요?
답변1: 자바스크립트 코드가 올바르게 삽입되었는지, 파일 URL이 정확한지 다시 확인해보세요.
질문2: 다른 SNS 버튼도 추가하고 싶은데, 어떻게 하면 되나요?
답변2: 위에서 설명한 방법처럼 각각의 SNS에 맞는 공유 코드를 작성하고 이미지 URL을 넣어 추가할 수 있습니다.
질문3: CSS 수정을 했는데, 반영되지 않습니다.
답변3: CSS 변경 후 반드시 저장하고 페이지를 새로 고쳐야 반영됩니다. 캐시 문제일 수도 있으므로 캐시를 비우고 다시 시도해보세요.
질문4: 플러그인 설치는 꼭 해야 하나요?
답변4: 본 방법은 플러그인 없이 진행할 수 있지만, 편리성을 고려하여 Head & Footer Code 같은 플러그인을 사용하는 것이 유리합니다.
질문5: 다른 플랫폼에 대한 SNS 버튼도 적용할 수 있나요?
답변5: 네, 기본적인 HTML 코드 구조를 활용하면 다른 플랫폼에 대한 버튼도 쉽게 추가 가능합니다.