ओपन सोर्स लाइब्रेरीAOSSIE (नए टैब में खुलता है) द्वारा प्रस्तुत
आधुनिक वेबसाइटों के लिए हल्की सोशल शेयर बटन लाइब्रेरी
ज़ीरो डिपेंडेंसी। किसी भी फ़्रेमवर्क के साथ। तकनीकी सटीकता और बेहतरीन प्रदर्शन के लिए बनाई गई।
npm से इंस्टॉल करें
npm install @aossie-org/social-share-buttonइंस्टॉलेशन के चरण
- आपका फ़्रेमवर्क
- ऊपर अपना फ़्रेमवर्क चुनें, कॉपी करने के लिए सही कोड यहां दिखाई देगा।
इन टीमों के बिल्डर्स का भरोसा
AOSSIE, DJED, Stability Nexus
विशेषताएं
शेयर बटन को जो चाहिए, सब कुछ। जो नहीं चाहिए, कुछ भी नहीं।
15KB
डिपेंडेंसी: 0
ज़ीरो डिपेंडेंसी
शुद्ध वनीला जावास्क्रिप्ट और एक स्टाइलशीट, लगभग 15 KB gzipped। कोई फ़्रेमवर्क रनटाइम नहीं, कोई आइकन फ़ॉन्ट नहीं, कोई ट्रैकिंग SDK नहीं।
- X
- Telegram
- Discord
नौ प्लेटफ़ॉर्म, एक बटन
एक ही शेयर बटन एक साफ़ मोडल खोलता है जिसमें आपके दर्शकों के सभी नेटवर्क और लिंक कॉपी करने का विकल्प होता है।
थीम और स्टाइल पहले से मौजूद
लाइट और डार्क थीम, चार बटन स्टाइल और आपके ब्रांड के रंग। बिना CSS लिखे।
- Google Analytics 4
- Mixpanel
- Segment
- Plausible
- PostHog
प्राइवेसी-फ़र्स्ट एनालिटिक्स
लाइब्रेरी कभी कोई डेटा नहीं भेजती। यह शेयर इवेंट देती है जिन्हें आप Google Analytics, Mixpanel, Segment, Plausible या PostHog पर भेज सकते हैं।
आंकड़ों में
इतनी छोटी कि आप भूल जाएं कि यह मौजूद है।
- KB gzipped, JS + CSS
- 15
- रनटाइम डिपेंडेंसी
- 0
- शेयर प्लेटफ़ॉर्म
- 9
- फ़्रेमवर्क के लिए कॉपी-पेस्ट गाइड
- 6
क्यों बदलें?
कोई फ़ालतू कोड नहीं। कोई पेवॉल नहीं। सिर्फ़ कोड।
होस्टेड शेयर विजेट थर्ड-पार्टी स्क्रिप्ट लोड करते हैं जो आपके विज़िटर्स को ट्रैक कर सकती हैं और आपके पेज धीमे कर सकती हैं। सोशल शेयर बटन सिर्फ़ एक छोटी स्क्रिप्ट और एक स्टाइलशीट है, जो आपके नियंत्रण में है।
| फ़ीचर | सोशल शेयर बटन | होस्टेड शेयर विजेट |
|---|---|---|
| बंडल साइज़ | 15 KB gzipped | रिमोट स्क्रिप्ट, साइज़ बदलता रहता है |
| विजेट द्वारा नेटवर्क कॉल | कोई नहीं | हर पेज व्यू पर कई |
| विज़िटर ट्रैकिंग | कोई नहीं | आम |
| कुकी बैनर ज़रूरी | नहीं | अक्सर |
| कस्टम स्टाइलिंग | पूरा CSS नियंत्रण | सीमित |
| ओपन सोर्स | हाँ, GPL-3.0 | कभी-कभार |
उपयोग
जहां भी लोग आगे बढ़ाना चाहें।
जिस चीज़ का भी URL है, उसे शेयर बटन मिलना चाहिए। ये वे जगहें हैं जहां यह सबसे ज़्यादा काम आता है।
- 01
ब्लॉग और प्रकाशन
पाठक लेख खत्म करते ही उसे WhatsApp या X पर भेज सकें, शीर्षक और विवरण के साथ।
- 02
डॉक्यूमेंटेशन साइटें
डेवलपर्स को वही पेज शेयर करने दें जिसने उनकी समस्या हल की, सिंगल-पेज डॉक साइटों में भी।
- 03
प्रोडक्ट पेज
भारी प्लगइन के बिना प्रोडक्ट लिंक को Pinterest, WhatsApp या Email पर बातचीत में बदलें।
- 04
ओपन-सोर्स प्रोजेक्ट
अपनी रिलीज़ के बारे में समुदाय को एक क्लिक में बताएं, आपके हैशटैग और हैंडल के साथ।
- 05
पोर्टफ़ोलियो
रिक्रूटर्स और क्लाइंट्स को आपका काम LinkedIn या अपनी टीम तक भेजने का आसान तरीका दें।
- 06
इवेंट और अभियान
लॉन्च, मीटअप या फ़ंडरेज़र को हर नेटवर्क पर फैलाएं और अपने एनालिटिक्स से शेयर ट्रैक करें।
मॉड्यूलर आर्किटेक्चर
छोटा सा कोर। बाकी सब वैकल्पिक।
CDN से कोर लोड करें और वहीं रुकें, या जो हिस्से चाहिए वो जोड़ें। जो आपने नहीं मांगा, वह कुछ भी बंडल नहीं होता।
डिलीवरी
पिन किए गए वर्ज़न के साथ jsDelivr CDN इस्तेमाल करें, या npm से इंस्टॉल करें।
- cdn.jsdelivr.net
- npm i @aossie-org/social-share-button
कोर
शेयर बटन, मोडल और लिंक कॉपी करना। किसी भी पेज में अपने आप काम करता है।
- social-share-button.js
- social-share-button.css
फ़्रेमवर्क रैपर
React, Preact और Qwik के लिए वैकल्पिक पतले कंपोनेंट। JSX पसंद है तो एक अपने प्रोजेक्ट में कॉपी करें।
- -react.jsx
- -preact.jsx
- -qwik.tsx
एनालिटिक्स एडैप्टर
ऑप्ट-इन एडैप्टर जो शेयर इवेंट को आपके मौजूदा टूल तक भेजते हैं।
- social-share-analytics.js
इवेंट सुनने के तीन तरीके
- DOM CustomEvent: document पर social-share सुनें
- onAnalytics कॉलबैक: एक फ़ंक्शन, एक जगह
- analyticsPlugins: एक साथ कई प्रोवाइडर को भेजें
सामान्य प्रश्न
सवाल, जवाब सहित।
क्या सोशल शेयर बटन मुफ़्त है?
हां। यह GNU General Public License v3.0 के तहत ओपन सोर्स है और AOSSIE समुदाय द्वारा मेंटेन किया जाता है।
क्या यह मेरे विज़िटर्स को ट्रैक करता है?
नहीं। लाइब्रेरी कभी डेटा इकट्ठा, स्टोर या भेजती नहीं है। यह सिर्फ़ ब्राउज़र के अंदर इवेंट देती है, और आप तय करते हैं कि उन्हें किसी एनालिटिक्स टूल पर भेजना है या नहीं।
यह किन फ़्रेमवर्क के साथ काम करता है?
सभी के साथ। यह सादा जावास्क्रिप्ट है, इसलिए यह HTML, React, Next.js, Preact, Vue, Angular, Qwik और अन्य में चलता है। ऊपर के इंस्टॉलेशन चरणों में सबसे आम सेटअप के लिए कॉपी-पेस्ट कोड है।
क्या मैं चुन सकता हूं कि कौन से प्लेटफ़ॉर्म दिखें?
हां। platforms विकल्प दें, जैसे platforms: ["linkedin", "twitter", "email"]। उपलब्ध प्लेटफ़ॉर्म हैं WhatsApp, Facebook, X, LinkedIn, Telegram, Reddit, Email, Pinterest और Discord।
क्या मैं इसे अपने ब्रांड जैसा बना सकता हूं?
हां। लाइट या डार्क थीम चुनें, चार बटन स्टाइल (default, primary, compact, icon-only) में से एक चुनें, buttonColor और buttonHoverColor सेट करें, या customClass से अपनी CSS क्लास जोड़ें।
क्या सिंगल-पेज ऐप में रूट बदलने पर शेयर लिंक अपडेट होगा?
हां। अगर आप कोई तय url नहीं देते, तो लाइब्रेरी क्लाइंट-साइड नेविगेशन सुनती है और लिंक अपने आप अपडेट करती है। आप खुद भी updateOptions() कॉल कर सकते हैं।
बटन दिखाई नहीं दे रहा। मुझे क्या जांचना चाहिए?
सुनिश्चित करें कि स्टाइलशीट लिंक पेज के head में है, इनिशियलाइज़ करने से पहले स्क्रिप्ट लोड हो चुकी है, और कंटेनर सेलेक्टर आपके एलिमेंट से मेल खाता है। उदाहरण के लिए, container: "#share-button" के लिए id="share-button" वाला एलिमेंट चाहिए।
क्या मैं इसे CDN की जगह npm से इंस्टॉल कर सकता हूं?
हां। npm install @aossie-org/social-share-button चलाएं, फिर अपने कोड में मॉड्यूल और उसकी स्टाइलशीट इम्पोर्ट करें।
प्रशंसापत्र
खुले में बना, उपयोगकर्ताओं ने आकार दिया।
यहां पहली कहानी आपकी हो सकती है।
प्रोडक्शन में सोशल शेयर बटन इस्तेमाल कर रहे हैं? हमें बताएं आपने क्या बनाया, हम इसे इस पेज पर दिखाएंगे।