웹 및 모바일용 WhatsApp 공유 버튼 만들기

웹 및 모바일용 WhatsApp 공유 버튼 만들기
웹 및 모바일용 WhatsApp 공유 버튼 만들기
Louis Robert
2024년 9월 19일 목요일 오전 11:13:07

WhatsApp 공유 버튼 최적화하기

웹사이트에 WhatsApp 공유 버튼을 포함시키는 것은 사용자가 자신의 네트워크와 정보를 쉽게 공유할 수 있도록 해주기 때문에 사용자 참여를 높이는 훌륭한 접근 방식입니다. 링크를 사용하여 모바일 장치에서 WhatsApp을 원활하게 활성화하는 것이 표준 방법입니다.

그럼에도 불구하고 WhatsApp의 데스크톱 버전은 이 전략과 호환되지 않습니다. 이 게시물에서는 WhatsApp의 온라인 및 모바일 버전에서 작동하는 공유 버튼을 만드는 데 필요한 코드와 지침을 알려드립니다.

명령 설명
encodeURIComponent() 특정 문자가 나타날 때마다 해당 문자의 UTF-8 인코딩에 해당하는 1개, 2개 또는 3개의 이스케이프 시퀀스를 대체하여 URI 구성 요소를 인코딩합니다.
window.open() 제공된 URL로 새 브라우저 창이나 탭을 열어 WhatsApp 웹에서 링크를 공유할 수 있습니다.
express.static() 클라이언트에 정적 파일을 제공하여 제공된 디렉터리에서 HTML, CSS 및 JavaScript로 액세스할 수 있도록 합니다.
res.redirect() 리디렉션 응답을 보내 클라이언트를 제공된 URL로 리디렉션합니다. 이는 WhatsApp 웹 공유 링크로 리디렉션하는 데 유용합니다.
app.use() 이 예제에서는 Express 애플리케이션에 미들웨어 기능을 탑재하여 정적 파일을 제공합니다.
app.get() GET 쿼리에 대한 경로 처리기를 정의하여 WhatsApp 웹 공유 링크에 대한 끝점을 만듭니다.
document.getElementById() 스크립트가 이벤트를 처리할 수 있도록 지정된 ID를 가진 HTML 요소의 인스턴스를 제공합니다.
onclick 특정 HTML 요소에서 클릭이 발생할 때 트리거되는 이벤트 핸들러를 생성합니다. 이것이 바로 공유 기능이 트리거되는 방식입니다.

크로스 플랫폼 WhatsApp 공유 기능 활성화

첫 번째 스크립트는 다음을 활용하여 WhatsApp의 온라인 및 모바일 버전에 대한 공유 버튼을 만듭니다. HTML 그리고 JavaScript. 모바일 공유 버튼 href 속성은 다음을 사용하여 미리 채워진 메시지로 모바일 장치에서 WhatsApp을 엽니다. whatsapp://send?text= URL 구성표. 버튼 id "shareButton"은 데스크톱 버전용으로 만들어졌습니다. 이제 이 버튼에는 onclick 스크립트에 의해 추가된 이벤트 리스너입니다. 클릭하면, https://web.whatsapp.com/send?text= WhatsApp Web의 URL을 만드는 데 사용됩니다. 그리고 사용 encodeURIComponent 메시지를 암호화합니다. window is then used to open the created URL in a new browser tab.open, WhatsApp 웹 사용자가 메시지를 배포할 수 있도록 합니다.

두 번째 스크립트는 다음을 사용합니다. Node.js 그리고 HTML 프론트엔드와 백엔드 개발 모두를 위해. 그만큼 Express 프레임워크는 Node.js 서버를 구성하는 백엔드 스크립트입니다. 서버는 경로를 정의합니다 /share 미리 채워진 메시지를 사용하여 WhatsApp 웹 공유 URL로 다시 라우팅하고 "공개" 디렉터리에서 정적 파일을 전달합니다. 웹 및 모바일용 공유 버튼은 프런트엔드 스크립트에 의해 생성됩니다. 같은 whatsapp://send?text= URL 구성표는 모바일 버튼에 사용됩니다. 그만큼 /share 서버의 엔드포인트는 웹 공유 버튼으로 연결됩니다. 이 끝점에 도달하면 사용자는 다음을 사용하여 인코딩된 메시지와 함께 WhatsApp 웹으로 전송됩니다. res.redirect, WhatsApp 웹 공유를 활성화합니다.

WhatsApp 공유 버튼을 위한 완전한 웹 및 모바일 솔루션 개발

HTML 및 JavaScript 솔루션

<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<!-- Mobile Share Button -->
<a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a>
<!-- Desktop Share Button -->
<button id="shareButton">Share on WhatsApp Web</button>
<script>
document.getElementById('shareButton').onclick = function () {
  var url = 'https://web.whatsapp.com/send?text=' + encodeURIComponent('Hello World!');
  window.open(url, '_blank');
};
</script>
</body>
</html>

WhatsApp 공유를 위한 프런트엔드 및 백엔드 솔루션 실행

HTML과 Node.js의 통합

// Backend: server.js (Node.js)
const express = require('express');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get('/share', (req, res) => {
  const message = 'Hello World!';
  const url = `https://web.whatsapp.com/send?text=${encodeURIComponent(message)}`;
  res.redirect(url);
});
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

<!-- Frontend: public/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>WhatsApp Share Button</title>
</head>
<body>
<a href="whatsapp://send?text=Hello%20World!">Share on WhatsApp Mobile</a>
<a href="/share">Share on WhatsApp Web</a>
</body>
</html>

WhatsApp의 공유 버튼을 사용하여 사용자 경험 향상

다양한 장치에서의 사용자 경험은 WhatsApp 공유 버튼을 배치할 때 고려해야 할 필수 요소입니다. 상호 작용할 때 모바일 사용자는 데스크톱 사용자와 다르게 행동합니다. 결과적으로 두 플랫폼의 공유 기능이 완벽하게 작동하도록 보장하는 것이 중요합니다. 사용자는 모바일 장치를 사용할 때 빠르고 빠른 활동을 원합니다. WhatsApp 앱과의 직접적인 통신은 다음을 사용하여 가능합니다. whatsapp://send?text= 빠르고 간단한 공유 경험을 제공하는 URL 구성표입니다.

이 원활한 경험을 PC에서 재현하는 것은 어려운 일입니다. WhatsApp 웹 인터페이스에 액세스해야 할 뿐만 아니라 메시지를 보낼 준비가 되어 있는지도 확인해야 합니다. 이를 위해서는 신중한 URL 처리와 올바른 메시지 인코딩이 필요합니다. encodeURIComponent. 또한 데스크톱 사용자는 공유 버튼을 쉽게 액세스하고 볼 수 있도록 하는 것이 유용할 수 있습니다. 이는 페이지에서의 버튼 레이아웃과 위치를 신중하게 계획함으로써 달성할 수 있습니다. 이러한 사소한 세부 사항을 관리하면 사용하기 쉽고 모든 장치에서 참여도를 높이는 공유 기능을 개발할 수 있습니다.

WhatsApp의 공유 버튼에 관해 자주 묻는 질문

  1. 휴대폰에 WhatsApp 공유 버튼을 어떻게 만들 수 있나요?
  2. 에서 href 의 속성 a 태그를 사용하여 whatsapp://send?text= URL 구성표.
  3. WhatsApp Web의 공유 버튼이 작동하게 하려면 어떻게 해야 하나요?
  4. WhatsApp 웹 URL을 생성하고 다음과 같이 여는 버튼 요소를 활용하세요. window click.open 이벤트.
  5. 무엇을 encodeURIComponent 역할을 합니까?
  6. URL의 형식이 적절하다는 것을 보장하기 위해 특정 문자를 이스케이프 시퀀스로 대체하여 URI 구성 요소를 인코딩합니다.
  7. 공유 버튼에 백엔드가 필요한 이유는 무엇인가요?
  8. 백엔드는 URL 생성 및 리디렉션을 관리할 수 있으므로 보다 안정적이고 적응성이 뛰어난 공유 솔루션을 제공합니다.
  9. Express는 어떻게 되나요? res.redirect 기능?
  10. 클라이언트는 지정된 URL로 연결되는 리디렉션 응답을 받습니다.
  11. 모바일과 웹 공유 버튼을 동시에 사용할 수 있나요?
  12. 예, 웹 및 모바일 플랫폼에 맞게 고유한 버튼을 디자인하거나 스크립트를 사용하여 플랫폼을 식별하고 URL을 적절하게 수정할 수 있습니다.
  13. 데스크탑 공유에는 다음을 사용해야 합니까? window.open?
  14. 틀림없이, window.To make sure the message is transmitted, use the open WhatsApp 웹 공유 URL로 새 탭을 여는 옵션입니다.
  15. 공유 버튼을 더 잘 보이도록 하려면 어떻게 해야 합니까?
  16. 웹사이트에 버튼을 눈에 띄게 표시하고 수행해야 할 작업을 명확하게 나타내는 텍스트나 아이콘을 사용하세요.
  17. 사용자의 모바일 장치에 WhatsApp이 설치되어 있지 않으면 어떻게 되나요?
  18. WhatsApp이 설치되어 있지 않으면 다운로드하라는 메시지가 표시되며 공유 시도는 실패합니다.
  19. 공유 링크에 미리 작성된 메시지를 변경할 수 있나요?
  20. 예, 메시지를 올바르게 인코딩하고 URL의 텍스트 매개변수를 수정하여 메시지를 변경할 수 있습니다.

WhatsApp 공유 버튼 추가에 대한 결론

웹사이트에 WhatsApp 공유 버튼을 포함하면 플랫폼 간 콘텐츠 공유가 쉬워져 사용자 참여도가 높아집니다. WhatsApp의 데스크톱 및 모바일 버전과의 호환성을 보장하려면 특정 URL 구성표와 JavaScript 방법을 사용해야 합니다. 또한 Node.js 백엔드 지원은 안정적이고 적응 가능한 솔루션을 제공할 수 있습니다. 이러한 사항을 고려하여 효과적이고 사용자 친화적이면서 유용성과 도달 범위를 높이는 공유 기능을 설계할 수 있습니다.