2012-01-23 19 views
10

क्या किसी को पता है कि चैनल यूआरएल पैरामीटर, FB.init को पास किया गया है, वास्तव में एफबी जेएस एसडीके द्वारा उपयोग किया जाता है? मैं इसे अपने nginx लॉग फ़ाइलों में हिट कर देख सकता हूं और ऐसा लगता है कि यह IE8 उपयोगकर्ताओं से है, लेकिन मैं इसे मैन्युअल रूप से पुन: उत्पन्न नहीं कर सकता। मेरे पास बटन और टिप्पणी प्लगइन्स के साथ एक फैन पेज आईफ्रेम ऐप है।चैनलयूआरएल वास्तव में कब उपयोग किया जाता है?

+0

मुझे लगता है कि यह मेरे पृष्ठ लोड के दौरान नेटवर्क यातायात का निरीक्षण करते समय भी एफएफ और क्रोम द्वारा लोड किया जाता है। ** ** ** जब यह लोड हो जाता है, मुझे नहीं पता। – DMCS

उत्तर

19

आप इस पोस्ट को देख सकते हैं। यह अच्छी तरह से समझाया गया है।

https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/

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


कैसे-: अंकुर Pansari द्वारा सामाजिक प्लग-इन प्रदर्शन का अनुकूलन - 12:00 बजे

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

कस्टम चैनल यूआरएल चैनल यूआरएल नामक FB.init फ़ंक्शन में एक वैकल्पिक पैरामीटर है। कि आप अपने स्थानीय निर्देशिका में जोड़ने के लिए एक फ़ाइल जो कुछ पुराने ब्राउज़र में संचार की गति बढ़ाने में सहायता मिलती

<div id="fb-root"></div> 
<script src="//connect.facebook.net/en_US/all.js"></script> 
<script> 
    FB.init({ 
    appId : 'YOUR APP ID', 
    status: true, // check login status 
    cookie: true, // enable cookies to allow server to access session, 
    xfbml: true, // enable XFBML and social plugins 
    oauth: true, // enable OAuth 2.0 
    channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel 
    }); 
</script> 

channelUrl अंक: जब आप JavaScript लाइब्रेरी प्रारंभ, FB.init समारोह में channelUrl पैरामीटर जोड़ते हैं। चैनल यूआरएल के बिना, हमें वर्कअराउंड्स का उपयोग करने के लिए मजबूर होना पड़ता है जैसे कि सामाजिक प्लगइन को ठीक से लोड करने के लिए छिपे हुए आईफ्रेम में वेबपृष्ठ की दूसरी प्रति लोड करना। कामकाज लोड समय बढ़ाते हैं और फेसबुक से रेफ़रल ट्रैफिक बढ़ाते हैं।

एक channel.html फ़ाइल बनाने के लिए, फ़ाइल (http://www.yourdomain.com/channel.html में स्थित) में निम्न पंक्ति जोड़ें:

<script src="//connect.facebook.net/en_US/all.js"></script> 

आप PHP चलाने की क्षमता है, तो हम दृढ़ता से के लिए एक लंबे कैश की स्थापना की सलाह इष्टतम प्रदर्शन सुनिश्चित करने के लिए channelUrl फ़ाइल। यहां एक नमूना PHP स्क्रिप्ट है कि पूरा करता है:

<?php 
    $cache_expire = 60*60*24*365; 
    header("Pragma: public"); 
    header("Cache-Control: maxage=".$cache_expire); 
    header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT'); 
?> 

<script src="//connect.facebook.net/en_US/all.js"></script> 

इस मामले में, आप भी channelUrl फ़ाइल पूरी तरह से योग्य यूआरएल के लिए इस तरह के http://www.yourdomain.com/channel.php के रूप में स्थापित करना चाहिए।

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

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

उदाहरण के लिए:

<html xmlns:fb="https://www.facebook.com/2008/fbml"> 
<body> 
<div id="fb-root"></div> 
<script> 
    /* All Facebook functions should be included 
    in this function, or at least initiated from here */ 
    window.fbAsyncInit = function() { 
    FB.init({appId: 'your app id', 
      status: true, 
      cookie: true, 
     xfbml: true}); 

    FB.api('/me', function(response) { 
     console.log(response.name); 
    }); 
    }; 
    (function() { 
    var e = document.createElement('script'); e.async = true; 
    e.src = document.location.protocol + 
     '//connect.facebook.net/en_US/all.js'; 
    document.getElementById('fb-root').appendChild(e); 
    }()); 
</script> 
</body> 
<html> 

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

+0

आपके लिंक के लिए धन्यवाद। इसने समस्या हल कर दी है :) –

+2

लिंक के साथ समय के साथ मरने के साथ यहां थोड़ा और पृष्ठभूमि प्रदान करना सबसे अच्छा होगा। –

+2

अच्छा ... मैं बस थोड़ा आलसी हूँ! :)....तुम्हारे सुझाव के लिए धन्यवाद। अगली बार मुझे इस मुद्दे को याद आएगा। –

संबंधित मुद्दे