🤝 👨🏾‍🤝‍👨🏼 👩🏼‍🌾 किसी साइट पर सोशल मीडिया शेयर बटन स्थापित करने की कुछ सूक्ष्मताएँ 🕗 👗 👨🏻‍💼

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

पहली नज़र में ऐसा लग रहा था - यहाँ क्या खास हो सकता है - तैयार html / js कोड और तैयार करें? लेकिन सूक्ष्मता विवरण में थी: क्या होगा अगर एक सामाजिक के लिए। क्या आपको नेटवर्क पर एक पाठ भेजने की आवश्यकता है, और दूसरे से दूसरे को? सभी नेटवर्क पर तस्वीर और विवरण कैसे स्थानांतरित करें? और अगर एक पृष्ठ पर पाठ और चित्रों के लिए कई अलग-अलग विकल्प हैं? सामाजिक नेटवर्क में पहले से ही कैश्ड लिंक जानकारी को कैसे साफ़ करें? हमें इन सभी सवालों के जवाब खोजने थे, जो आप इस लेख से सीख सकते हैं।

सबसे आसान विकल्प:
अपनी साइट के पेज पर "शेयर" ब्लॉक डालने के लिए, बस http://api.yandex.ru/share/ पर जाएं और बटन के साथ वांछित प्रकार के विजेट बनाने के लिए विज़ार्ड का उपयोग करें - आपको एक कोड मिलता है जैसे

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>

इस कोड का उपयोग करके, साइट पर एक उपयोगकर्ता नेटवर्क पर इसके लिए एक लिंक साझा करने में सक्षम होगा, जो कुछ इस तरह दिखाई देगा:

यहां वाक्यांश "कौन स्टॉक पर 8% छूट के साथ सॉफ़्टवेयर खरीदना चाहता है?" उपयोगकर्ता द्वारा स्वयं लिखा गया है, और नीचे दिया गया है कि साइट का लिंक सामाजिक नेटवर्क में कैसा दिखता है। बहुत सुंदर नहीं, है ना?

एक सामाजिक नेटवर्क पर चित्र, कैप्शन और विवरण साझा करें।
यह मेटा टैग का उपयोग करके किया जा सकता है, उदाहरण के लिए:

  <meta property="og:image" content="http://allsoft.ru/bitrix/templates/allsoft2011/images/8let/dragon_normal.jpg" /> <meta property="og:title" content=" –  !" /> <meta property="og:description" content=" :    «»!      ,    !" />

तब सामाजिक नेटवर्क में लिंक इस तरह दिखाई देगा:

यहां "आज allsoft.ru का जन्मदिन है - 8 साल :)" उपयोगकर्ता द्वारा लिखित पाठ है, बाकी मेटा टैग से जानकारी है। आप फेसबुक पेज Developers.facebook.com/docs/share पर इन मेटा टैग के बारे में अधिक पढ़ सकते हैं, बाकी सामाजिक नेटवर्क भी उन्हें पूरी तरह से समझते हैं।

यह तंत्र कैसे काम करता है:
1. जब उपयोगकर्ता बटन पर क्लिक करता है, तो विजेट पृष्ठ लिंक को सोशल नेटवर्क सर्वर पर भेजता है।
2. सोशल सर्वर नेटवर्क खुद इस लिंक को एक्सेस करता है और पेज के बारे में जानकारी पढ़ता है - शीर्षक, विवरण, छवि।
3. सोशल सर्वर नेटवर्क पेज के बारे में अपनी तरफ से कैश करता है और सोशल नेटवर्क के पेज पर प्रदर्शित करता है

विकास के दौरान क्या समस्याएं हो सकती हैं:
1. यदि आप किसी साइट को बाहर से दुर्गम सर्वर पर विकसित कर रहे हैं, जिसे http-प्राधिकरण द्वारा बंद किया गया है, या स्थानीय रूप से - सामाजिक। नेटवर्क पेज के बारे में जानकारी प्राप्त करने में सक्षम नहीं होगा, या लिंक को बिल्कुल भी साझा करने की अनुमति नहीं देगा (उदाहरण के लिए, "Odnoklassniki" इस तरह से काम करता है), या इसे शीर्षक और विवरण के बिना प्रदर्शित करता है (जैसा कि पहले, सबसे सरल संस्करण में चित्र में है)
2. सोशल नेटवर्क सर्वर द्वारा पेज को एक बार एक्सेस करने के बाद, इसके बारे में जानकारी कैश हो गई है - इसलिए, यदि आप शीर्षक और विवरण बदलना चाहते हैं और इसे अपनी साइट के किनारे बदलना चाहते हैं, तो यह सोशल नेटवर्क में नहीं बदलेगा - यह होगा पहले से कैश की गई जानकारी का उपयोग करें। (इसे कैसे ठीक करें - नीचे देखें।)

एक पृष्ठ के लिए विभिन्न विवरण कैसे स्थानांतरित करें।
उदाहरण के लिए, कॉमिक टेस्ट के साथ allsoft.ru पर एक प्रचारक पेज बनाते समय, सोशल नेटवर्क पर अलग-अलग विवरण भेजने के लिए परीक्षण में उपयोगकर्ता द्वारा बनाए गए विभिन्न अंकों के लिए आवश्यक था। चूंकि लिंक पर क्लिक करके सोशल नेटवर्क के पेज का विवरण प्राप्त होता है, इसलिए अलग-अलग विवरणों के लिए अलग-अलग लिंक की आवश्यकता होती है। इसके अलावा, ट्विटर आपको केवल 140 अक्षरों को एम्बेड करने की अनुमति देता है, इसलिए इसे एक अलग, छोटे विवरण की आवश्यकता होती है।

ऐसा करने के लिए:
1. विभिन्न परीक्षा परिणामों के लिए, हमें यैंडेक्स "शेयर" ब्लॉक एपीआई के विभिन्न लिंक को स्थानांतरित करना होगा। हमारे मामले में, ये थे: http: //allsoft.ru/promo/allsoft8let/? Share = normal, allsoft.ru/promo/allsoft8let/?share=high , allsoft.ru/promo/allsoft8let/?share=low और http: //allsoft.ru/promo/allsoft8let/ परीक्षण के बाहर ब्लॉक के लिए।
2. तदनुसार, URL में स्क्रिप्ट पृष्ठ पर दिए गए मापदंडों के आधार पर, पृष्ठ को अलग मेटा टैग के साथ बनाया जाना चाहिए।
3. ट्विटर के लिए एक अलग विवरण प्रसारित करने के लिए, आपको पहले से ही एक और यैंडेक्स "शेयर" एपीआई ब्लॉक प्रारूप का उपयोग करना चाहिए - टैग नहीं, लेकिन जेएस-कोड:

  new Ya.share({ element: 'ya_share_normal', elementStyle: { 'type': 'none', 'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir'] }, link: 'http://allsoft.ru/promo/allsoft8let/?share=normal', serviceSpecific: { twitter: { title: ' :    «»!      ,    !' } } });

1. यहां ya_share_normal पृष्ठ पर तत्व की आईडी है () जिसमें सामाजिक बटन वाला ब्लॉक दिखाई देगा, लिंक लिंक है, साथ ही ट्विटर के लिए सेवा में हम शीर्षक निर्दिष्ट करते हैं, जो कि ओग में है से अलग है: शीर्षक मेटा टैग।

इस प्रकार, कार्य के लिए "3 अलग-अलग परीक्षा परिणाम और परीक्षण के बाहर एक पृष्ठ के लिए एक सामान्य लिंक", हमारे पास 4 टैग होंगे:

 <span id="ya_share_normal"></span> <span id="ya_share_high"></span> <span id="ya_share_low"></span> <span id="ya_share"></span>

और जावास्क्रिप्ट में कोड के 4 ब्लॉक, जैसा कि ऊपर वर्णित है।

कैश्ड सोशल नेटवर्क शीर्षक और विवरण कैसे बदलें।
1. फेसबुक के लिए सबसे अच्छा तरीका है: उनके डिबगर डेवलपर्स पर जाएं ।facebook.com/tools/debug और अपने लिंक का यूआरएल दर्ज करें - यह पृष्ठ के बारे में जानकारी प्रदर्शित करेगा और साथ ही कैश को रीसेट करेगा, जो "शेयर" बटन को प्रभावित करेगा।
2. यह भी संभव है, लेकिन अनुशंसित नहीं है, उपयोग करने के लिए: 1) लिंक के लिए एक पैरामीटर जोड़ना, उदाहरण के लिए? वी = 2 2) लिंक को कम करने के लिए bit.ly और इसी तरह की सेवाओं का उपयोग करना। आप यहां पेशेवरों और विपक्षों के बारे में अधिक पढ़ सकते हैं ( umairj.com/146/how-to-clear-facebook-shares-cache
3. दुर्भाग्य से, फेसबुक, अन्य सामाजिक नेटवर्क जैसी कोई विधि नहीं है। इसलिए, उनके लिए आपको यैंडेक्स से शेयर ब्लॉक के लिंक या एपीआई को बदलने के साथ विधि 2 का उपयोग करने की आवश्यकता है:

  new Ya.share({ element: 'ya_share', elementStyle: { 'type': 'none', 'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir'] }, title: 'Allsoft 8 ! —   11  31 !', description: '       ', link: 'http://allsoft.ru/promo/allsoft8let/', serviceSpecific: { twitter: { title: 'Allsoft 8 ! —   11  31 !' } } });

एपीआई के माध्यम से किसी अन्य शीर्षक और विवरण को स्थानांतरित करते समय, सामाजिक नेटवर्क मेटा टैग से पहले कैश की गई जानकारी को अपडेट करते हैं (फेसबुक के अपवाद के साथ - लेकिन इसके लिए एक तरीका है 1)
इसके अलावा, आप शायद तस्वीर बदलने के लिए स्थानांतरण और छवि ले सकते हैं।

खैर, यह सब लगता है। Allsoft.ru/promo/allsoft8let में आपका स्वागत है और अपने दोस्तों के साथ इस लिंक को साझा करने के लिए दौड़ें - आज कार्रवाई का आखिरी दिन है!

लेखक: व्लादिमीर होवरोस्टोव - सॉफ्टलाइन वेब डेवलपर

किसी साइट पर सोशल मीडिया शेयर बटन स्थापित करने की कुछ सूक्ष्मताएँ

More articles: