امیر موسوی

طراح و گسترش‌دهنده وب

ساخت دکمه اشتراک گذاری تلگرام برای سایت- Telegram Share button

به نام خدا

بروز رسانی در ۱۰ تیر ۹۵

در این پست از سایت امیر با نحوه ساخت دکمه اشتراک گذاری تلگرام آشنا میشیم.
اکثر سایتها دکمه‌هایی در کنار مطالبشون دارن که میتونید با کلیک روی اونها مطلب مورد نظر رو توی شبکه‌های اجتماعی بزرگ مثل فیسبوک یا توییتر و یا هر شبکه‌ی دیگه ای به اشتراک بذارید. یکی از این شبکه‌ها که از قضا طرفداران زیادی هم توی کشور ما داره، تلگرام هست. در این پست میخواهیم با شیوه ایجاد دکمه اشتراک گذاری تلگرام آشنا بشیم. این اپلیکیشن با امکانات و سرعت بالای خودش ابزار خوبی برای تبادل سریع اطلاعاته. اگه شما هم دوست دارید مطالب سایتتون براحتی توی تلگرام منتشر بشه باید به فکر طراحی یک دکمه خوشگل باشید که تنها با یک کلیک آدرس صفحات سایت شما رو به اپلیکیشن تلگرام انتقال بده.

ساخت دکمه اشتراک گذاری تلگرام

این روش در تلگرام اندروید از نسخه 3.1.1 اضافه شده است. نسخه‌های پایین‌تر این امکان رو پشتیبانی نمی‌کنند.

۱- ابتدا یک لینک ایجاد می‌کنیم.

<a href="#" title="اشتراک گذاری در تلگرام"> Click Here! </a>

۲- کد جاوا اسکریپت زیر رو پایین لینک Copy/Paste می‌کنیم. دقت کنید که این کد جاوا اسکریپت رو میتونید

<script type="text/javascript">
//تابع اشتراک گذاری را تعریف می کنیم
	function teleShare() {

//خط پایین، یک پنجره باز میکند که از کاربر سوال میکند آیا میخواهد آدرس این صفحه را در تلگرام به اشتراک بگذارد؟
	var r = confirm("Share the address of this page to Telegram?");

// اگر کاربر روی دکمه اوکی کلیک کرد، کاربر را به اپلیکیشن تلگرام هدایت میکنیم.
//و ازش میخواهیم که یک چت را برای اشتراک گذاری آدرس انتخاب کند
		if (r == true) {
		window.location.replace('https://telegram.me/share/url?text=Custom+Text&url='+window.location.href)
		}
	}
</script>

وقتی روی دکمه کلیک میشه شما به آدرس ( https://telegram.me/share ) میرید و این سایت به سیستم عامل دستور میده تا اپلیکیشن تلگرام رو باز کنه و متن موجود در قسمت text و url رو توی یک چت بفرسته. هر مقداری که شما جلوی text و url بنویسید به اپ تلگرام منتقل میشن. ما در اینجا مقدار url رو مساوی با آدرس صفحه‌ی فعلی قرار دادیم و یه متن دلخواه هم جلوی text نوشتیم. متغیر text اگه خالی باشه اشکال نداره.

۳- لینک رو یه کم ویرایش میکنیم و بهش یه attribute به اسم onclick می افزاییم! همون طور که از اسمش پیداست یعنی وقت روی لینک کلیک شد یه کاری بکن. در اینجا اون یه کار، فراخوانی تابع teleShare هستش.

<a href="#" title="اشتراک گذاری در تلگرام" onclick="teleShare()"> Click Here! </a>

خوب لینک ما آماده است. میتونید با گوشیتون صفحه رو بارگذاری کنید و روی لینک کلیک کنید تا نتیجه کار رو ببینید.

به طور پیش فرض تلگرام اطلاعات لینکهای ارسالی رو زیرشون نمایش میده. مثلا خلاصه ای از یه نوشته رو. پس لازم نیست توضیحی کنار لینک بدین.

نمونه دکمه اشتراک گذاری تلگرام  پایین صفحه است که میتونید با کلیک کردن روش تستش کنید.

دکمه اشتراک گذاری تلگرام

برای وردپرس

اون دسته از دوستانی که میخوان این دکمه رو واسه سایت وردپرس خودشون درست کنن، این کد زیر رو به فایل functions.php پوسته‌ی سایتشون اضافه کنن. حالا هرجایی که خواستید میتونید کد کوتاه [teleShare] رو وارد کنید تا در اونجا دکمه‌ی اشتراک گذاری در تلگرام ظاهر بشه. مثلا در آخر نوشته‌ها یا محصولات فروشگاهتون.

//[teleShare]
function tele_func(){
return <<<_END
<a title="Share this page to Telegram" onclick="teleShare();"><img src="//ameer.ir/wp-content/uploads/2015/10/t-logo.svg" alt="دکمه اشتراک گذاری تلگرام" width="64" /></a>
<script type="text/javascript">
	function teleShare() {
		var r = confirm("Share the address of this page to Telegram?");
		if (r == true) {
			window.location.replace('https://telegram.me/share/url?text=Custom+Text&url='+window.location.href);
		}
	}
</script>
_END;
}
add_shortcode( 'teleShare', 'tele_func' );

سعی میکنم که این امکان رو توی نسخه‌های بعدی افزونه Telegram for WordPress اضافه کنم تا بدون دردسر پایین هر صفحه و نوشته بتونید این رو نمایش بدین.

دسته‌بندی‌ها: آموزش | اندروید | کامپیوتر

کدام زبان برنامه نویسی را ابتدا یاد بگیرم؟ » « افزایش سرعت اینترنت با استفاده از Google Public DNS

8 دیدگاه

  1. سلام من نتونستم برای سایتم درست کنم. میشه کمکم کنید.

  2. کارآفرینی اینترنتی

    پنجشنبه, 15 سپتامبر 2016 — 11:37 ق.ظ

    خیلی خوبه
    با تشکر

  3. مرسی دوست عزیز، خیلی کمک کرد.

  4. با سلام آدرس دقیق که هم بر روی گوشی جواب بدهد و هم بر روی pc به صورت زیر است

    tg://msg_url?url

نمی‌شود دیدگاه نوشت.

کپی رایت © سال ۱۳۹۴ خورشیدی | امیر موسوی

پوسته از Anders Norenبالا ↑