2012-04-18 29 views
14

पर अनंत स्क्रॉलिंग के साथ काम नहीं कर रहे सामाजिक प्रतीक काम पर क्लाइंट के लिए वेबसाइट बना रहे हैं, जो यहां पाया जा सकता है: http://ethercreative.net/studio_social/ यह एक बहुत ही सरल WordPress थीम है, लेकिन जटिल स्क्रॉलिंग प्लगइन के बीच संघर्ष के साथ जटिलताओं का सामना करना पड़ रहा है , और सामाजिक प्रतीक।वर्डप्रेस

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

इनमें से प्रत्येक चीज काम करती है, लेकिन एक साथ नहीं।

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

अजीब बात है, हालांकि है यह कोड के ब्लॉक पीछे छोड़ देता:

<span class="icons"> 
        <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></g:plusone>    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp; 
        <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span> 
</div> 

मुझे पता है कि समस्या क्या है और क्यों हो रहा है, लेकिन मैं वास्तव में जावास्क्रिप्ट के साथ बहुत अच्छा नहीं कर रहा हूँ और पता नहीं है इसे ठीक करने के लिए क्या कॉल का उपयोग करें।

मैं अनंत स्क्रॉल प्लगइन (http://wordpress.org/extend/plugins/infinite-scroll/) के साथ वर्डप्रेस 3.3.1 का उपयोग कर रहा हूं और सामाजिक आइकन के लिए digg digg (http://wordpress.org/विस्तार/प्लगइन्स/digg-digg /)

अनंत स्क्रॉल प्लगइन में पोस्ट के नए सेट को पकड़ने के बाद चलाने के लिए लोड ईवेंट को जोड़ने की क्षमता होती है। तो मुझे यहाँ क्या जोड़ना चाहिए?

किसी भी और सभी मदद के लिए धन्यवाद! एक अच्छा दिन है।


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

!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"); 

अद्यतन: मिले भी गूगल प्लस कोड:

(function() { वर पो = document.createElement (जैसे स्क्रिप्ट '); po.type = 'टेक्स्ट/जावास्क्रिप्ट'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0 ]; s.parentNode.insertBefore (पीओ, एस); })();

मैंने क्या सीखा है? स्टैक ओवरफ़्लो पर पूछने से पहले अधिक गुगल करें। कम से कम भविष्य में इस मुद्दे के साथ लोगों का जवाब है।

+5

आप अपने खोज परिणामों को एक अच्छी टिप्पणी के उत्तर के रूप में/रखना चाहिए और बाद में इसे स्वीकार कर सकते हैं। –

+0

मुझे खेद है, मुझे समझ में नहीं आता? यदि आप इस तथ्य का जिक्र कर रहे थे तो मैंने प्रश्न के भीतर अपना जवाब जोड़ा, जो आपके अपने सवालों के जवाब देने पर प्रतिबंध के कारण था। –

+1

उस पर कोई प्रतिबंध नहीं है। एफएक्यू पढ़ें ["मैं यहां किस तरह के प्रश्न पूछ सकता हूं?"] (Http://stackoverflow.com/faq#questions) अनुभाग अंतिम वाक्य: यह पूछना ठीक है कि आप अपने प्रश्न पूछें और जवाब दें। और [इस विषय पर [एसओ ब्लॉग पोस्ट] पढ़ें (http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/) –

उत्तर

7

मूल रूप से प्रस्तुत किया गया समाधान स्क्रिप्ट को पुनः लोड करना है, जो कि बहुत अक्षम है, क्योंकि संभवतः आपने उन्हें सामाजिक बटन के पहले सेट के लिए पृष्ठ लोड पर लोड किया है। सेवाओं के सभी 3 में किसी भी नए सामाजिक विजेट को प्रस्तुत करने के लिए, या संपूर्ण, दस्तावेज़ के किसी अनुभाग को पार्स करने का एक तरीका है। कोड आप चाहते हैं कुछ इस तरह होगा:

var el = document.body; 

//Google Plus 
if (typeof gapi !== "undefined") { gapi.plusone.go(el); } 

//Facebook 
if (typeof FB !== "undefined") { FB.XFBML.parse(el); } 

//Twitter 
if (typeof twttr !== "undefined") { twttr.widgets.load(); } 

ऊपर मामलों में, एल कंटेनर कि विगेट्स रखती है या शायद सिर्फ document.body हो सकता है किया जाना चाहिए सुनिश्चित नहीं हैं (हैं सभी विजेट फिर से प्रस्तुत करना।) यदि आप वर्तमान में ट्विटर के साथ संदर्भ को संकीर्ण कर सकते हैं, लेकिन मेरा मानना ​​है कि वे इसे जोड़ने की योजना बना रहे हैं।

+0

यह मेरे लिए पूरी तरह से काम करता है और मैं वर्डप्रेस पर जेटपैक अनंत स्क्रॉल प्लगइन का उपयोग कर रहा हूं। रुचि रखने वालों के लिए, 'while' लूप के बाद उत्तर कोड को जावास्क्रिप्ट टैग में पेस्ट करें लेकिन फिर भी' loop.php' फ़ाइल में। – Technoh

0

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

  1. लोड प्रारंभिक पृष्ठ
  2. निष्पादित आवश्यक जे एस:

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

  3. पेज अनंत स्क्रॉल, ट्रिगर और अतुल्यकालिक अनुरोध
  4. async लोड होने पर, अतुल्यकालिक लोड कॉलबैक प्रतिसाद पार्स और फिर डोम से अधिक पुनरावृति यह अपने विजेट बनाने कार्य करने के लिए प्रविष्टियों में से हर बीतते बनाता चला रहे हैं।

इस तरह, आप जिस प्रभाव को चाहते हैं उसे पाने के लिए आप कम से कम आवश्यक कार्य कर रहे हैं।

+0

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

0

जे एस फ़ाइलों में कोड जोड़ ...

addthis.toolbox('.addthis_toolbox'); 
addthis.counter('.addthis_counter'); 

यह पूरी तरह से काम करता है।