सामाजिक बटन का अनुकूलन

हम में से कई, एक तरह से या किसी अन्य, का सामना सामाजिक नेटवर्क के बटन को अनुकूलित करने की समस्या के साथ किया गया था, और कई अभी भी सामना कर रहे हैं। हाल ही में, Sports.ru पर हमें इस समस्या को हल करना था कि न केवल "पसंद" की उपस्थिति को कैसे अनुकूलित किया जाए, बल्कि एक ही पृष्ठ पर विभिन्न पाठ ब्लॉक से संबंधित सामाजिक बटन के कई ब्लॉक भी लगाए जाएं।

इस विषय में, हम आपको बताएंगे कि हमने अपने विशेष प्रोजेक्ट (ध्यान से, यह विज्ञापन) में इस समस्या को कैसे हल किया, और एक तैयार-निर्मित और महत्वपूर्ण रूप से, काफी लचीला समाधान साझा करें।



एक jQuery प्लगइन लिखा गया था जो निम्नलिखित कार्य करता है:

• संदेश में जानकारी जोड़ना (शीर्षक, विवरण, चित्र और स्वयं लिंक)।
• गिनती पसंद है।
• कई सामाजिक ब्लॉक के पृष्ठ पर नियुक्ति।
• उपयोगकर्ता को अपलोड की गई सामग्री पर ले जाना (सामाजिक नेटवर्क url में हैश काट देता है)।

फिलहाल, प्लगइन फेसबुक शेयर, Vkontakte शेयर और ट्विटर का समर्थन करता है।

ज्ञात मुद्दे

• फेसबुक कभी-कभी पसंद की संख्या को तुरंत नहीं देता है, और ट्विटर बहुत लंबी देरी के साथ गणना करता है।
• VKontakte में कॉलबैक पैरामीटर की समझ की कमी के कारण, एक ही पृष्ठ पर कस्टम और देशी बटन (केवल VKontakte) का उपयोग करने की अनुशंसा नहीं की जाती है।

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

कैसे करें इस्तेमाल?

एचटीएमएल

<div class="event-container" id="event_5"> <h2> </h2> <img src="image.png" alt="" /> <div class="summary"> <p>   </p> </div> <div class="likes-block"> <a href="?hash=event_5" class="like l-fb"> <i class="l-ico"></i> <span class="l-count"></span> </a> <a href="?hash=event_5" class="like l-vk"> <i class="l-ico"></i> <span class="l-count"></span> </a> <a href="?hash=event_5" class="like l-tw"> <i class="l-ico"></i> <span class="l-count"></span> </a> </div> </div> 

जावास्क्रिप्ट

  jQuery(document).ready(function($) { $('.like').socialButton(); $.scrollToButton('hash', 3000); }); 

स्पष्टीकरण

कक्षाओं (एल-एफबी, एल-ट्व, एल-वीके) का उपयोग करके, प्लगइन यह निर्धारित करेगा कि यह किस बटन के साथ काम कर रहा है। जैसा कि मैंने कहा, आप वर्ग के नाम और प्रमुख तत्व चयनकर्ताओं को ओवरराइड कर सकते हैं (डिफ़ॉल्ट कॉन्फिग के लिए स्रोत में डिफ़ॉल्ट देखें)। ऐसा करने के लिए, सोशलबटन () विधि के लिए बस फिर से परिभाषित मानकों के साथ हैश पास करें।

अब, यदि आप http://path.to/page.html?hash=news_123 पते पर जाते हैं, तो प्लगइन आपको 3 सेकंड में news_123 id-shnik के साथ सामग्री पर "स्क्रॉल" करेगा।

डिफ़ॉल्ट रूप से, प्लगइन हेडर के रूप में h2 का उपयोग करता है (यदि यह नहीं मिलता है, तो document.title), विवरण के रूप में पहला पी-बॉक्स, एक लिंक के रूप में, एक समान वर्ग के साथ लिंक के href विशेषता का मूल्य। वैसे, निरपेक्ष और सापेक्ष दोनों प्रकार के मूत्रल समर्थित हैं।

अंत में

प्लगइन का उपयोग बुद्धिमानी से करें; आपको पृष्ठ पर सोशल के साथ 100 ब्लॉक नहीं लगाना चाहिए। बटन। प्रत्येक बटन काउंटर एपीआई के लिए एक अनुरोध है। यदि पृष्ठ पर बहुत सारी सामग्रियां हैं, तो गतिशील लोडिंग को लागू करें।

डेमो कहां है? स्रोत कहां हैं?

यहाँ स्रोत: GitHub
एक उदाहरण है: जाओ

आपके ध्यान के लिए धन्यवाद, और हम टिप्पणियों में प्रश्नों की प्रतीक्षा कर रहे हैं। मुझे उम्मीद है कि यह लेख आपके लिए उपयोगी है,% उपयोगकर्ता नाम%!