स्वयं के सामाजिक बटन। सोशल मीडिया बटन बड़े सोशल मीडिया बटन कैसे बनाएं

हाल ही में, वेबसाइटों और ब्लॉगों पर सोशल नेटवर्किंग बटन स्थापित करना फैशनेबल हो गया है, और यह आश्चर्य की बात नहीं है। सबसे पहले, बटन आपको "पसंद" और "दिल" बढ़ाने की अनुमति देते हैं, जिसका सामाजिक नेटवर्क पर लेखों के प्रचार पर सकारात्मक प्रभाव पड़ता है। दूसरे, कुछ विशेष प्रकार के बटन हैं जो आपको सोशल नेटवर्क पर साइट के अलग-अलग पेजों के लिंक साझा करने की अनुमति देते हैं - यह Vkontakte, Facebook, Odnoklassniki, Twitter आदि से अतिरिक्त आगंतुकों को आकर्षित करता है। तीसरा, जिन लेखों को बड़ी संख्या में "पसंद" और "दिल" मिले हैं, उन पर साइट पाठकों द्वारा अत्यधिक भरोसा किया जाता है।

इसलिए, यह जानना बहुत महत्वपूर्ण है कि वेब संसाधन को विकसित करने में सहायता के लिए किसी वेबसाइट पर सोशल नेटवर्किंग बटन कैसे स्थापित करें। सबसे लोकप्रिय सोशल नेटवर्क पर विचार किया जाएगा

• के साथ संपर्क में
• फेसबुक
• सहपाठियों
• गूगल "+1"
• ट्विटर
• मेरी दुनिया

यहां हम सामाजिक नेटवर्क द्वारा पेश किए गए मानक बटनों को स्थापित करने पर गौर करेंगे। ऐसे में प्रत्येक बटन को दूसरों से अलग लगाना होगा, इसमें थोड़ा समय लगता है, लेकिन यह देखने में भी बहुत अच्छा लगता है।

बटन काफी लचीला है, इस पर शिलालेख को आप जो चाहें बदला जा सकता है (डिफ़ॉल्ट "सहेजें" है)।

सबसे पहले, आपको पृष्ठ पर जाना होगा, जहां आपको स्क्रिप्ट कोड प्राप्त होगा जिसे प्रदर्शित करने के लिए बटन के लिए आपको अपनी साइट पर इंस्टॉल करना होगा।

यहां आप 5 शैलियों में से एक चुन सकते हैं: बटन, बिना काउंटर वाला बटन, लिंक, बिना आइकन वाला लिंक, आइकन।

"टेक्स्ट" फ़ील्ड आपको मानक "सेव" शिलालेख को अपने आप में बदलने की अनुमति देता है।

URL के रूप में, आप बटन वाले पृष्ठ का पता या किसी अन्य पृष्ठ का पता (अपनी पसंद का) चुन सकते हैं। पहले मामले में, बटन उस पृष्ठ पर एक लिंक साझा करेगा जहां बटन स्वयं स्थित है। दूसरे मामले में, बटन आपके द्वारा निर्दिष्ट लिंक को साझा करेगा, चाहे वह कहीं भी स्थित हो।

एंबेड कोड में दो भाग होते हैं: पहला और टैग के बीच कहीं भी स्थित होना चाहिए, दूसरा - उस स्थान पर जहां बटन प्रदर्शित होना चाहिए। पैराग्राफ में किसी वेबसाइट पर बटन स्थापित करने के बारे में पढ़ें।

बटन के लिए दूसरा विकल्प "लाइक" विजेट है। इसे साइट पर इंस्टॉल करना आसान होगा, क्योंकि... अंत में आपको कोड का केवल एक टुकड़ा प्राप्त होगा जिसे साइट पर सही स्थान पर रखना होगा।

बटन को कॉन्फ़िगर करने के लिए, पर जाएँ इस लिंक. यहां आपको कई पैरामीटर भी भरने होंगे।

साइट का नाम - यहां अपनी साइट का संक्षिप्त और वास्तविक नाम बताना बेहतर होगा।

वेबसाइट का पता - अपनी वेबसाइट के मुख्य पृष्ठ का पता दर्ज करें।

साइट का मुख्य डोमेन - साइट के मुख्य दर्पण को इंगित करें (इसे "होस्ट" ऑपरेटर के पैरामीटर के रूप में पाया जा सकता है), यदि आपको ऐसा करना मुश्किल लगता है, तो सुझाए गए VKontakte को छोड़ दें।

बटन प्रकार बटन की विभिन्न शैलियाँ हैं और इसके स्वरूप को प्रभावित करते हैं।

बटन की ऊंचाई "पसंद करें" बटन के ज्यामितीय आयाम हैं।

बटन का नाम - दो विकल्प उपलब्ध हैं (मुझे यह पसंद है, यह दिलचस्प है)।

इंसर्शन कोड वह कोड है जो VKontakte सोशल नेटवर्क बटन को प्रदर्शित करने के लिए आवश्यक है।

इस पृष्ठ पर बटन कॉन्फ़िगर किया जा रहा है. कठिनाइयाँ उत्पन्न हो सकती हैं क्योंकि... फॉर्म पर टिप्पणियाँ अंग्रेजी में लिखी गई हैं, लेकिन नीचे आप प्रत्येक फ़ील्ड का संक्षिप्त विवरण पढ़ सकते हैं।

लाइक करने के लिए यूआरएल - बटन के लिए पेज का यूआरएल (यदि फ़ील्ड नहीं भरा गया है, तो उस पेज का पता लिया जाएगा जिस पर बटन स्थित है)।

भेजें बटन - एक चेकमार्क की उपस्थिति एक नए विकल्प को सक्षम करती है - फेसबुक पर एक लिंक भेजने के लिए (एक अतिरिक्त बटन दिखाई देगा - "भेजें")। चालू होने पर, दो बटन एक साथ प्रदर्शित होंगे।

लेआउट शैली - बटन की शैली, उसके स्वरूप को प्रभावित करती है (बटन गिनती को मानक माना जाता है)।

चौड़ाई - पिक्सेल में बटन की चौड़ाई।

चेहरे दिखाएं - सक्षम होने पर, उन लोगों के अवतार दिखाए जाएंगे जिन्होंने पहले ही इस बटन पर क्लिक किया है।

फ़ॉन्ट - बटन फ़ॉन्ट प्रकार.

रंग योजना - बटन के आगे की जगह की पृष्ठभूमि (सफेद और काला)।

प्रदर्शित करने की क्रिया - बटन का नाम (इसे पसंद करें, मैं इसकी अनुशंसा करता हूं)।

कोड प्राप्त करें - एक बटन जो स्क्रिप्ट कोड उत्पन्न करता है।

इन सोशल नेटवर्कों ने रूसी भाषी इंटरनेट पर व्यापक लोकप्रियता हासिल की है; वहां बड़ी संख्या में लोग रहते हैं, इसलिए आपको ओडनोक्लास्निकी सेवा से "क्लास" बटन और माई वर्ल्ड वेबसाइट से "लाइक" बटन को इंस्टॉल करने की उपेक्षा नहीं करनी चाहिए।

बटनों को कॉन्फ़िगर करने के लिए, आपको पर जाना होगा। आप बटनों को अलग-अलग जोड़ सकते हैं, प्रत्येक को अलग-अलग कस्टमाइज़ कर सकते हैं, या आप एक ही समय में दोनों बटन संपादित कर सकते हैं।

ऊँचाई का आकार - बटनों का ज्यामितीय आकार।

उपस्थिति - बटन फ्रेम की उपस्थिति।

- बटन चयन (जैसे, वर्ग)

काउंटर - बटन प्रेस काउंटर को चालू और बंद करें (दाईं ओर, शीर्ष पर - काउंटर का स्थान)।

बटनों पर टेक्स्ट - बटनों के लिए उपलब्ध तीन नामों में से एक का चयन करें।

एंबेड कोड - स्क्रिप्ट कोड जिसे साइट पर इंस्टॉल करना होगा।

एक नया सोशल नेटवर्क जिसने थोड़े ही समय में बड़ी संख्या में दर्शक वर्ग प्राप्त कर लिया है। "+1" बटन के बिना किसी साइट की कल्पना करना कठिन है, क्योंकि... यह न केवल आपको सोशल नेटवर्क में लिंक जोड़ने और "प्लस" की संख्या बढ़ाने की अनुमति देता है, बल्कि Google खोज इंजन के टॉप में साइट के परिणामों को भी प्रभावित कर सकता है।

इसके बारे में सभी विवरण, साथ ही बटन की स्थापना और कॉन्फ़िगरेशन स्थित हैं।

सर्वाधिक लोकप्रिय लघु संदेश सेवा को नज़रअंदाज नहीं किया जा सकता। इस सोशल नेटवर्क के लिए एक बटन इंस्टॉल करें और देखें कि लोग कितनी जल्दी ट्विटर पर आपकी साइट के लिंक साझा करेंगे। आप यहां बटन को कस्टमाइज़ कर सकते हैं.

सबसे पहले आपको वांछित बटन का चयन करना होगा (हम पहले विकल्प में रुचि रखते हैं - "लिंक भेजें" बटन)।

इसके बाद, पेज पर एक फॉर्म दिखाई देगा जिसमें कई फ़ील्ड होंगी जिन्हें भरना होगा।

लिंक भेजें - उस पृष्ठ का चयन करें जिस पर बटन स्थित है, या कोई अन्य।

टेक्स्ट - वह टेक्स्ट चुनें जो बटन के आगे दिखाई देगा (बटन पर नहीं)।

काउंटर दिखाएँ - बटन दबाने की संख्या की गिनती सक्षम या अक्षम करें।

इसके साथ - ट्विटर पर एक लिंक संदेश जोड़ने के लिए एक विधि का चयन करना (किसी भी चीज़ को प्रभावित नहीं करता है)।

टैग - एक टैग चुनें जो ट्विटर पर प्रकाशित किया जाएगा (किसी भी चीज़ को प्रभावित नहीं करता)।

बड़ा बटन - बटन का ज्यामितीय आकार बढ़ाता है।

ट्विटर को अपनाने से इनकार करें - ट्विटर शैलियों को अस्वीकार करें (बॉक्स को अनियंत्रित छोड़ देना बेहतर है)।

भाषा - बटन की भाषा चुनें।

दाईं ओर, एक कोड उत्पन्न होगा जिसे साइट पर जोड़ना होगा।

ऐसा करने के लिए, आपको कई फ़ील्ड भरने होंगे जो आवश्यक स्क्रिप्ट कोड उत्पन्न करेंगे।

आकार - छोटा या बड़ा बटन आकार।

शैली - एक बटन या एक आइकन के बीच चयन करें।

काउंटर उपस्थिति - बटन प्रेस काउंटर को सक्षम या अक्षम करें।

बटन का स्वरूप इस बात का उदाहरण है कि बटन कैसा दिखेगा।

शीर्षक - पृष्ठ के लिए एक शीर्षक चुनें (कस्टम या वर्तमान पृष्ठ का शीर्षक)।

एंबेड कोड - आवश्यक कोड जो साइट पर जोड़ा जाता है।

लेकिन यदि आप अपनी वेबसाइट पर प्रत्येक बटन के लिए कोड नहीं जोड़ना चाहते हैं, तो आप मानक स्क्रिप्ट का उपयोग कर सकते हैं जो तुरंत सोशल नेटवर्क बटन का एक समूह बनाती हैं। इस मामले में, आपको बस अपनी वेबसाइट पर ऐसी स्क्रिप्ट का एक कोड जोड़ने की आवश्यकता है, और आपके पास तुरंत सबसे लोकप्रिय सोशल नेटवर्क के बटन इंस्टॉल हो जाएंगे।

ब्लॉक को कॉन्फ़िगर करने और वांछित सामाजिक नेटवर्क का चयन करने के लिए, इस लिंक का अनुसरण करें। नीचे दिए गए स्क्रीनशॉट से पता चलता है कि आप प्रस्तावित सामाजिक नेटवर्क में से वांछित सामाजिक नेटवर्क के लिए बटन का चयन कर सकते हैं, और ब्लॉक की उपस्थिति को थोड़ा संपादित भी कर सकते हैं।

सेवाओं का सेट - साइट के लिए सोशल नेटवर्किंग बटन का चयन (चेक मार्क वाले बटन साइट पर प्रदर्शित किए जाएंगे)।

कोड आवश्यक स्क्रिप्ट है जिसे साइट पर जोड़ने की आवश्यकता है।

हाल ही में, सोशल नेटवर्क बटन के डिजाइनर - PLUSO - ने व्यापक लोकप्रियता हासिल की है। आप इस लिंक का उपयोग करके साइट पर जा सकते हैं।

कंस्ट्रक्टर काफी लचीला है, इसमें कई सेटिंग्स हैं, जिससे आप सोशल नेटवर्क बटन बना सकते हैं जो साइट के डिजाइन में पूरी तरह फिट होंगे।

सबसे पहले आपको कई प्रस्तावित (क्षैतिज, ऊर्ध्वाधर, रंगीन, रंगहीन, आदि) में से बटन और काउंटर की शैली चुननी होगी।

फिर आपको कई सेटिंग्स का चयन करके कॉन्फ़िगर करना होगा

• ब्लॉक स्थान (ऊर्ध्वाधर, क्षैतिज);
• बटन का रंग (उज्ज्वल, गहरा);
• ब्लॉक का आकार (बड़ा, छोटा);
• काउंटर (उपस्थिति या अनुपस्थिति);
• पृष्ठभूमि (रंगहीन या रंगीन);

कोड आपके द्वारा निर्दिष्ट मापदंडों के अनुसार उत्पन्न होगा, जिसके बाद इसे साइट पर डालना होगा।

एक अन्य सेवा जो आपको अपनी वेबसाइट के लिए बटन डिज़ाइन करने की अनुमति देती है वह है Share42.com/ru।

यह जनरेटर आपको बटनों के आकार को अनुकूलित करने, बड़ी संख्या में उपलब्ध सोशल नेटवर्कों में से वांछित सामाजिक नेटवर्क निर्धारित करने और आइकन की उपस्थिति को संपादित करने की भी अनुमति देता है।

बटनों के आकार और वांछित सामाजिक नेटवर्क का चयन करें, और फिर अतिरिक्त विकल्पों को कॉन्फ़िगर करने के लिए आगे बढ़ें।

आइकन वाले पैनल का प्रकार - बटनों का एक ब्लॉक प्रदर्शित करना ("वर्टिकल फ्लोटिंग" विकल्प बहुत दिलचस्प है)।

आइकनों की दृश्य संख्या को सीमित करें - प्रदर्शित बटनों की संख्या का चयन करें (अन्य लिंक के पीछे छिपे होंगे)।

साइट एन्कोडिंग - अपनी साइट की एन्कोडिंग चुनें।

Share42.com साइट के लिए एक आइकन जोड़ें - शायद आपको इसे अनचेक करना चाहिए।

काउंटर दिखाएँ - बटन क्लिक काउंटर सक्षम करें (केवल जब jQuery चल रहा हो)।

इस स्क्रिप्ट को इंस्टॉल करना काफी जटिल है, लेकिन इसे Share42 वेबसाइट पर चरण दर चरण वर्णित किया गया है।

यदि साइट पर डाले जाने वाले कोड में दो भाग होते हैं (जैसा कि VKontakte बटन के मामले में होता है), तो प्रत्येक भाग अलग से स्थापित किया जाता है। यदि कोड दो भागों में विभाजित नहीं है, तो इस चरण को छोड़ा जा सकता है।

कोड के पहले भाग को और टैग के बीच जोड़ना होगा। ऐसा करने के लिए, अपने वर्डप्रेस एडमिन पैनल में लॉग इन करें और टेम्पलेट एडिटर पर जाएं।

टेम्पलेट संपादक में आपको फ़ाइल "हेडर" (हेडर.php) ढूंढनी होगी, यदि कोई नहीं है, तो - "मुख्य टेम्पलेट" (index.php)। अब आपको या टैग ढूंढना होगा। यदि निर्दिष्ट फ़ाइलों में ऐसे कोई टैग नहीं हैं (सभी विषय अलग-अलग हैं, यह मामला भी हो सकता है), तो आपको संपादन के लिए सभी फ़ाइलें खोलनी होंगी और उनमें से प्रत्येक में टैग देखना होगा। खोजने के लिए, आप कीबोर्ड शॉर्टकट "Ctrl+F" का उपयोग कर सकते हैं।

एक बार जब आपको अपने आवश्यक टैग मिल जाएं, तो आप अन्य स्क्रिप्ट के कोड को गलती से छूने से बचने के लिए कोड के पहले भाग को समापन टैग के ठीक पहले रख सकते हैं।

कोड का दूसरा भाग वहां रखा गया है जहां आप साइट के लिए चयनित सोशल मीडिया बटन देखना चाहते हैं। यदि कोड में केवल एक भाग होता है, तो यह केवल इस ऑपरेशन को करने के लिए पर्याप्त है।

अक्सर, बटन लेख से पहले या अंत में जोड़े जाते हैं। निस्संदेह, आसान दूसरा विकल्प है। हम इस पर विचार करेंगे.

आपको वह स्थान ढूंढना होगा जहां लेख समाप्त होता है (पृष्ठ का मुख्य पाठ भाग)। ऐसा करने के लिए, आपको "एकल प्रविष्टि" (single.php) फ़ाइल को संपादित करना होगा।

अब आपको उस ऑपरेटर को ढूंढना होगा जो लेख की मुख्य सामग्री को प्रदर्शित करने के लिए जिम्मेदार है। मेरे मामले में, यह "the_content" है, इसके तुरंत बाद बटन कोड रखा गया है।

इसी तरह, आप लेख की शुरुआत में कोड डाल सकते हैं, आपको बस लेख के शीर्षक और पाठ के बीच एक जगह ढूंढनी होगी।

इस संक्षिप्त ट्यूटोरियल में हम सोशल नेटवर्क पर साझा करने के लिए सरल और कस्टम बटन बनाएंगे।

मैं जो विकल्प प्रस्तावित करता हूं वह इन कमियों से रहित है - सभी फाइलें आपके सर्वर पर होंगी (अर्थात, वे साइट के साथ ही गिर जाएंगी), बाहर से कुछ भी लोड किए बिना, और बहुत अच्छी तरह से अनुकूलन योग्य भी है। इसके अलावा, हमारे पास एक छोटा सा प्लस होगा - आमतौर पर सामाजिक बटन में बड़े तीन (VKontakte, Facebook और Twitter) शामिल होते हैं। हमारे मामले में, क्लिप में Mail.Ru, Odnoklassniki और टेलीग्राम शामिल हैं, ताकि कोई भी हमारी साइट को साझा किए बिना न छोड़े।

एकमात्र महत्वपूर्ण दोष: बटन दबाने की संख्या की गणना नहीं की जाएगी। हम सादगी और लचीलेपन से परे जाते हैं।

पहली बार, मेरे अपने सोशल नेटवर्क बटन का सवाल मेरे सामने ऐसे समय आया जब साइट पर एक पेज के लिए सोशल शेयरिंग बहुत जरूरी थी, लेकिन सभी संसाधन डिजाइन में फिट नहीं थे। और मैं अकेला नहीं हूं - कस्टम बटन का विचार नया नहीं है। मेरी राय में, सबसे दिलचस्प समाधान, मैंने हैबे पर खोजा था और एक छोटी सी खोज के बाद मैं इसे गिटहब पर ले आया। मैंने इस तर्क को आधार बनाया कि ऐसे साझाकरण बटन कैसे काम करते हैं और उन्हें रचनात्मक रूप से संशोधित किया।

समाधान बूट जितना सरल है - सोशल नेटवर्क के लिए लिंक बनाए जाते हैं, जिसके भीतर वे पैरामीटर जिन्हें वे समझते हैं उन्हें प्रसारित किया जाता है। क्योंकि इसके लिए टैग का इस्तेमाल किया जाता है , तो आप इसमें लगभग कुछ भी लपेट सकते हैं - अनुकूलन की गुंजाइश (जिसके लिए यह सब किया गया है) बहुत बड़ी है।

के साथ संपर्क में फेसबुकमेल.आरयू सहपाठियों ट्विटरतार

तैयार। कोड पहले से ही काम कर रहा है और इसका उपयोग किया जा सकता है - जब आप लिंक पर क्लिक करते हैं, तो एक नया सोशल नेटवर्क टैब खुलता है। अब इसे ऐसा बनाएं कि यह अधिक टैब न बनाए, बल्कि ब्राउज़र के शीर्ष पर एक छोटी सी विंडो खोले। ठीक नीचे हम निम्नलिखित कोड जोड़ते हैं:

फ़ंक्शन सेटऑनक्लिक(ए) ( a.setAttribute("onclick","popupWin = window.open(this.href,"contacts","toolbar=0,status=0,width=626,height=436"); पॉपअपविन। फोकस(); गलत वापसी"); ) फ़ंक्शन एक्सटर्नललिंक्स() (var लिंक = document.getElementsByTagName("a"); for (i=0; i