🍱 👵🏿 😻 सोशल मीडिया बटन, एचटीएमएल 5, डेटा विशेषता और जावास्क्रिप्ट अतुल्यकालिक लोडिंग ✔️ 🐬 🤵🏾

लंबे समय से पहले से ही मैंने अपनी वेबसाइट पर सोशल नेटवर्क बटन इंस्टॉल करने की योजना बनाई है। अंत में मुझे इसके लिए समय मिला, समस्या इस तथ्य से बढ़ गई थी कि मैं खुद सामाजिक नेटवर्क का उपयोगकर्ता नहीं हूं, हालांकि मेरे खिलाफ कुछ भी नहीं है।

जानकारी इकट्ठा करने के लिए मैंने जो पहली चीज शुरू की, वह काफी कुछ है, सच्चाई और पुरानी है। उदाहरण के लिए, ट्विटर ने पहले ही लिंक, पुराने twitter.com/share और नए twitter.com/intent/tweet को बदल दिया है, Google के पास " www.google.com/buzz/post " लिंक है, जो लंबे समय से काम नहीं कर रहा है, इसके बजाय plus.google। com / शेयर । बेशक, ये अच्छी तरह से ज्ञात तथ्य हैं, लेकिन ऐसा लगता है कि अभी भी हर कोई इस बारे में नहीं जानता है और पुराने लिंक पर "fumbling" का सुझाव देता है।

सामान्य तौर पर, इस विषय से खुद को परिचित करने के बाद, मैंने मूल स्रोत में बटन लेने का फैसला किया:
ट्विटर - twitter.com/about/resources/buttons
फेसबुक - Developers.facebook.com/docs/reference/plugins/like
Vkontakte - vk.com/developers.php?o=-1&p=Like
Google+ - Developers.google.com/+/plugins/+1button

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

ट्विटर:

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru"></a>

 <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

फेसबुक:

 <div id="fb-root"></div>

 <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

गूगल +:

 <!-- Place this tag where you want the +1 button to render. --> <div class="g-plusone" data-annotation="none"></div>

 <!-- Place this tag after the last +1 button tag. --> <script type="text/javascript"> window.___gcfg = {lang: 'ru'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script>

Vkontakte:

 <!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="//vk.com/js/api/openapi.js?75"></script> <script type="text/javascript"> VK.init({apiId: 3363525, onlyWidgets: true}); </script>

 <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like"></div>

 <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button"}); </script>

ये बटन कोड हैं। हम क्या देखते हैं? Vkontakte केवल एक ही कोड है जो HTML 5 का उपयोग नहीं करता है। इस स्थिति में, HTML 5 का उपयोग HTML टैग्स में डेटा- विशेषता द्वारा इंगित किया जाता है। यह भी दिलचस्प है कि ट्विटर और फेसबुक में बहुत समान कोड हैं, जाहिरा तौर पर एक दूसरे से झाँक रहे हैं। ट्विटर और फेसबुक में भी टाइप = "टेक्स्ट / जावास्क्रिप्ट" नहीं था, जो एचटीएमएल 5 से मेल खाता है, प्रकार की विशेषता अब वैकल्पिक है। डिफ़ॉल्ट जावास्क्रिप्ट मान (ECMAScript)। और Google प्रकार = "पाठ / जावास्क्रिप्ट" को इंगित करता रहता है। लेकिन Google केवल एक ही जावास्क्रिप्ट का उपयोग कर एसिंक्रोनस रूप से एसिंक्स विशेषता का उपयोग कर रहा है जो HTML 5 विनिर्देश के अनुरूप है।

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

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

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

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

जावास्क्रिप्ट का उपयोग करना, उदाहरण के लिए, डेटा- विशेषता बहुत सरलता से सेट की गई है:

 <div class="g-plusone" data-annotation="none"></div>

 document.getElementById(id).dataset.annotation = "none"

हमेशा की तरह, कुछ बारीकियाँ थीं। यह सभी ब्राउज़रों में काम करता है, सिवाय ... जैसा कि आप अनुमान लगा सकते हैं, IE से पहले यानी 8, यानी 9 पहले से ही 9 में काम करता है। लेकिन हम एक अलग तरीके से लिखेंगे जो सभी ब्राउज़रों में काम करेगा:

 document.getElementById(id).setAttribute("data-annotation", "none");

अंत में, यहाँ मुझे क्या मिला:

1. मैंने HTML को थोड़ा बदल दिया है, मुख्यतः उस साइट पर जिसे मुझे ट्विटर पर सीधे लिंक की आवश्यकता नहीं है, और उन्होंने निम्नलिखित लिंक को अपने कोड में डाल दिया है: कि वे यह क्यों नहीं समझते हैं कि कोई और उनके बारे में नहीं जानता है? या खोज इंजन रेटिंग छोटा है? सामान्य तौर पर, मैंने इसे इस तरह लिखा था: , निश्चित रूप से, आप rel = "nofollow" डाल सकते हैं, लेकिन मैंने सबसे अधिक कार्डियो विधि को चुना। सामान्य तौर पर, मैं "ए" टैग को हटा देता हूं, लेकिन इसके बिना यह काम नहीं करता है। HTML बटन ब्लॉक, जहाँ हम बटन देखना चाहते हैं डालें:

 <ul style="height:40px;list-style:none;margin:0;padding:0;"> <li style="float:left;"> <a id="s-twitter" class="twitter-share-button"> </a></li> <li style="float:left;"> <div id="s-facebook" class="fb-like" style="margin-right:40px;"> </div> </li> <li style="float:left;"> <div id="vk_like"> </div> </li> <li style="float:left;margin-right:10px;"> <div id="s-google" class="g-plusone"> </div> </li> </ul>

2. बटन के लिए अतुल्यकालिक रूप से लोडिंग स्क्रिप्ट के लिए जावास्क्रिप्ट कोड; जहां भी आप चाहते हैं पेस्ट करें, आमतौर पर या तो सिर पर या पृष्ठ के अंत में। वैसे, कोड में ट्विटर और फेसबुक के पास लिपियों को फिर से लोड करने के खिलाफ सुरक्षा है, अगर कोड को कई बार डाला जाता है, तो मुझे नहीं लगता कि कोई व्यक्ति कई बार कोड डालेगा, लेकिन सिर्फ मामले में, मैंने स्क्रिप्ट को फिर से लोड करने के खिलाफ सुरक्षा छोड़ दी :

 <script type="text/javascript"> (function() { function async_load(u,id) { if (!gid(id)) { s="script", d=document, o = d.createElement(s); o.type = 'text/javascript'; o.id = id; o.async = true; o.src = u; // Creating scripts on page x = d.getElementsByTagName(s)[0]; x.parentNode.insertBefore(o,x); } } function gid (id){ return document.getElementById(id); } window.onload = function() { e = gid("s-twitter"); e.setAttribute("data-lang", "ru"); e = gid("s-facebook"); e.setAttribute("data-layout", "button_count"); e.setAttribute("data-send", "false"); e = gid("s-google"); e.setAttribute("data-size", "medium"); async_load("//platform.twitter.com/widgets.js", "id-twitter");//twitter async_load("//connect.facebook.net/ru_RU/all.js#xfbml=1", "id-facebook");//facebook async_load("https://apis.google.com/js/plusone.js", "id-google");//google async_load("//vk.com/js/api/openapi.js", "id-vkontakte");//vkontakte }; //  vkontakte window.vkAsyncInit = function(){ VK.init({apiId: 3363525, onlyWidgets: true}); VK.Widgets.Like("vk_like", {type: "button", height: 20}); }; })(); </script>

अंतिम बारीकियों, आपको एपीआईआईडी प्राप्त करने के लिए अपनी vkontakte साइट को पंजीकृत करना होगा, आप मेरे एपीआईडी को छोड़ सकते हैं, लेकिन यह केवल आपकी साइट पर काम नहीं करेगा।

सौभाग्य है

सोशल मीडिया बटन, एचटीएमएल 5, डेटा विशेषता और जावास्क्रिप्ट अतुल्यकालिक लोडिंग

More articles: