কিভাবে vue3 social share button বানাব

আসালামু আলাইকুম,
আজ আমি vue3 social share button বানান দেখব
আপনি Vue.js 3 এ Social Share বাটন ব্যবহার করার জন্য নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করতে পারেন:
প্রথমে আপনার প্রকল্পে Vue.js ইনস্টল করুন এবং নতুন Vue কম্পোনেন্ট তৈরি করুন।

npm install vue@next

// SocialShareButton.vue
<template>
  <div>
    <button @click="shareOnFacebook">ফেসবুকে শেয়ার করুন</button>
    <button @click="shareOnTwitter">টুইটারে শেয়ার করুন</button>
  </div>
</template>
<script>
export default {
  methods: {
    shareOnFacebook() {
      // ফেসবুকে শেয়ার করার কোড লিখুন
    },
    shareOnTwitter() {
      // টুইটারে শেয়ার করার কোড লিখুন
    },
  },
};
</script>
<style scoped>
button {
  padding: 10px 20px;
  margin: 5px;
}
</style>

উপরের উদাহরণে, SocialShareButton নামক একটি Vue কম্পোনেন্ট তৈরি করা হয়েছে। সেখানে দুটি বাটন আছে যা ফেসবুক এবং টুইটারে শেয়ার করার কার্যকর করা হবে। বাটনের উপরে ক্লিক ইভেন্ট যুক্ত করা হয়েছে যা প্রতিটি বাটনের জন্য একটি মেথড কল করবে। আপনি আপনার পছন্দমত সংখ্যক সামাজিক মাধ্যমে শেয়ার করার জন্য আরও
বাটন যুক্ত করতে পারেন।
উপরের উদাহরণটি একটি সাধারণ উদাহরণ যা Vue.js 3 এ Social Share করার জন্য ব্যবহার করা যেতে পারে। আপনি আরও পরিষ্কারভাবে কাস্টমাইজ করতে এবং অন্যান্য প্যাকেজগুলি ব্যবহার করতে পারেন যদি প্রয়োজন হয়।
আপনি shareOnFacebook() মেথড এবং shareOnTwitter() মেথডে নিচের কোড যুক্ত করতে পারেন:

shareOnFacebook() {
  const url = 'যেই ইউআরএল শেয়ার করতে চান';
  const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
  window.open(shareUrl, '_blank');
},
shareOnTwitter() {
  const url = 'যেই ইউআরএল শেয়ার করতে চান';
  const text = 'শেয়ার করার মতো টুইট লেখুন';
  const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
  window.open(shareUrl, '_blank');
},

উপরের উদাহরণে, shareOnFacebook() মেথডে ফেসবুকে শেয়ার করার জন্য আপনি একটি শেয়ার লিঙ্ক তৈরি করেন এবং সেটিকে window.open() ব্যবহার করে নতুন উইন্ডোয় খুলেন। আপনি url ভেরিয়েবলে শেয়ার করতে চান সেই ওয়েবসাইটের URL নির্দিষ্ট করতে পারেন।
shareOnTwitter() মেথডে আপনি টুইটারে শেয়ার করার জন্য টেক্সট এবং URL এর জন্য একটি শেয়ার লিঙ্ক তৈরি করেন। আপনি url ভেরিয়েবলে শেয়ার করতে চান সেই ওয়েবসাইটের URL নির্দিষ্ট করতে পারেন এবং text ভেরিয়েবলে আপনার মতো টুইট লেখুন।
আপনি প্রতিটি শেয়ারিং মেথডে আপনার পছন্দমত শেয়ারিং লজিক লিখতে পারেন। উদাহরণস্বরূপ, আপনি ক্লিপবোর্ডে কপি করতে পারেন, একটি API রিকোয়েস্ট করতে পারেন বা আপনার ওয়েবসাইটের অন্যান্য কাস্টম করা কাজগুলি সম্পাদন করতে পারেন।
আপনি window.popup() ব্যবহার করে পপআপ উইন্ডোতে শেয়ার লিঙ্কগুলি খুলতে পারেন। নিচে উদাহরণটি দেখুন:

shareOnFacebook() {
  const url = 'যেই ইউআরএল শেয়ার করতে চান';
  const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
  window.open(shareUrl, 'ফেসবুক শেয়ার', 'width=600,height=400');
},
shareOnTwitter() {
  const url = 'যেই ইউআরএল শেয়ার করতে চান';
  const text = 'শেয়ার করার মতো টুইট লেখুন';
  const shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
  window.open(shareUrl, 'টুইটার শেয়ার', 'width=600,height=400');
},

উপরের উদাহরণে, window.open() ব্যবহার করে পপআপ উইন্ডো খুলতে হবে। প্রথম প্যারামিটারে আপনি শেয়ার লিঙ্ক পাস করেন, দ্বিতীয় প্যারামিটারে উইন্ডোর নাম পাস করেন এবং তৃতীয় প্যারামিটারে উইন্ডোর আকার পাস করেন। আপনি আপনার পছন্দমত উইন্ডো আকার নির্দিষ্ট করতে পারেন (উদাহরণে দেওয়া হয়েছে 600 পিক্সেল প্রশ্নে এবং 400 পিক্সেল উচ্চতা)।
উদাহরণে ফেসবুক শেয়ার বাটনে ক্লিক করলে একটি পপআপ উইন্ডো খুলবে যা ফেসবুকের শেয়ার উইন্ডোয়ে নির্দিষ্ট করা হয়েছে। টুইটার শেয়ার বাটনে ক্লিক করলেও একটি পপআপ উইন্ডো খুলবে যা টুইটারের শেয়ার উইন্ডোয়ে নির্দিষ্ট করা হয়েছে।
আপনি উইন্ডোর আকার এবং অন্যান্য বৈশিষ্ট্যগুলি পরিবর্তন করে আপনার প্রয়োজনে সাজাতে পারেন।

আপনি shareOnFacebook() মেথডে আপনার ইচ্ছানুযায়ী শেয়ার আইকন যুক্ত করতে পারেন। নিচের উদাহরণটি দেখুন:

shareOnFacebook() {
  const url = 'যেই ইউআরএল শেয়ার করতে চান';

  const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;

  window.open(shareUrl, 'ফেসবুক শেয়ার', 'width=600,height=400');
},

উপরের কোডগুলির মধ্যে আপনি শেয়ার বাটনের মতো একটি আইকন যুক্ত করতে পারেন। আপনি একটি HTML আইকন ইউজ করতে পারেন বা কোনও আইকন লাইব্রেরি ব্যবহার করতে পারেন। আমি এখানে একটি সাধারণ উদাহরণ দিচ্ছি যেখানে আমরা ফেসবুক আইকন ব্যবহার করবো:

shareOnFacebook() {
  const url = 'যেই ইউআরএল শেয়ার করতে চান';

  const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;

  window.open(shareUrl, 'ফেসবুক শেয়ার', 'width=600,height=400');
},

HTML ফাইলে আপনি একটি আইকন সংযোজন করতে পারেন, যেমন:

<template>
  <div>
    <button @click="shareOnFacebook">
      <img src="path/to/facebook-icon.png" alt="ফেসবুক শেয়ার">
    </button>
  </div>
</template>

উপরের উদাহরণে, আপনি আপনার

ইচ্ছামত ফেসবুক শেয়ার আইকনের পথটি নির্দিষ্ট করেন এবং @click ইভেন্ট হ্যান্ডলারে আপনার shareOnFacebook মেথড কল করতেন। বিষয়বস্ত সাজানোর জন্য আপনি আরও CSS স্টাইল যুক্ত করতে পারেন।

আপনি ইচ্ছামত অন্যান্য আইকন লাইব্রেরি ব্যবহার করতে পারেন যেমন Font Awesome, Material Icons, ইত্যাদি। আপনি তাদের ডকুমেন্টেশন অনুসরণ করে আপনার পছন্দমত আইকন যুক্ত করতে পারেন।

ফুল কোড দেখুন : https://shorturl.at/qMN13