جدول محتوایی
آموزش افزودن دکمه ی واتساپ (whatsapp) با جاوا اسکریپت
واتساپ امروزه یکی از محبوب ترین اپلیکیشن های پیام رسان موبایلی است. این اپلیکیشن توسط جان کوم و برایان اکتون توسعه داده شد، اما اکنون متعلق به فیس بوک است. اخیراً تقریباً 1.5 میلیون کاربر فعال در آن وجود دارد. از آنجایی که واتس اپ یک برنامه چت بسیار محبوب است، اکثر وب سایت ها به افزودن دکمه ی واتساپ در آنها نیاز دارند.
توسعه‌دهنده وب باید این الزام را برآورده کند و گزینه اشتراک‌گذاری آن را به وبسایت خود برای کارایی کاربران اضافه کند.
این مقاله شما را با افزودن لینک یا دکمه ی اشتراک گذاری واتس اپ به وب سایت با استفاده از زبان برنامه نویسی جاوا اسکریپت راهنمایی می کند. در این مقاله روش های زیر برای ایجاد گزینه اشتراک گذاری واتس اپ برای وب سایت شما را توضیح می دهیم:
- ایجاد لینک اشتراک گذاری WhatsApp
- ایجاد دکمه اشتراک گذاری WhatsApp
- ایجاد آیکون اشتراک گذاری WhatsApp را با استفاده از تصویر
پیش از ادامه ی مقاله ، در صورت نیاز به خرید سرور مجازی ایران به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
چرا باید از دکمه ی اشتراک گذاری واتساپ در وبسایت خود استفاده کنیم؟
از آنجایی که واتس اپ محبوب ترین برنامه چت است، اکثر وب سایت ها به گزینه اشتراک گذاری واتس اپ در آنها نیاز دارند. واتساپ اشتراک‌گذاری خصوصی را فراهم می‌کند، به این معنی که اشتراک‌گذاری بین چند نفر به جای عموم انجام می‌شود.
توسعه‌دهنده وب باید این الزام را برآورده کند و گزینه اشتراک‌گذاری آن را به وبسایت خود برای کارایی کاربران اضافه کند. به طوری که کاربر می تواند به راحتی با استفاده از آن گزینه اشتراک گذاری به جای اشتراک گذاری کپی و پیست، هرگونه اطلاعاتی را مستقیماً از وب سایت به اشتراک بگذارد.
مراحل افزودن لینک اشتراک گذاری واتساپ (Whatsapp)
مراحل زیر یک لینک اشتراک گذاری واتس اپ در یک صفحه وب ایجاد می کند که از طریق آن می توانید مستقیماً واتس اپ را باز کنید و داده های وب سایت را با استفاده از آن به اشتراک بگذارید.
توجه: این روش روی صفحه نمایش های بزرگ مانند لپ تاپ و رایانه کار نخواهد کرد و صرفا مناسب گوشی های همراه است.
برای کاربران صفحه بزرگ، آدرس وب WhatsApp یا لینک داخل کد جاوا اسکریپت را ارائه دهید.
مراحل زیر را دنبال کنید:
مرحله 1: با استفاده از تگ لنگر HTML که <a> است، یک صفحه وب ساده با یک لینک روی آن طراحی کنید. ما از این پیوند به عنوان گزینه اشتراک گذاری استفاده خواهیم کرد.
<html> <head> <title> Add a WhatsApp sharing link on a website </title> </head> <body> <h3 style="color:brown"> WhatsApp sharing Link </h3> <a> Share to WhatsApp </a> </body> </html>
مرحله 2: همانطور که قبلاً به شما گفتیم که این روش روی صفحه نمایش های بزرگ (لپ تاپ / دسکتاپ / رایانه) کار نمی کند.
بنابراین، ما CSS را اضافه می کنیم تا لینک اشتراک گذاری را در صفحه های بزرگ پنهان کنیم. کد CSS برای پنهان کردن پیوند اشتراک گذاری در صفحه های بزرگ:
برای این کار از@media query استفاده کنید:
<style>
@media screen and (min-width: 500px) {
a {
display: none
}
}
</style>
این کد لینکی را که با استفاده از تگ anchor ایجاد کرده‌اید پنهان می‌کند، زیرا عرض حداقل صفحه را روی 500 پیکسل قرار می‌دهیم. برای هدف آزمایش، می توانید عرض حداقل را به 1000 افزایش دهید و خروجی را در لپ تاپ بررسی کنید. این تگ، لینک را پنهان نمی کند.
مرحله 3: اکنون دو مرحله بالا را با جاوا اسکریپت اجرا کنید تا هایپرلینک ایجاد شده کار کند. بنابراین، وقتی روی این لینک کلیک می‌کنید، واتساپ مستقیماً از صفحه وب فعلی باز می‌شود.
کد html:
کد زیر را به تب لنگر <a> داخل کد HTML برای موبایل اضافه کنید:
href="whatsapp://send?text=Your message here"
مثال کامل
کد کامل ایجاد لینک اشتراک گذاری واتس اپ را در زیر مشاهده کنید:
<html>
<head>
<title> Add a WhatsApp sharing link on a website </title>
</head>
<style>
//css code to hide the WhatsApp sharing link on the large screen
@media screen and (min-width: 1000px) {
a {
display: none
}
}
</style>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<!-- create a link using anchor tab -->
<a href="whatsapp://send?text=This is WhatsApp sharing example using link" data-action="share/whatsapp/share"
target="_blank"> Share to WhatsApp </a>
</body>
</html>
خروجی در موبایل
کد بالا را به جای دسکتاپ یا لپ تاپ در موبایل بررسی و اجرا کنید. پاسخی را که در زیر ارائه شده است دریافت خواهید کرد. در اینجا، روی لینک اشتراک گذاری در واتس اپ کلیک کنید، که شما را به پیام رسان واتس اپ در تلفن همراهتان هدایت می کند:
وقتی روی لینک کلیک می کنید، اپلیکیشن واتس اپ شما در تلفن همراه باز می شود و از شما می خواهد مخاطبینی را انتخاب کنید تا متن را با آنها به اشتراک بگذارید. با این کار متن ارائه شده در پارامتر متن (این نمونه اشتراک گذاری WhatsApp است) در داخل تگ انکر به اشتراک می گذارد:
توجه: این خروجی کد بالا را فقط روی گوشی موبایل دریافت خواهید کرد.
خروجی روی لپ تاپ یا سیستم
اگر سعی کنید کد بالا را روی صفحه نمایش های بزرگ مانند دسکتاپ یا لپ تاپ اجرا کنید، همانطور که در تصویر زیر نشان داده شده است، بدون داشتن لینک اشتراک گذاری واتس اپ پاسخ دریافت خواهید کرد:
یا اگر پیوند اشتراک گذاری واتس اپ را برای به حداقل رساندن اندازه صفحه مرورگر دریافت کنید، با کلیک بر روی آن لینک، پاسخ خالی حاوی متن در نوار جستجوی مرورگر را دریافت خواهید کرد:
افزودن دکمه ی اشتراک گذاری واتساپ
اکنون، یک دکمه اشتراک گذاری واتس اپ را ایجاد و به یک صفحه وب اضافه می کنیم. اساساً این کد برای افزودن دکمه ی واتساپ به وب سایت طراحی شده است که شما را به برنامه موبایلی ان هدایت می کند. با کلیک بر روی این دکمه، به اپلیکیشن واتس اپ هدایت می شوید تا برخی از محتوای وب را با مخاطبین خود به اشتراک بگذارید.
این روش به کد طولانی نیاز ندارد. فقط به متد window.open() جاوا اسکریپت وپ، لینک WhatsApp و داده هایی که می خواهید به اشتراک بگذارید نیاز دارد.
برای نمایش در موبایل
<button onclick="window.open('whatsapp://send?text=This is WhatsApp sharing example using button')"> Open WhatsApp </button>
برای واتس اپ وب در صفحه نمایش بزرگتر
<button onclick="window.open('https://web.whatsapp.com://send?text=This is whatsapp sharing example using button')"> Open WhatsApp </button>
مثال
برای افزودن دکمه اشتراک‌گذاری واتساپ در یک صفحه وب/وبسایت، کد موبایل را ببینید:
<html>
<head>
<title> Add a WhatsApp sharing button on a website </title>
</head>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<!-- create a button to open the WhatsApp onclick function -->
<button onclick="window.open('whatsapp://send?text=This is WhatsApp sharing example using button')"> Open WhatsApp </button>
</body>
</html>
خروجی در موبایل
کد بالا را روی موبایل اجرا کنید، همانطور که در تصویر زیر نشان داده شده است، یک دکمه HTML کوچک در یک صفحه وب به شما نشان می دهد:
روی این دکمه Open WhatsApp کلیک کنید که شما را به برنامه WhatsApp خود می برد تا داده ها را انتخاب کرده و با مخاطب خود به اشتراک بگذارید. اسکرین شات موبایل را ببینید:
افزودن ایکون اشتراک گذاری واتساپ (Whatsapp)
در این روش با گرفتن یک تصویر از اینترنت یک آیکون واتس اپ ایجاد می کنیم و آن را به صفحه وب اضافه می کنیم تا آیکون اشتراک گذاری واتس اپ ایجاد شود. وقتی روی این تصویر/آیکون کلیک می‌کنید، شما را به برنامه WhatsApp هدایت می‌کند تا محتوای وب را با مخاطبین خود به اشتراک بگذارید.
برای نمایش در موبایل
function openWhatsApp() {
window.open('whatsapp://send?text= https://www.youtube.com/watch?v=ohpCMpderow');
}
برای واتساپ وب
function openWhatsApp() {
window.open('https://web.whatsapp.com://send?text= https://www.youtube.com/watch?v=ohpCMpderow');
}
نکات مهم برای این مثال:
- در این مثال، تصویر آیکون WhatsApp را مستقیماً از اینترنت گرفته ایم. بنابراین لینک آیکون تصویر واتس اپ را از اینترنت و همچنین ارتفاع و عرض آن را تنظیم کرده ایم.
- ما در حال به اشتراک گذاشتن یک لینک ویدیوی یوتیوب هستیم و نه پیام متنی. برای این کار نیازی نیست کار خاصی انجام دهید. فقط باید لینک ویدیو را در محل متن با لینک واتس اپ ارائه دهید.
مثال
کد زیر به شما کمک می کند تا یک ایکون اشتراک گذاری واتس اپ را در وب سایت خود اضافه کنید. به یاد داشته باشید که – کد زیر فقط برای برنامه تلفن همراه WhatsApp کار می کند. در وب، چیزی به شما نشان نمی دهد:
<html>
<head>
<title> Add a WhatsApp sharing image icon on a website </title>
</head>
<script>
//user-defined function to open and share web content on WhatsApp
function openWhatsApp() {
window.open('whatsapp://send?text= https://www.youtube.com/watch?v=ohpCMpderow');
}
</script>
<body>
<h3 style="color:brown"> WhatsApp sharing Link </h3>
<!-- create an image icon to open the WhatsApp onclick -->
<img src = "https://image.freepik.com/free-vector/whatsapp-icon-design_23-2147900927.jpg" height="50" size="50" onclick="openWhatsApp()">
</body>
</html>
خروجی موبایل
کد بالا را روی موبایل اجرا کنید. یک ایکون کوچک از WhatsApp را به شما نشان می دهد. روی این ایکون تصویر WhatsApp کلیک کنید و خروجی نحوه پاسخگویی آن را ببینید:
با کلیک بر روی این آیکون تصویر واتساپ، خروجی زیر را دریافت خواهید کرد:
افزودن لینک اشتراک گذاری واتس اپ با ورودی کاربر
این نمونه دیگری از ایجاد گزینه اشتراک گذاری واتس اپ به همراه یک فیلد ورودی برای گرفتن ورودی از کاربر است. این بدان معناست که ما ورودی را از کاربر در فیلد ورودی که می‌خواهد به اشتراک بگذارد می‌گیریم و این پیام را با استفاده از جاوا اسکریپت با ارائه دکمه اشتراک‌گذاری برای اشتراک‌گذاری با مخاطبین وی در پیام‌رسان واتساپ ارسال می‌کنیم.
در این مثال، یک فیلد ورودی برای دریافت ورودی از کاربر و یک دکمه برای ارسال آن ورودی کاربر و یک لینک اشتراک گذاری واتساپ می گیریم. این کار با استفاده از برنامه نویسی جاوا اسکریپت انجام خواهد شد.
به کد اشتراک گذاری WhatsApp با ورودی کاربر توجه کنید.
مثال
کد کامل اضافه کردن ایکون اشتراک گذاری واتس اپ را در یک صفحه وب مشاهده کنید:
<html>
<head>
<title> Add a WhatsApp sharing link on a website </title>
<style>
/* To hide the button on large screens */
@media screen and (min-width: 1000px) {
.mobileShow {
display: none
}
}
</style>
</head>
<body>
<h3>Whatsapp sharing</h3>
<input class="mobileShow" type="text" name="message">
<button onclick="share()" class="mobileShow"> Share to WhatsApp </button>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script>
// User-defined function to share some message on WhatsApp
function share() {
// collet the user input
var message = $("input[name=message]").val();
// JavaScript function to open URL in new window
window.open( "whatsapp://send?text=" + message, '_blank');
}
</script>
</body>
</html>
خروجی
وقتی کد بالا را روی موبایل اجرا می کنید، یک فیلد متنی برای دریافت ورودی از کاربر و یک دکمه برای اشتراک گذاری آن ورودی در واتس اپ به شما نشان می دهد. اسکرین شات موبایل برای کد های بالا را ببینید:
پیام را در قسمت متن وارد کنید و روی دکمه اشتراک گذاری در واتساپ کلیک کنید.
این دکمه شما را به WhatsApp خود هدایت می کند تا پیام را با مخاطب WhatsApp خود به اشتراک بگذارید:
و تمام! در این مقاله به افزودن دکمه ی واتساپ و لینک واتساپ در موبایل و دسکتاپ پرداختیم. موفق باشید!